※ こちらのウィジェットは、カラムの時のみ正常にご利用いただけます。

Lightning PR コンテンツウィジェットの特徴

WEBサイト上の約 80% の文章は流し読みされてしまうという問題があります。そんな中でも、「ユーザーの目にとまるようなレイアウトを!」という目的のために追加したのが「VK_PR コンテンツウィジェット」です。

  1. 1カラムのデザイン ( 100% 表示 ) でコンテンツに注目させる
  2. 大きな画像が目に入りやすい
  3. キーワードを強調するためのタイトルを表示
  4. パッと見て内容を把握できる説明文章
  5. わかりやすいリンクボタンを簡単設置

設定方法

※ 現在のサイトが2カラムになっている場合は、1カラムに設定してからご利用ください。

ダッシュボードのメニューから【 外観 】>【 カスタマイズ 】を選択してカスタマイザーを起動します。

【 ウィジェット 】>【 任意の場所を選択 】>【 VK_PR コンテンツ 】を選んで「タイトル」など適宜入力してください。

設定手順

テキストの色を変更する

「タイトル」と「テキスト」でそれぞれ別の色を設定できます。カラーピッカーを使って任意の色を選択してください。

テキストの色変更

リンクボタンを選択する

リンクボタンは「塗りつぶしタイプ」と「ゴーストタイプ」の2種類から選択できます。

ボタンの色もカラーピッカーで自由に設定できます。
「ゴーストタイプ」を選択した場合は、「テキストの色」がボタンの色として反映されて、マウスオン ( マウスのカーソルを重ねる動作 ) の時に「ボタンの色」が反映されます。

リンクボタン設定

画像を配置してレイアウトタイプを決定する

コンテンツ内に配置する画像と画像の境界線をカラーピッカーで適宜設定できます。

画像を左に置くレイアウトタイプ ( 通常 ) と右に置くパターンから選択してください。

レイアウトタイプを決める

背景色や背景画像を設定する

背景に任意の色や画像を設定できます。「背景色」と「背景画像」の両方がセットしてある場合は、「背景画像」が優先されます。

画像を設定して、テキストが見にくくなった場合などには「画像に被せる色」を設定して調整してください。「画像に被せる色の濃さ」で被せる色の透明度を変更することができます。

「画像に被せる色の濃さ」をリセットするには、入力欄に “0” を入力することでリセットします。

背景画像を設定

ウィジェット上下の余白を調整する

ウィジェットの上下の余白がそれぞれ設定できます。

前後のウィジェットに合わせて任意の余白でバランスを調整してください。Lightning の公式ページ では上下とも「0」を設定しています。

上下の余白を適宜調整

補足

  • 「テキスト」欄は <a> タグも入力できます。
  • リンクボタンは「リンク先のURL」と「リンクボタンのテキスト」の両方を入力しないと表示されません。
  • 「ウィジェット上・下の余白」は数値と単位(px など)を入力してください。

使用例

実際に Lightning の公式ページで利用しています。

具体的な使用例

設定ガイド

プラグインやウィジェットの使い方がわからない場合、まずは設定ガイドのページをご確認ください。