WordPress（ワードプレス）でブログを書き始めた皆さん、『ボックス』、使ってますか？
目立たせたい文章やキーワードを飾り枠で囲むボックス。
使うだけで記事の質がグッと上がる感じがしますよね！
でもついつい使いすぎて、なんかごちゃごちゃしちゃうんだよね…
ここだ！という場所にバッチリはめて効果的に利用したい。
そんなあなたのために、WordPress標準搭載のボックスの種類と向いている使い方をまとめました。
各ボックスの特徴と併せて解説しますので、ぜひご活用ください！
WordPressのボックス機能について
この文章ブロックを囲んでいる枠やその範囲のこと。
囲み枠、飾り枠、装飾枠とも。
私はWordPressのCocoonテーマを使用していますが、メニューを見るとさまざまなボックスが標準搭載されています。
各種ボックスは、図のようにメニューから選択すればすぐ使えます。
しかし、初心者にはまずボックスの使いどころがわからない…！
一言でボックスと言っても、向いている用途が違うのです。
- 内容によってボックスを使い分けたい…
- その時の気分でボックス選んでたら統一感無くなっちゃった…
- 色を統一したいのに、ボックスによっては色が自由に選べない…
適材適所で自分好みのボックスを効果的に使いたいですよね？
そこで私は有名ブロガーさん方の記事を徹底研究。
ボックスの効果的な使い方を調査してまとめてみました！
ボックス装飾の使い分け用途まとめ
記事を書く方によって使い方は千差万別、好みによっても違います。
しかしボックスそれぞれの特徴は活かして使いたいもの。
有名ブロガーさんの記事を見ると、共通している使い方がありました。
使用目的ごとにまとめましたので、参考にしてみてください。
タイトルをつけずに強調させたい時
- 白抜きボックス
- 案内ボックス
- 付箋風ボックス など
これが白抜きボックス。
これは案内ボックス。
そしてこれが付箋風ボックスです。
黒板に書くイメージで使えます。
キーワードの比較や箇条書きにしたポイントを伝える時に効果的。
＜使用例＞
白抜きボックスなら…
背景色→緑色、文字色→白にすると
本当に黒板風になっちゃいます！
白抜きボックスは自由度高いので、色々遊べそうですね！
タイトルをつけてまとめたり、強調したいとき
- ラベルボックス
- タブ見出しボックス
- 見出しボックス など
これがラベルボックス。
これがタブ見出しボックスです。
そしてこれが見出しボックス。
「○○とは？」
「○○のメリット（デメリット）」
「こんなときは？」
など、ボックス内に何が書いてあるか一目瞭然。
＜使用例＞
2児を育てるオタク主婦ブロガー。
ノートパソコンの電源を入れることすらおっくうなズボラ。
なんとかiPadだけで済ませたいと日々研究中。
自分にも他人にも甘いので、どんな時も必ず褒めてくれる。
日曜朝の戦隊番組が始まるとTwitterが荒れる。
このように内容によって見出し横のアイコンや枠内外の色を変えるともっと効果的！
補足説明したり、注意喚起するとき
- タブボックス
- アイコンボックス
これがタブボックス。
ちょっとしたポイントや、読み飛ばして欲しくない内容を入れます。
参考情報を入れても効果的ですね。
＜使用例＞
タブボックスの自由度は少し低め。
しかし使えば、記事内で多用しても統一感が出ます。
Cocoonテーマで使えるボックス一覧
だいたいの使い所はわかった。
でもボックスって他にもいっぱいあったような…？
そう、ワードプレスの標準ボックスは他にもたくさん種類があるのです！
ここからはCocoonテーマで使えるボックスの種類とその特徴を解説します。
白抜きボックス
白抜きボックス
コンテンツを囲むだけのブランクボックス。
本当にただの枠。超シンプルです。
✔︎ 変更可能項目 ボーダー色、背景色、文字色
アイコンボックス
ボックスのタイプは選択できますが、色との組み合わせは決まっています。
ここで使っているタイプは『補足情報（i）』。
✔︎ 変更可能項目 タイプ（10種類から選択）
案内ボックス
案内ボックス。
ボックスの背景色により、直感的にメッセージ内容を伝えるためのボックス。
これもかなりシンプル。
アイコンボックスと同じくタイプ選択型。自由度は低めです。
ここで使っているタイプは『プライマリー（濃い水色）』。
タイプを選ぶと背景色（ボックス色）だけでなく文字色もセットで変わります。
✔︎ 変更可能項目 タイプ（8種類から選択）
『プライマリー（濃い水色）』タイプでは、文字色はネイビー（紺色）になりました。
タブボックス
タブボックス
タブにメッセージ内容を伝えるための文字が書かれているボックス。
好きなのでよく使ってました。
ラベル部分のアイコンと文字（見本では“✔︎CHECK“と書いてある部分）は選択可能ですが、自分の好きな言葉を入れることはできません。
ここで使っているラベルは『チェック』。
✔︎ 変更可能項目 ラベル（16種類から選択）、枠の色、背景色、文字色
ラベルボックス
ラベルボックス
ボックスにタブ見出しを入力できる汎用ボックス。
枠の上にテキストが重なってて、なんだかオシャレな感じ…！
変更できる箇所が多く、自由度が高いのが特徴です。
✔︎ 変更可能項目 アイコン（52種類から選択）、枠の色、背景色、文字色
見出しタブボックス
タブ見出しボックス
ボックスにタブ見出しを入力できる汎用ボックス。
タブボックスのビジュアルで、ラベルボックスの自由度。
もちろん見出し変更可能・アイコンも52種類から選べます！
✔︎ 変更可能項目 アイコン（52種類から選択）、枠の色、背景色、文字色
付箋風ボックス
付箋風ボックス
目立つ濃いめの色で付箋風にメッセージを伝えるためのボックス。
タイプのみ選択可能。
✔︎ 変更可能項目 タイプ（5種類から選択）
見出しボックス
見出しボックス
ボックスに「見出し」を入力できる汎用ボックス。
アイコンや見出し、枠内外の色も変えられます。
✔︎ 変更可能項目 アイコン（52種類から選択）、枠の色、背景色、文字色
番外編：まだまだあるよ！使えるボックス装飾いろいろ
「ボックス」と名のつくメニューは上記で説明した通り。
しかし色々探っていると、使えそうな機能がまだたくさんあります！
その中でも他ブログでよく使われいるものを抜粋しました。
吹き出し
驚いたり、怒ったり、悲しかったり…
そんな感情をプラスして伝えたいときには効果的。
え！吹き出しもボックス装飾になるの？
入力した文章がボックス（吹き出し）で囲まれてるでしょ？
これも立派なボックス装飾だよ！
※当ブログにはきりんしかいないので、一人二役でお送りしています
このように対話風にしても良いですよね。
共感してほしいときにも有効。
記事を書いている人が喋っているという印象が強くなります。
他は読み飛ばされても吹き出しだけは読んでもらえる可能性が高いです。
文字が続くと読者が読み疲れてしまい、途中で離脱する可能性が…。
そんなときに視覚的区切りとして『吹き出し』を使うのが効果的。
吹き出しって、読者の
「ちょっとひといき」ゾーンでもあるんですね！
✔︎ 変更可能項目 人物アイコン（登録しただけ）、吹き出しスタイル（4種類）、人物位置（左右）、アイコンスタイル（4種類）、背景色、文字色ボーダー色
詩
テキストブロックメニューの中でも上の方にある『詩』
「これはなんだ…？」と思った人も多いはず。
詩ボックス。（ボックスなのかな？） 改行が自由にできる。 行間を開けたいときは便利。 こんなふうに 好きなだけ変えられる かゆい うま （突然のバイオハザード）
改行による行間の演出はもちろん、枠内に余白があるので他の文章と全く違う印象づけができます。
※テキスト色やサイズも変更可能。このように注釈をつける時に使いやすいかも。
背景色にグラデーションが使えるのが面白い！
グラデーション配色も自由に変えることができます。
※このグラデーション色エモみが強くないですか？
『詩』というだけあって、行間や雰囲気を表現するのに適したボックスです。
『段落』ブロックから簡単に変換できるのは嬉しい！
✔︎ 変更可能項目 フォントサイズ（6段階から選択）、テキスト色、背景色（グラデーション可能）
アコーディオン
じゃーん！
これがアコーディオンボックス。
このようにワンクリックすることで内容が出てきます。
よく使う場面は、情報の詳細が長すぎる時。
HTMLタグなどのコードを紹介するサイトでは、全てのコードを表に出すと記事全体がとんでもない長さになってしまいます。
なるほど…
情報が必要な人だけが見れるようにしてるのね！
問題の解答を入れても面白そうですね！
✔︎ 変更可能項目 ボーダー色、背景色、文字色
アイコンリスト
リストの点（・）の部分がアイコンになっているリスト専用の囲み枠。
存在を知らなかったのですが、これはすごく可愛い！
タイトルをつけられるところがメニューっぽくて良いですね。
段落ごとの目次を作りたい時にも便利。
自由度がすごく高いです！
✔︎ 変更可能項目 アイコン（40種類から選択）、アイコンの色、枠の色、背景色、文字色
ボックス（囲み枠）を効果的に使うための鉄則
ボックスの種類と使い所がなんとなくわかりましたか？
最後にボックスをうまく使うための鉄則をいくつかご紹介。
使いすぎない
この記事、正直読みにくかったですよね？
理由は簡単、ボックスが多すぎるからです！！
太字やマーカー着色にも同じことが言えますが、多用は厳禁。
特に強調したいキーワードや文章だけを囲むことで効果を発揮します。
むやみやたらと囲まないように注意しましょう。
使うボックスを限定する
よし、じゃぁ適しているボックスを使うぞー！
こっちではタブ見出しボックス、あっちではラベルボックス…
これでは統一性がなくなり、逆効果の可能性も。
タイトルをつけるなら、囲むだけなら、とあらかじめ決めておきましょう。
記事を装飾する段階で迷わず、時間の短縮にもつながります。
ブログの雰囲気に合ったボックスを使う
ブログの色合いや文章の印象によっては、バランスが悪くなることも。
- 自由度の低いボックスでは馴染む色が選択できない
- 枠線が太すぎて違和感がある
このような状況を避けるためにも、まずはじっくり好みのボックスを探してみましょう。
枠線や文字の色を変えるだけでも雰囲気が変わって面白いですよ！
カスタマイズする
全部試してみたけど、正直どれもあまりしっくりこない…
そんな方は、直接タグ打ちして枠線を作ってしまいましょう！
CSSとHTMLを書き換えれば、自由自在にカスタマイズできます。
魅力的な囲み枠タグを配布しているありがたいサイト様もたくさんありますので、ぜひ好みの囲み枠にカスタマイズしてみてください！
ボックスを効果的に使って、より魅力的な記事に仕上げましょう！
ボックスを「スラッシュ呼び出し」で効率アップ
ところで、皆さんはどのような手順でボックスを挿入していますか？
ワードプレス編集画面の左上［＋］ボタンからブロックを追加するのもいいですが、「スラッシュ（/）」で呼び出しの方が速い！
手順1：未入力のブロックに半角スラッシュを入力
※全角ではなく半角のスラッシュです！
手順2：ブロックの候補が表示される
※私がよく使う「ラベルボックス」「タブボックス」がすでに候補に出ています
手順3：使いたいボックスの最初の文字を入力する
※例えば「白抜きボックス」だったら「白」で出てきます
上の図のブロック候補を見て分かる通り、この方法でさまざまなブロックを挿入することができます。
効率、爆上がり…！
お読みいただきありがとうございました！
皆さんの記事がもっと素敵になりますように。
