WordPress個別サポート

WordPressのブロックエディタ(Gutenberg)で吹き出しや3PRなど、サイト制作に役立つブロックを作成できるVK Blocksプラグインを紹介します。吹き出しの作成イメージは次のようになります。

Gutenbergで作成できる吹き出し(VK Blocksプラグイン)

Gutenbergで作成できる吹き出し(VK Blocksプラグイン)

BizVektorやLightningでおなじみの3PRブロックの作成イメージは次のようになります。

Gutenbergで作成できる3PRブロック(VK Blocksプラグイン)

Gutenbergで作成できる3PRブロック(VK Blocksプラグイン)

以下、VK Blocksプラグインの使い方を説明します。

スポンサーリンク

Gutenbergに吹き出しブロックを追加する

VK Blocksプラグインを使ってGutenberg(ブロックエディタ)に吹き出しを追加する方法は説明不要なほど簡単です。

まずは、ブロックエディタで「ブロックの追加」‐「VK Blocks」メニューから「フキダシ」を選択します。

吹き出しブロックの追加

吹き出しブロックの追加

吹き出しに使う画像(1)を選択して文字を入力(2)すれば完成です。

吹き出しには画像や文字を設定

吹き出しには画像や文字を設定

設定したイメージは次のようになります。

吹き出しの画像と文字を設定したイメージ

吹き出しの画像と文字を設定したイメージ

「フキダシ設定」では吹き出しの位置や種類、色を設定できます。

吹き出しの設定

吹き出しの設定

  • 位置 --- 吹き出し画像の位置(左または右)
  • タイプ --- セリフまたは吹き出しを選択
  • 色 --- 吹き出しの色を選択

言うまでもありませんが複数の吹き出しを使って会話風に仕上げることもできます。

吹き出しブロックで会話風に仕上げる

吹き出しブロックで会話風に仕上げる

あとはアイデア次第です。サービス紹介や難しい説明をわかりやすくするときなど、活用してみてください。

吹き出し以外のブロック

VK Blocksプラグインでは吹き出し以外にもサイト制作に役立つブロックを作成できます。

VK Blocksで作成できるブロックの例
  • 吹き出し
  • 質問と回答 --- 「よくある質問」に
  • 見出し --- 見出し+キャッチフレーズ
  • スタッフ --- 「スタッフ紹介」に
  • アラート --- 注記に
  • ボタン --- 問い合わせページなどに誘導
  • PR Content --- 強調したいコンテンツに
  • PR Blocks --- BizVektorやLightningでおなじみの3PR

質問と回答ブロック

質問(Q)と回答(A)のブロックです。よくある質問などに使えます。

質問と回答ブロック

質問と回答ブロック

※メニューでは「解答」になっていますが用途としては「回答」かと思います。

スタッフブロック

スタッフ紹介に使えるブロックです。画像や紹介文を入力するだけで設定できます。

スタッフブロック

スタッフブロック

アラートブロック

本文の注記などに使えるブロックです。種類を選択して使い分けることもできます。

アラートブロックの種類(ブロックの色)
  • Success
  • Info
  • Warning
  • Danger

以下はDangerで作成した例です。

アラートブロックの作成

アラートブロックの作成

ボタンブロック

ボタンの文字やリンク先を入力して、クリックできるボタンを作成できます。問い合わせページや購入ページに誘導するときに役立ちます。ボタンの色やサイズなども設定できます。

ボタンブロックの作成

ボタンブロックの作成

PR Blocks

BizVektorやLightningでおなじみのPRブロックです。おすすめサービスなどを3列でコンパクトに紹介できます。

PRブロック

PRブロック(BizVektorやLightningの3PRのイメージ)

それぞれ、リンク先を設定すれば別々のページに誘導することができます。

PR Contentブロック

特にPRしたいコンテンツや商品などを強調できるブロックです。画像を選択してタイトルと説明文を入力すれば完成です。

PR Contentブロック

PR Contentブロック

見出しブロック

見出し(h2・h3・h4)に加えてサブテキストを入力できます。キャッチフレーズを付けたいときに役立つでしょう。サブテキストには「vk_heading_subtext」のようなクラス名が付いているので一括でスタイルを設定するのに便利です。

見出しブロック

見出しブロック

フローブロック

サービス利用の流れなど、ステップごとに説明したいコンテンツの作成に役立ちます。個々のステップは矢印でつなぐことができます。

フローブロック

フローブロック

以上、Gutenbergのブロックエディタで吹き出しや3PRブロックを作成できるVK Blocksプラグインを紹介しました。興味がある方は、ぜひお試しください。

WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズ・トラブル対応でお急ぎのときは
「カスタマイズがうまくいかない」「突然トラブルが発生した!」などでお急ぎのときはWordPressメールサポートで対応します。ご活用ください。
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク