こんにちは、Cinna(シーナ / @web_cinna)です。
WordPressブロックエディタで難しいコードは使わずに記事を見やすくする方法STEP2です。今回は簡単で便利な「テンプレブロック」編です。
無料プラグインVK Blocksを使うと吹き出しや紹介カードなど便利なテンプレブロックが追加されます!テンプレブロックの設定方法を図解を使って解説していきます。
💡 VK Blocksでできること一覧と導入方法はコチラ!ブロックエディタを使いやすく便利にしてくれる無料プラグインです✨

それではいきましょう!
吹き出しを作ってみる
吹き出し、こうゆうやつです!
キャラクターが喋っているみたいな表記ができる「吹き出し」。文章のあいまに入れるといい意味でチカラが抜けて、読みやすく、会話っぽくできます。これもVK Blocksで簡単に作れます!
1. 吹き出しブロックを追加
2. 吹き出しブロックの設定
3. 吹き出しブロックのデザイン設定

- ブロックの役割を変更できる
- 【フキダシ設定】左右位置、デザインなどを設定できる
- 【デフォルトアイコン設定】よく使うキャラ画像を選択できる(登録しておける)
- 【アニメーション設定】ぶるぶるさせたりできる
\タブをクリックすると、プルダウンでカスタマイズメニューが表示される/
特長3点を伝えるのに最適!PR Blocks

特長やアピールポイント、ピックアップやランキングなどでも使いやすい!
PR Blocksブロックの追加
PR Blocksのカスタマイズ

- 左側アイコン(画像)の詳細設定
- 中央アイコン(画像)の詳細設定
- 右側アイコン(画像)の詳細設定
- クリックしてタイトルを入力
- クリックして文章を入力

アイコン(画像)詳細設定
- 【リンク設定】
アイコン(画像)をクリックしたら指定のURLへ飛ばすことができます。
1.飛ばしたいページのURLを入力
2.外部サイトのURLの場合は「リンクを別ウィンドウで開く」にチェックを入れます。 - 【アイコン設定】
「アイコンを選択」をクリックして好きなアイコンを選びます(コードが自動入力されます)
※アイコンリスト以外のアイコンを使いたい場合は、FontAwesomeというサイトで好きなアイコンのコードをコピペして使うこともできます。 - 【アイコンカラー設定】
カスタムカラーで好きな色を選択することもできます。 - 【アイコン背景設定】
ベタ塗り:背景ベタ塗り、アイコン白抜き
背景なし:背景透明、丸枠あり - 【画像設定】
画像を指定するとアイコンの代わりに丸抜きした画像を設定することもできます。
紹介に便利!スタッフブロックを活用しよう

テンプレートにはめるだけで紹介カードが作れます。お店や商品の紹介にも使えそう♪
スタッフブロックを追加

- プラスボタンクリック
- ブロック検索「スタッフ」と入力
- 「スタッフ」ブロックをクリック
スタッフブロックをカスタマイズ

- 名前、キャプション、役職、プロフィールタイトル、プロフィールテキストをクリックして入力。必ずしもこの通りの内容を入力しなくてもOK!紹介したいものに合わせて好きにアレンジしてみてください!
- 【画像を選択】アップロードもしくはメディアライブラリから選ぶ
- 【レイアウト】画像を右側か左側にするか選べる
- 【画像の線】画像に線枠をつけるか選択できる
- 【画像の代理テキスト】画像の説明を簡単に入力
- 【色】❶の各項目の色を設定できる
- 【蛍光マーカー】選択した文字に蛍光マーカーを引ける
説明文に役立つ!フローブロック
料理の作り方や道順の説明など「流れの説明」をするときに役立ちます!
フローブロックを追加

- プラスボタンをクリック
- ブロック検索で「フロー」と入力
- 「フロー」ブロックをクリック
フローブロックを設定・複製

- タイトルを入力
- 詳細説明を入力
- 【画像を選択】アップロードもしくはメディアライブラリから選択
- 【矢印の表示】矢印をつけるかつけないかを設定

- 縦3点アイコンをクリックしてブロック編集メニューを表示
- 「複製」をクリック

複製を繰り返して説明フローが終わったら、最後のブロックは「矢印を表示しない」を選択
よくある質問に使える!FAQブロック
よくある質問や問題集などを作るときに便利なブロックです!
新FAQブロックを追加

- プラスボタンをクリック
- ブロック検索で「faq」と入力
- 「新FAQ」ブロックを選択
※旧FAQもありますが、新FAQのほうが質問と回答部分のどちらにも画像や他ブロックを追加できるのでこちらを使った方が便利です!
新FAQブロックのカスタマイズ

- 質問を入力
- 回答を入力
- 【スタイル】デザインを選べます
- 【アコーディオン設定】Pro版のみ使えます。回答部分を隠すことができる機能です。

\質問部分と回答部分は共に文字以外のブロックを追加できる/

いかがでしたか?今回はVK Blocksで作れる5つのテンプレブロックについてご紹介しました!前回の記事と合わせて、アレンジに使ってみていただけると嬉しいです。WordPressブロックエディタの機能は他にもありますので、第3弾でまたご紹介していきます!
最後まで読んでいただきありがとうございました!
▼VK Blocksの機能を使いながら簡単にサイト型ホームページが作れるWordPressテーマ

