ブロックエディタ使い方

【記事をデザイン】”吹き出し”も簡単!『VK Blocks』5つのテンプレ使い方「テンプレブロック」編

Cinna

こんにちは、Cinna(シーナ / @web_cinna)です。

WordPressブロックエディタで難しいコードは使わずに記事を見やすくする方法STEP2です。今回は簡単で便利な「テンプレブロック」編です。

無料プラグインVK Blocksを使うと吹き出しや紹介カードなど便利なテンプレブロックが追加されます!テンプレブロックの設定方法を図解を使って解説していきます。

この記事では簡単に記事をデザインするために、無料プラグイン”VK Blocks”のブロックエディタ拡張機能を使っています。

それではいきましょう!

吹き出しを作ってみる

Cinna

吹き出し、こうゆうやつです!

キャラクターが喋っているみたいな表記ができる「吹き出し」。文章のあいまに入れるといい意味でチカラが抜けて、読みやすく、会話っぽくできます。これもVK Blocksで簡単に作れます!

1. 吹き出しブロックを追加

  1. プラスボタン(左上のでもOK)クリック
  2. ブロック検索で「吹き出し」入力
  3. 吹き出しブロックをクリック

2. 吹き出しブロックの設定

  1. クリックしてキャラクターなどの画像をアップロードもしくは選択
  2. クリックしてキャラクター名を入力
  3. クリックして喋らせたい文字を入力

3. 吹き出しブロックのデザイン設定

  1. ブロックの役割を変更できる
  2. 【フキダシ設定】左右位置、デザインなどを設定できる
  3. 【デフォルトアイコン設定】よく使うキャラ画像を選択できる(登録しておける)
  4. 【アニメーション設定】ぶるぶるさせたりできる

\タブをクリックすると、プルダウンでカスタマイズメニューが表示される/

特長3点を伝えるのに最適!PR Blocks

Cinna

特長やアピールポイント、ピックアップやランキングなどでも使いやすい!

PR Blocksブロックの追加

  1. プラスボタンクリック
  2. ブロック検索「PR」で入力
  3. 「PR Blocks」をクリック

PR Blocksのカスタマイズ

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

アイコン(画像)詳細設定

  1. 【リンク設定】
    アイコン(画像)をクリックしたら指定のURLへ飛ばすことができます。

    1.飛ばしたいページのURLを入力

    2.外部サイトのURLの場合は「リンクを別ウィンドウで開く」にチェックを入れます。
  2. 【アイコン設定】
    「アイコンを選択」をクリックして好きなアイコンを選びます(コードが自動入力されます)

    ※アイコンリスト以外のアイコンを使いたい場合は、FontAwesomeというサイトで好きなアイコンのコードをコピペして使うこともできます。
  3. 【アイコンカラー設定】
    カスタムカラーで好きな色を選択することもできます。
  4. 【アイコン背景設定】
    ベタ塗り:背景ベタ塗り、アイコン白抜き
    背景なし:背景透明、丸枠あり
  5. 【画像設定】
    画像を指定するとアイコンの代わりに丸抜きした画像を設定することもできます。

紹介に便利!スタッフブロックを活用しよう

Cinna

テンプレートにはめるだけで紹介カードが作れます。お店や商品の紹介にも使えそう♪

スタッフブロックを追加

  1. プラスボタンクリック
  2. ブロック検索「スタッフ」と入力
  3. 「スタッフ」ブロックをクリック

スタッフブロックをカスタマイズ

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

説明文に役立つ!フローブロック

Cinna

料理の作り方や道順の説明など「流れの説明」をするときに役立ちます!

フローブロックを追加

  1. プラスボタンをクリック
  2. ブロック検索で「フロー」と入力
  3. 「フロー」ブロックをクリック

フローブロックを設定・複製

  1. タイトルを入力
  2. 詳細説明を入力
  3. 【画像を選択】アップロードもしくはメディアライブラリから選択
  4. 【矢印の表示】矢印をつけるかつけないかを設定
  1. 縦3点アイコンをクリックしてブロック編集メニューを表示
  2. 「複製」をクリック

複製を繰り返して説明フローが終わったら、最後のブロックは「矢印を表示しない」を選択

よくある質問に使える!FAQブロック

CInna

よくある質問や問題集などを作るときに便利なブロックです!

新FAQブロックを追加

  • プラスボタンをクリック
  • ブロック検索で「faq」と入力
  • 「新FAQ」ブロックを選択

※旧FAQもありますが、新FAQのほうが質問と回答部分のどちらにも画像や他ブロックを追加できるのでこちらを使った方が便利です!

新FAQブロックのカスタマイズ

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

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

いかがでしたか?今回はVK Blocksで作れる5つのテンプレブロックについてご紹介しました!前回の記事と合わせて、アレンジに使ってみていただけると嬉しいです。WordPressブロックエディタの機能は他にもありますので、第3弾でまたご紹介していきます!

Cinna

最後まで読んでいただきありがとうございました!

【記事をデザイン】『段落・蛍光マーカー・見出し・リスト』使い方「文字の装飾」編WordPressブロックエディタで難しいコードは使わずに簡単に記事を見やすくするための方法STEP1です。今回は基本の文字の装飾「段落・蛍光マーカー・見出し・リスト」の使い方です。...

ABOUT ME
Cinna
Cinna
8年間働いた会社を辞めて2年間のwebデザイン長期職業訓練に通っていました。2019年入学▶︎2021年修了。デザインは独学・webは初心者からスタート。ライフスタイルが変わっても働き続けられる仕事がしたくてチャレンジすることに。まなび総合サイトmanabimon.comにてライタースタート、ライフスタイルやこれまでの体験談からの役立つ情報をよりリアルに発信するため"MeBe"を開設。