テックブログ

テーマLightningのプラグインをいじってみた(PR Blocks編)

更新日:

スクリーンショット 2016-01-18 17.37.28

以前、"WordPressのLightningテーマがすごい"という記事を書きました。

シンプルなテーマであり、用途に応じて必要なだけ肉付けしてデザインを改変できる。そんな魅力が詰まっていることをおさえましたが、

HPをリニューアルするべく、基本的な部分ではありますが、

いくつかプラグインを使ってデザインを変える手順をまとめたので、

導入をする際に参考にしていただければ幸いです。

外観ウィジェット"VK_PR Blocks"

VK_PR Blocksを用いることで、アピールしたい内容をナビゲーションバーのリンク以上に目立たせて

訪問者にアクションをさせるためのプロモーションができます。

以下に手順をまとめました。

1.ダッシュボードメニューの"外観"を選択

2.利用できるウィジェットのリスト中からVK_PR Blocksを見つける

今回お世話になるプラグイン"VK ExUnit"のウィジェットは画像のようにまとめて表示されるので、見つけやすいと思います。

スクリーンショット_2016-01-18_17_01_13

3.表示させたい任意の場所を選択する

ヘッダーやトップページコンテンツエリア、フッターなどから選びます。

"VK_PR Blocks"をドラッグして表示させたい場所にドロップすれば良いです。

選べる場所の候補は使っているテーマやページのデザインに影響するため、一概にここが良いということは断言できませんが、今回はページを開いて目の入るところに設置するために"トップページコンテンツエリア上部"を選択しました。

スクリーンショット_2016-01-18_17_07_30

4.設定画面が細かく出てくる

設定できる項目が並んで出てくるので、詳しく説明します。

設定画面の説明

一つひとつの項目を見てみましょう。ポイントは9つあります。

スクリーンショット_2016-01-18_17_09_19

 

①列の数

デフォルトは3つになっていますが、数を変更できます。

表示させる場所によって選択できる数は異なります。

ここでは3つを選択しています。

②ブロックの番号

表示させるブロックの数に応じて番号が振り分けられます。3つあるなら

1が左、2が真ん中、3が右に並んで表示されます。

③タイトル

そのまんまですが、各ブロックに名前をつけてあげましょう。

入力した通りに反映されます。文字が多すぎないようにすると見た目がスッキリします。

ここでは「実績一覧」と入力しました。

④アイコンフォントのクラス名

表示させるアイコンのマークに何を使うか選びます。こちらの公式のアイコンフォントから選び、クラス名を入力します。クラス名は画像の部分で確認できます。(既に自分で表示させたい画像を用意していたらこの項目は設定する必要はありません。

スクリーンショット_2016-01-18_17_24_08

⑤アイコンの背景色

背景の色をに任意の色に設定できます。既に自分で表示させたい画像を用意していたらこの項目は設定する必要はありません。

スクリーンショット 2016-01-18 17.27.24

⑥画像を選択

アイコンフォントではなくて自分で用意した画像を反映させたい場合、ファイルを選択して設定します。

大きすぎると自動で丸くトリミングされます。

⑦image

ファイルが選択されているとここのスペースに表示されます。

選択していない場合は"No Image"と表示。

⑧概要となるテキスト

タイトルだけでは不足している情報をここに書けば補うことができます。

ここでは、「+Mの実績にはどんなものがあるのかをまとめたものです。」と入力しました。

⑨リンク先のURL

PRのアピールポイントを表示させるべく、ここまで設定してきたので

リンク先のURLも入力しましょう。ここでは当社の実績一覧のURLを入力。

反映させたら

丸い画像とタイトルが3つ並んでスタイリッシュになりました。

 

ちなみに、アイコンフォントを用いた場合はこのようになります。

スクリーンショット 2016-01-18 17.44.06

デフォルトで画像を選択するとアイコンフォント利用時より表示サイズが大きくなる傾向があるので、要注意。

以上、簡単に設定できました。

今回は試しに実績一覧、会社概要、代表プロフィールで作ってみましたが、

簡単に設定して反映できるので、更新頻度の高いキャンペーンの宣伝のアピールや、

ブログ形式のサイトであれば、カテゴリをここで並べたりするのも効果的ではないでしょうか。

LightningとVK ExUnit、まだまだいじり甲斐があります。

-テックブログ

Copyright© プラス・ムーブメント合同会社 , 2018 All Rights Reserved Powered by AFFINGER5.