WordPress の記事中で「囲い枠」を使いたい

よくブログの記事で見かける“ポイント”とか“チェック”とか“注意”とか、枠で囲われていてカラーがついていて見やすいあの要素を私も使いたくて調べてみました。名前がわからないものを一人で調べるのってすごい難しいですよね。

よく見るコレ、なんていう名前の要素なの？

私はそもそも“コレ”が何という名前の要素なのか知りませんでした。いろいろ調べていると「囲い枠」、「キャプションボックス」、「キャプション付きブロック」などと呼ばれているみたいです。

ずばり「ボックス」というものらしいですが、なんだかただのボックスだと日本語だと箱なので、いまいちピンときませんよね。日本語では「囲い枠」のほうががは浸透していそうなので、しばらくは「囲い枠」と呼ぼうと思います。

WordPress の「Cocoon」や「SWELL」のような標準の機能としてブロックエディタで使用可能なテーマもあるみたいです。それぞれ呼び方はバラバラみたいです……。

「囲い枠」は標準のブロックエディタの機能にはない

囲い枠は、標準のブロックエディタの機能としてはありません。囲い枠が使えるテーマを使用するか、プラグインを導入するか、“自分で作る”しかありません。

本ブログはオリジナルテーマを育てながら運営しているのでいつか自作で囲い枠を作りたいと思っていますが、今回はとても素晴らしいプラグインに出会えたので、そのプラグインを使って「囲い枠」を作る方法を紹介します。

「囲い枠」を作れるプラグイン

「VK Blocks」というプラグインを使うとブロックエディタで直感的に囲い枠を作ることができます。

「囲い枠」以外にも記事中のワードを強調する「マーカー」やいろいろなブログでよく使用されている人気の「吹き出し」などなど他にもいろいろな機能が使えて、記事をもっと魅力的にデザインすることができるので、ぜひ積極的に導入したいプラグインですね！

「VK Blocks」でこんなデザインの「囲い枠」を作ることができる！

「VK Blocks」を使用して囲い枠を作る場合、６つのベースデザインから作ることができます。

「VK Blocks」を使って「囲い枠」を作る方法

「VK Blocks」を使用して「囲い枠」を作る方法をまとめてみました。

まずはプラグインをインストールする

①「プラグイン」→「新規追加」
②キーワードで「VK Blocks」と入力して、検索
③「VK Blocks」を見つけたら「今すぐインストール」→「有効化」

ブロック挿入ツールから「枠線ボックス」を選択

①右上のブロック挿入ツールのところをクリック
②下の方まで移動して「VKBLOCKS」があるので、その中から「枠線ボックス」をクリック
③囲い枠（枠線ボックス）が出てきます
④右側の「ブロック」の設定からお好みのデザインにする！

以上の手順で囲い枠（枠線ボックス）を作ることができます。

任意のアイコンを表示させる方法

囲い枠（枠線ボックス）にはブロックエディタの右側の「ブロック」の設定から「FONT AWSOME」のアイコンを表示させることができます。

デフォルトで設定されているアイコン以外にも「FONT AWSOME」のサイトからコードをコピーするだけで豊富な種類のアイコンの中から任意のアイコンを表示することも可能なのでその方法もまとめてみました。

①右側の「ブロック」の設定から、「アイコンを選択」をクリックする
→アイコン選択のウィンドウが表示されます。

②「 Font Awesome アイコンリスト」をクリックする
→新規ウィンドウで「 Font Awesome 」のアイコン一覧ページが開かれます。

③任意のアイコンをクリックする
→クリックしたアイコンの情報がポップアップで表示されます。

④HTML のコードをクリックしてコピーする

⑤元のブロックエディタに戻り、「アイコン」のフォームにペーストする
→任意のアイコンが表示されます。

以上の手順で、デフォルトでは設定されていない任意のアイコンを表示させることができます。

まとめ

「VK Blocks」というプラグインを使うことで、記事中の「囲い枠」を簡単につくることができて、デザインをもっと魅力的に、そしてわかりやすくすることができました！「囲い枠」以外に「マーカー」や「吹き出し」といったよく使うスタイルなどいろいろなスタイルがあるのでぜひ積極的にインストールしたいプラグインです！