Lightning Proユーザー向けプラグイン「VK Blocks Pro」の機能を紹介
ブロックエディタ対応のVK Blocks ProプラグインはLightning Proのライセンスを持つユーザー向けのプラグインです。この記事の執筆時点では次のようなブロックが使用可能です。
- ステップ --- 「STEP1、STEP2、STEP3…」のようなコンテンツに
- タイムライン --- 時系列で表現するコンテンツに(例:当社の歴史)
- 目次 --- 自動表示される投稿の目次に
- 投稿リスト --- 固定ページ内に新着情報を表示
以下、簡単に各ブロックの使用例を紹介します。
VK Blocks Proプラグインのインストール
Lightning Proを購入したサイトの「ダッシュボード」メニューからVK Blocks Proプラグインをダウンロードします。
![VK Blocks Proのダウンロード](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_10-52-53.jpg)
![VK Blocksプラグインを停止](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_10-57-20.jpg)
ダウンロードしたVK Blocks Proプラグインを「プラグイン」‐「新規追加」メニューからインストール、有効化します。
![VK Blocks Proの有効化](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_11-06-56.jpg)
投稿や固定ページのブロックエディタ(ブロック追加メニュー)から「VK Blocks」を選択すると、Lightning Proユーザー限定のブロック(「Pro」のラベルが付いているブロック)が使用可能になります。
![Lightning Proユーザー限定のブロックが使用可能に](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_11-09-42.jpg)
ステップブロック
ステップブロックは「ステップ1、ステップ2、ステップ3…」と続く流れを表現できるブロックで「ご利用の流れ」などの作成に役立ちます。
![ステップブロック](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_11-28-11.jpg)
初期設定ではステップ番号が小さかったので以下のCSSでカスタマイズしています。
.vk_step .vk_step_item .vk_step_item_dot { font-size: 24px; } .vk_step .vk_step_item .vk_step_item_dot_caption { display: none; }
ステップマークを大きく
「STEP」とステップ番号全体を大きくするCSSは次のようになります。
.vk_step .vk_step_item .vk_step_item_dot { font-size: 24px; } .vk_step .vk_step_item .vk_step_item_dot_caption { font-size: 16px; } .vk_step .vk_step_item .vk_step_item_dot { top: -10px; left: -10px; width: 70px; height: 70px; padding: 11px 0; }
表示結果は次のようになります。
![ステップマークを大きく](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_11-42-06.png)
タイムラインブロック
タイムラインブロックは時系列で示すことができ、会社の歴史などの作成に役立ちます。
![タイムラインブロックの使用例](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_11-59-58.jpg)
投稿リストブロック
投稿リストブロックは新着情報を表示できるブロックです。表示する投稿の件数や項目(画像・カテゴリー・抜粋など)は選択可能です。
![新着情報を表示できる投稿リスト](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_12-51-38.jpg)
複数カテゴリーの新着情報をまとめて表示するのも簡単です。
![複数カテゴリーの新着情報を表示](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_13-03-08.jpg)
記事の抜粋と「詳しくはこちら」ボタンを表示したイメージは次のようになります。
![抜粋と「詳しくはこちら」ボタンを表示した例](https://www.nishi2002.com/wp-content/uploads/2020/02/2020-02-13_13-17-56.jpg)
以上、Lightning Proで使えるVK Blocks Proの機能を紹介しました。興味がある方はLightning Proを購入してお試しください。