【WordPress】吹き出しや囲み枠を使えるプラグインを使ってみた

• 2022-10-26
• 2024-03-03

こんにちは、当サイトのデザインとイラストを担当しているみさです。
今回は、WordPressのブログに吹き出しを取り入れられるプラグイン「VK Blocks」を導入しました！

この記事は、
・ブログで特に活躍しそうな、VK Blocksの3つの機能と使い方
・VK Blocksのインストール方法
について解説しています。

シンプルな吹き出しと囲み枠を使いたい人に丁度いい

VK Blocksは、Gutenberg（ブロックエディター）で使える吹き出しや囲み枠を使えるようにしてくれる無料のプラグインです。

吹き出しに特化した他のプラグインもありますが、私は囲み枠も使いたかったのでこのプラグインに決めました！
今回の記事も実際にVK Blocksを使用しています！

すぐにダウンロードしたい方はこちらから、ダウンロードページへ行けます🐇💨
インストール方法も知りたい方は本記事の後半で解説しているので、そちらをご覧ください。

ブログで特に使いそうなVK Blocksの便利な機能と使い方

VK Blocksには、さまざまな便利機能が盛り込まれています。
そのなかでも、ブログで使う頻度が高くなりそうな「吹き出し」「枠線ボックス」「アラート」の使い方を紹介します。

吹き出し

まずは、シンプルな吹き出し！

これがとっても見やすくて、デフォルトの角丸具合も素敵。
吹き出しの背景色や、周りの線の色を変えることもできます。

ブログのイメージに合う色がデフォルトのカラーパレットに入ってない場合は、カラーコードを入れられます。
ご自身のブログに合わせて、お好みの色に変更してみてください🎨

【カラーコードの入力画面への行き方】

吹き出しの位置は左右選べるので、会話っぽく話しを進行したいときにも使えそうです！
吹き出しのブロックを選択した状態で、右側の画面に選択項目が出てきます。

枠線ボックス

使いやすそうな枠線がたくさん…！
全部で6種類もありました。

個人的には、「直線 角丸 タブ」が優しい雰囲気でお気に入りです。
関連した記事を紹介したいときなど、活躍する場面が多そうです。

枠線ボックスも、ブロックを選択した状態で画面右側から種類の選択、色の変更、アイコンを入れ込むことができます！

アラート

こちらは、注意書きなどで使える囲み枠です。

色はパステルカラーの4色で、お知らせや注意書きなど目的別に選べるようになっています。
文字の色も背景色に合わせて変化します。

ステータスはブロックを選択した状態で右側の画面から選べます。

吹き出しや囲み枠を使うときに気をつけるポイント

主に文字で情報を伝えるブログですが、吹き出しが入ると一気に読みやすくなります。
これは使わいない手はないのでは…！と言いたいところですが、インパクトがあるからこそ気をつけたいポイントもいくつかあるなと思いました。

使いすぎ注意！

吹き出しや囲み枠は、要点をまとめる時にピンポイントで使うと効果的に読者に伝えたいメッセージを届けられます。

吹き出しの使い所は…？

・導入文
・読者が疑問に思ってそうなこと
・解決策の提案
・まとめ

このあたりに使うと最後まで読者が最後まで飽きずに読みやすくなりそうです。

逆に、使いすぎると目に飛び込んでくる情報が多くなってしまう分、読者にどれが重要なメッセージなのか伝わりにくくなってしまうので気をつけましょう。

配色のルールをつくる

吹き出しに赤！囲み枠は青！マーカーは黄色！と思いつくままに配色をすると、読者が記事を読む時に目が散って肝心な情報が伝わりづらくなってしまいます。

配色ってどうしたら…？と思った方は、自身のブログサイトで使っている色に合わせるとまとまった印象になりやすいです。
ちなみに当ブログは、見出しの色、吹き出しの色をサイトの背景色と合わせています。

意図的に目立たせたい箇所には、あえて目立つカラーを選ぶと、目に留まりやすくなります。
いつも使う色を目的ごとに決めておくと良さそうです。

VK Blocksをインストールする方法

WordPressのプラグインを入れる方法を知っている方には不要かもしれませんが、念のため手順を載せておきます…！

インストールの手順①：ダッシュボード

ダッシュボード、いわゆる管理画面です。
その左側にずらっと項目が並んでいるところにある「プラグイン」を選択 → 「新規追加」を選択します。

インストールの手順②：プラグインの検索とインストール

画像の①に、「VK Blocks」と入力します。
プラグインが出てきたら、「今すぐインストール」を選択。
これでインストールされます！

インストールできたら有効化して完了！

インストールできたら、「有効化」を押しておきましょう！
これで使えるようになると思います🎉✨

私は有効化を押し忘れてしまうという凡ミスで、「あれ…使えない？」としばらくアタフタしてました…(笑)

長くなってしまいましたが本記事はこれでおしまい！
ここまでお読みいただき、ありがとうございました🙌

• #WordPress
• #プラグイン
• #吹き出し