WordPressのブロックエディタ（Gutenberg）で吹き出しや3PRなど、サイト制作に役立つブロックを作成できるVK Blocksプラグインを紹介します。吹き出しの作成イメージは次のようになります。
Gutenbergで作成できる吹き出し（VK Blocksプラグイン）
BizVektorやLightningでおなじみの3PRブロックの作成イメージは次のようになります。
Gutenbergで作成できる3PRブロック（VK Blocksプラグイン）
以下、VK Blocksプラグインの使い方を説明します。
Gutenbergに吹き出しブロックを追加する
VK Blocksプラグインを使ってGutenberg（ブロックエディタ）に吹き出しを追加する方法は説明不要なほど簡単です。
まずは、ブロックエディタで「ブロックの追加」‐「VK Blocks」メニューから「フキダシ」を選択します。
吹き出しブロックの追加
吹き出しに使う画像(1)を選択して文字を入力(2)すれば完成です。
吹き出しには画像や文字を設定
設定したイメージは次のようになります。
吹き出しの画像と文字を設定したイメージ
「フキダシ設定」では吹き出しの位置や種類、色を設定できます。
吹き出しの設定
- 位置 --- 吹き出し画像の位置（左または右）
- タイプ --- セリフまたは吹き出しを選択
- 色 --- 吹き出しの色を選択
言うまでもありませんが複数の吹き出しを使って会話風に仕上げることもできます。
吹き出しブロックで会話風に仕上げる
あとはアイデア次第です。サービス紹介や難しい説明をわかりやすくするときなど、活用してみてください。
吹き出し以外のブロック
VK Blocksプラグインでは吹き出し以外にもサイト制作に役立つブロックを作成できます。
- 吹き出し
- 質問と回答 --- 「よくある質問」に
- 見出し --- 見出し＋キャッチフレーズ
- スタッフ --- 「スタッフ紹介」に
- アラート --- 注記に
- ボタン --- 問い合わせページなどに誘導
- PR Content --- 強調したいコンテンツに
- PR Blocks --- BizVektorやLightningでおなじみの3PR
質問と回答ブロック
質問（Q）と回答（A）のブロックです。よくある質問などに使えます。
質問と回答ブロック
※メニューでは「解答」になっていますが用途としては「回答」かと思います。
スタッフブロック
スタッフ紹介に使えるブロックです。画像や紹介文を入力するだけで設定できます。
スタッフブロック
アラートブロック
本文の注記などに使えるブロックです。種類を選択して使い分けることもできます。
- Success
- Info
- Warning
- Danger
以下はDangerで作成した例です。
アラートブロックの作成
ボタンブロック
ボタンの文字やリンク先を入力して、クリックできるボタンを作成できます。問い合わせページや購入ページに誘導するときに役立ちます。ボタンの色やサイズなども設定できます。
ボタンブロックの作成
PR Blocks
BizVektorやLightningでおなじみのPRブロックです。おすすめサービスなどを3列でコンパクトに紹介できます。
PRブロック（BizVektorやLightningの3PRのイメージ）
それぞれ、リンク先を設定すれば別々のページに誘導することができます。
PR Contentブロック
特にPRしたいコンテンツや商品などを強調できるブロックです。画像を選択してタイトルと説明文を入力すれば完成です。
PR Contentブロック
見出しブロック
見出し（h2・h3・h4）に加えてサブテキストを入力できます。キャッチフレーズを付けたいときに役立つでしょう。サブテキストには「vk_heading_subtext」のようなクラス名が付いているので一括でスタイルを設定するのに便利です。
見出しブロック
フローブロック
サービス利用の流れなど、ステップごとに説明したいコンテンツの作成に役立ちます。個々のステップは矢印でつなぐことができます。
フローブロック
以上、Gutenbergのブロックエディタで吹き出しや3PRブロックを作成できるVK Blocksプラグインを紹介しました。興味がある方は、ぜひお試しください。