VK Blocksの主なブロック

ここでは、よく使うVK Blocksについていくつかご紹介します。

漫画のような吹き出しを作る VK Blocks「フキダシ」

VK Blocks「フキダシ」を利用すると、下記のような吹き出しを使った漫画のようなやりとりを簡単にページ上に作ることができます。

吹き出しブロックを利用すると、ブログ記事の中で以下のような会話の再現などを表現することができます。

/

なお吹き出しの設定項目では、画像や吹き出しの背景色、枠線の色を変えたり、吹き出しの位置や吹き出しのタイプを変更する事が可能です。

記事内に吹き出しを入れてあげると一気にブログが見やすくなります。

画像はアイコンに近いくらいの正方形の小さい画像がおすすめです。本例では300pxの正方形の画像を利用しています。

スタッフ紹介に役立つレイアウトを作る VK Blocks 「スタッフ」

VK Blocks「スタッフ」を利用すると、下記のようなスタッフ紹介に便利なレイアウトをページ上に作ることができます。

ブロックエディター 上で、「VK Block＞スタッフ」を選択します。

スタッフブロックが挿入されるので、画像やテキストを入力します。

スタッフ情報が出来上がりました。右側のメニューから簡単なレイアウトの調整もできます。スタッフ紹介・お客様の声紹介などに役立つブロックです。

補足やポイントなど目立たせたい場合に使えるVK Blocks「枠線ボックス」

枠線ボックスブロックは、補足やポイントなど目立たせたい場合に便利です。

こちらのブロックを使用すると、注目されやすい以下のようなボックスを作成する事ができます。

また、設定項目では、枠線ボックスのスタイルの変更や色の変更、見出し箇所に付けたいアイコンの設定等を行うことが可能です。

枠線ボックスブロックの中には任意のブロックを追加する事ができるので、目立たせたい情報を入れるようにすると良いでしょう。

背景枠を作るVK Blocks 「アラート」

VK Blocks「アラート」を利用すると、下記のような背景枠を作ることができます。お知らせ・注意事項・警告などで目立たせる場合に便利です。

こちらのブロックは利用することで、以下のような注釈や注意などの4つのステータスがある色付きボックスを作成する事ができます。

ややこしい設定項目などが無くシンプルなブロックですが、ブログなどで役に立つブロックです。

ボタンを作るVK Blocks 「ボタン」

VK Blocks「ボタン」を利用すると、下記のようにアイコンを入れたり、サブテキストが入ったボタンを作ることができます。

VK Blocks＞ボタンを選択します。

ボタンのブロックが挿入されるので、ボタンの文字とリンク先のURLを入力します。

右側のメニューからボタンのスタイルやサブテキスト、テキストの前後に入れたいアイコンの設定ができます。

よくある質問を作ることができるVK Blocks「新FAQ」

VK Blocks「新FAQブロック」を利用すると、下記のようなQ＆Aを作ることができます。よくある質問を作る際に便利です。

こちらのブロックを使用すると、以下のようなFAQリストを作成することができます。

また「新FAQブロック」のスタイルは右側サイドバー「ブロック」タブから変更することが可能です。

Pro版(※)では、折りたたみ形式(アコーディオンメニュー)にすることもできます。

「旧FAQブロック」と「新FAQブロック」の違いは何ですか？

「新FAQブロック」では質問エリアにも自由なブロックを入力することができるように改良されています。その為、必要に応じて画像ブロックを挿入したりすることも可能です。

手順・流れを作るVK Blocks 「フロー」

VK Blocks「フロー」を利用すると、下記のような、手順・流れ(フロー)を作ることができます。

VK Blocks＞フローを選択します。

フローの雛形が挿入されるので、テキストや画像を入力していきます。

フローブロックを複数回挿入していき、手順などを作っていくことができます。末尾のフローは、下矢印を消すことができます。

画像と文章がセットのレイアウトVK Blocks 「PR Content」

VK Blocks「PR Content」を利用すると、下記のような、画像と文章・ボタンなどをセットにしたレイアウトを作ることができます。

VK Blocks＞PR Contentを選択します。

PR Contentが挿入されます。テキストや画像などを入力していきます。

また、右側メニューからレイアウトやボタンの設定も可能です。

縦余白を作るVK Blocks レイアウト「レスポンシブスペーサー」

VK Blocks レイアウト「レスポンシブスペーサー」を利用すると、ブロック間の縦余白をデバイス(ブラウザ幅)ごとに設定することができます。

VK Blocks レイアウト＞レスポンシブスペーサーを選択します。

レスポンシブスペーサーが挿入されたら、右側のブロック設定画面の「余白の設定」を「M」に設定します。

これで上の例では、PC・タブレット・モバイル表示の際に、それぞれ80・60・40pxの余白が取られるようになります。

なお、レスポンシブスペーサーでの余白調整は「設定＞VK Blocks」の「共通余白設定」で各デバイス毎の余白サイズを指定しておくことで初期状態を変更することができます。

スライドショーを作成する「スライダーブロック」

スライダーブロックを利用すると、スライドショーを簡単に作ることができます。

こちらのブロックを利用すると、様々な要素を配置できるスライダーを作成する事ができます。
また、スライダーのエフェクトはスライド以外にもフェードが選択できたり、表示時間や切り替え時間等も細かく設定が可能。

スライダーを追加したい場合は、まずスライダーブロックを選択します。

スライダーブロック及び(1個目の)スライダーアイテムブロックが挿入されます。スライダーアイテムブロック内で画像などの任意のブロックを追加します。

「スライダーブロック」を選択した状態で「スライダーアイテムを追加」をクリックする事で新しいスライドを追加する事ができます。

スライダーの設定は、外側のスライダーブロックでスライドショー全体の設定、個々のスライドにあたるスライダーアイテムで１個１個のスライドの設定ができます。

VK Block Patternsの概要

VK Block Patternsは、ブロックパターンと呼ばれるよく使うブロックの組み合わせを登録したり、予め登録されているブロックパターンを呼び出したりできるプラグインです。

VK Blocksに加えて、VK Block Patternsをインストール・有効化すると、独自のブロックパターンを利用できたり登録したりすることが可能になります。

■VK Block Patterns

登録されているパターンを呼び出す方法

VK Block Patternsにあらかじめて登録されているパターンを利用するには、ブロック追加時に「パターン」タブをクリックします。

「パターン」タブには、WordPressデフォルトで備わっているパターンやVK Block Patternsにあるパターンなど、いくつかのパターンがありますが、ここでは「ページ全体」にある「会社案内 Free01」を追加してみましょう。

「会社案内 Free01」パターンをクリックすると、以下のパターンが挿入されました。

一からレイアウトを作らなくても、画像やテキストを差し替えていくことで楽にページを作成することができます。

よく使うパターンを登録する方法

よく使うパターンの登録は、「VK Block Patters＞新規追加」から行うことができます。

新規追加をクリックすると、通常の投稿画面のような画面が表示されるので、こちらでタイトルとオリジナルパターンを作成して、「公開」をクリックします。

以上で、オリジナルパターンの登録が完了です。登録したオリジナルパターンは、「パターン」タブの「VK Block Patterns」から呼び出せます。