[2021年最新]Lightningテーマの3PRの設定方法をお探しの方向け。
Lightningテーマには、以下の場所に「3PR」と呼ばれるユーザーにPRしたいコンテンツを表示できる機能があります。
- トップページのヘッダー画像下部
- サイドバー・フッター
- 固定ページ・投稿
この記事では、Lightningテーマの3PRの設定方法を解説します。
好きなところから読めます
Lightningテーマの3PRの設定方法は3つ
Lightningテーマの3PRの設定方法は3つあります。
- カスタマイザー → トップページヘッダー画像下部に表示される3PRの編集
- ウィジェット → トップページ・サイドバー・フッターに3PRを設置
- ブロックエディタ(投稿・固定ページ) → 投稿・固定ページに3PRを設置
各設定方法を上記の順に解説します。
トップページヘッダー画像下部の3PRを編集する手順
最初に、トップページヘッダー画像下部(上図赤枠部分)の3PRを編集する手順を解説します。
- 手順①:カスタマイザーを立ち上げる
- 手順②:Lightning トップページ PR Blockを開く
上記のとおりです。
手順①:カスタマイザーを立ち上げる
まずはカスタマイザーを立ち上げます。
ダッシュボード>外観>カスタマイズ を選択します。
カスタマイザーが表示されますので、カスタマイザーのメニューにある、「Lightning トップページ PR Block」を選択します。
手順②:Lightning トップページ PR Blockを開く
3PRを編集できる画面が表示されますので、ここで3PRを設定します。
各項目の設定方法は次のとおりです。
- ①アイコン1:アイコンのクラス名を入力すると、アイコンフォントを挿入できます。アイコンフォントとは、「Font Awesome Icons」のアイコンを使用できます。
- ②タイトル1:見出しを入力します。
- ③サブテキスト1:ユーザーに請求したい文章を入力します
- ④リンクURL1:任意のURLを入力すると、「③サブテキスト1」にリンクを張る事ができます。
3PRを編集したら、カスタマイザー上部にある「公開」ボタンをクリックすると、設定が保存されます。
以上でトップページヘッダー画像下部の3PRを編集する手順は完了です。
3PRを表示したくない場合
3PRを非表示にしたい時は、下図「PR Block を表示する」のチェックを外すと非表示になります。
ウィジェットで3PRを設置する手順
次に、ウィジェットで3PRを設置する手順を解説します。
なお、ウィジェットで3PRを設置する方法は以下2種類あり、基本的な使い方は殆ど同じですが、表示が異なりますので、サイトの雰囲気に合わせて使い分けましょう。
- VK 3PRエリアで設置する
- VK PR Blocksで設置する
上記の順に解説します。
VK 3PRエリアで設置する
VK 3PRエリアで設置する方法を解説します。手順は次のとおりです。
- 手順①:ウィジェット開く
- 手順②:VK 3PRエリアを選択
- 手順③:VK 3PRエリアの編集
上記のとおりです。
手順①:ウィジェット開く
まずはウィジェットに移動します。
ダッシュボード>外観>ウィジェット を選択します。
手順②:VK 3PRエリアを選択
ウィジェット一覧画面が表示されたら、「VK 3PRエリア」を選択します。
「VK 3PRエリア」を選択すると、表示位置の選択肢が一覧表示されます。
なお、本記事では見やすさを優先して、トップページに設定します。
①「トップページコンテンツエリア上部」を選択し、②「ウィジェットを追加」をクリックします。
手順③:VK 3PRエリアの編集
VK 3PRエリアを編集します。
各項目の設定方法は次のとおりです。
- ①タイトル:見出しを入力します。
- ②PC用に表示される画像を選択:横幅300px 程度が推奨サイズとなります。
- ③スマホ用(ウィンドウサイズが 768px 以下の場合)に表示される画像を選択(横690px 以上推奨。空欄も可):スマホ用の画像を設定できます。スマホ用の画像を設定しないとPCの画像が表示されます。
- ④概要となるテキスト:ユーザーに請求したい文章を入力します。
- ⑤リンク先ページのURL:テキストにリンクを張りたい場合はURLを入力します。
下図のように入力してみました。
残りの2つのエリアに画像とテキストを追加したら、「保存」ボタンをクリックして設定を保存します。
VK 3PRエリアの表示をプレビューで確認
プレビューで確認してみると、下図のようにVK 3PRエリアエリアが追加されたことが確認できます。
以上でVK 3PRエリアで設置する方法は完了です。
VK 3PRエリアを一段増やしたい場合は、同じ作業を繰り返すと1段追加できます。
VK PR Blocksで設置する
次に、VK PR Blocksで設置する方法を解説します。手順は次のとおりです。
- 手順①:ウィジェット開く
- 手順②:VK PR Blocksを選択
- 手順③:VK PR Blocksの編集
上記のとおりです。
手順①:ウィジェット開く
ダッシュボード>外観>ウィジェット を選択して、
ウィジェットに移動します。
手順②:VK PR Blocksを選択
ウィジェット一覧画面が表示されたら、「VK PR Blocks」を選択します。
「VK PR Blocks」を選択すると、表示位置の選択肢が一覧表示されます。
①「トップページコンテンツエリア上部」を選択し、②「ウィジェットを追加」をクリックします。
手順③:VK PR Blocksの編集
各項目の設定方法は次のとおりです。
- ①列の数:初期設定は3列ですが、4つに増やせます。
- ②タイトル:見出しを入力します。
- ③概要となるテキスト:ユーザーに請求したい文章を入力します。
- ④リンク先ページのURL:テキストにリンクを張りたい場合はURLを入力します。
- ⑤使用したいアイコンフォントのクラス名:クラス名を変更するとアイコンを変更できます。
- ⑥アイコンの色:カラーピッカーでアイコンの色を変更できます。
- ⑦アイコン背景:アイコンの背景カラーを変更できます。
- ⑧画像:アイコンではなく画像を設定したい方は、画像を選択します。
下図のように入力してみました。
残りの2つのエリアに画像とテキストを追加したら、「保存」ボタンをクリックして設定を保存します。
VK PR Blocksの表示をプレビューで確認
プレビューで確認してみると、下図のようにVK PR Blocksが追加されたことが確認できます。
以上でVK PR Blocksで3PRを設置する方法は完了です。
3PRを一段増やしたい場合は、VK 3PRエリア同様、同じ作業を繰り返すと1段追加できます。
ブロックエディタの固定ページ・投稿で3PRを設置する手順
ブロックエディタの固定ページ・投稿で3PRを設置する手順を解説します。
手順は次のとおりです。
- 手順①:ページの編集画面でブロックを追加する
- 手順②:3PR Blocksの編集
上記のとおりです。
手順①:ページの編集画面でブロックを追加する
ページの編集画面で下図いずれかの部分をクリックして、ブロックを追加します(固定ページ・投稿共通)。
下図のようにブロックが表示されますので、「PR Blocks」を選択します。
下図のように3PRが出現しますので、テキストの編集や、アイコンの変更を行います。
手順②:3PR Blocksの編集
3PR Blocksを編集します。
各項目の設定方法は次のとおりです。
- ①:タイトルを入力します。
- ②:ユーザーに請求したい文章を入力します。
- ③リンクURL:テキストにリンクを張りたい場合はURLを入力します。
- ④アイコン:アイコンを選択します
- ⑤:アイコンの色を変更します
- ⑥アイコン背景:アイコンの背景カラーを変更できます。
- ⑦PR画像:アイコンではなく画像を設定したい方は、画像を選択します(画像が優先されます)。
下図のように入力してみました。
3つのエリアを編集したら、「プレビュー」ボタンをクリックして表示を確認します。
編集内容に問題無ければ、「公開」ボタンをクリックしてページを公開しましょう。
ちなみに、ブロックは何段でも増やせますし、テキストにマーカーをつける事もできます。
トップページのPR Blockや、ウィジェットの3PRと比較して、自由度が高く、設定しやすいと思います。
Lightningの3PRを設置する時のよくある疑問
最後に、Lightningの3PRを設置する時のよくある疑問を2つ紹介します。
- VK 3PRエリアがウィジェットに表示されない
- 3PRの表示はカスタマイズできないの?
上記のとおりです。
VK 3PRエリアがウィジェットに表示されない
VK 3PRエリアがウィジェットに表示されない時は、VK 3PRエリアが有効化されていない可能性が高いです。
ダッシュボード>ExUnit>有効化 を選択し、
VK All in One Expansion Unit 有効化設定を確認して下さい。
チェックが外れていると、VK 3PRエリアは表示されません。
チェックを入れて、「変更を保存」をクリックして下さい。
これで、ウィジェットにVK 3PRエリアが表示されるようになります。
VK PR Blocksも同様、ウィジェットに表示されなければ、ウィジェット有効化設定でチェックが外れている可能性がありますので、チェックが入っているか確認して下さい。
3PRの表示はカード型に変更できる?
無料版では、3PRの表示をカード型に変更する事ができません。
カード型に変更したい方は、「【Lightning】有料デザインスキンで業種に合ったおしゃれなサイトを構築」という記事で紹介している、Lightning Pro(有料スキン)を使うと、「VK Blocks Pro」というVK Blocksの機能を強化したプラグインを使うと、カード型に変更できます。
カード型に変更できるだけでなく、順番の入れ替えやカラム数を自由に変更できます。
まとめ
以上、Lightningテーマの3PRの設定方法を3つ解説しました。
おわり。