Cocoonのボックス機能は8種類!使い方を画像付きで解説!

スポンサーリンク
Cocoonのボックスを使いこなすCocoon

こんにちは。ふくちです!

こまるちゃん
こまるちゃん

WordPressのボックスを使いこなしたいけど…たくさんありすぎてわからない💦

というわけで、本日はCocoonの機能紹介第3弾。「ボックスの使い方」を解説します。

ボックスとは
この様に文章を四角く囲う機能です。目立たせたいところや、補足説明、リストを入れたい部分などに使うと読者も重要な部分を読み落としにくくなります。ボックスはCocoonの場合8種類あり、このボックスは「アイコンボックス」です。

ふくち
ふくち

ボックスを活用すれば大切なところが一目瞭然です。

情報を得るためにサイトを見ますが、一語一句逃さずにすべて読む人はまれです。

それでも、大切なポイントは読み落としてほしくない!

そのためにボックスを上手く使ってポイントがわかりやすい記事を作りましょう♪

スポンサーリンク

Cocoonのボックスは8種類

Cocoonには「○○ボックス」と名の付く機能は8種類あります。

Cocoonの画面でどのようなボックスがあるか見てみましょう。

Wordpressブロック挿入ツールでボックスを検索した画面

ブロック選択画面で「ボックス」と入力するとアイコン付きの一覧が表示されます。

記事中のブロックを追加(+)ボタンから検索すると最大6つまでしか表示されませんので、画面左上のブロック挿入ツールを切り替え(+)ボタンから検索しましょう。

Wordpress上部のメニュー
WordPress上部メニュー
こまるちゃん
こまるちゃん

タブボックスとタブ見出しボックスは何が違うの?

名前が似ているものもあり迷ってしまいますよね。

すべてのボックスを試行錯誤しながら30記事以上書いた結論ですが、使うボックスは3つに絞りましょう

ボックスを多く使いすぎるとデザインがバラバラになり、読みづらくなります。

ボックスは下記の3グループに分けられます。

1つのグループにつき1つ、気に入ったものを使えば十分です。(つまり3つ覚えればOK)

ボックスの特性ごとの3グループ
  1. タイトルが自由に付けられる
    ラベルボックス・見出しボックス・タブ見出しボックス
  2. アイコンや定型語句からタイトルや案内事項を選択
    アイコンボックス・タブボックス
  3. タイトルやアイコンなし。枠または背景色のみ
    白抜きボックス・案内ボックス・付箋風ボックス
ふくち
ふくち

グループごとに分けて説明します♪

Cocoonでタイトルが自由に付けられるボックス3つ

ボックスの上部に自由にアイコンやタイトルが付けられるものは3つあります。

  • ラベルボックス
  • 見出しボックス
  • タブ見出しボックス

です。

伝えたいポイントや、メリットやデメリットを箇条書きにしたい場合などに向いています。

例えばこんな感じ。

ボックスのメリット
  • 大切なポイントを目立たせることが出来る
  • 囲むことでまとまりが作れる
  • 画像や吹き出しと同じような装飾効果が得られる

3つの中から見た目で気に入ったものを使えばOKです!

ラベルボックス

ラベルボックス

これがラベルボックスです

ラベルボックスは囲み枠の上にタイトルが配置されます。

タイトルの文字は自由に編集ができ、タイトルの前のアイコンも52種類(アイコンなしも含む)から選択可能です。

枠の色、背景色、文字色もアレンジが可能です。

ラベルボックス

これがラベルボックスです。枠と背景色を同色にすればこのような見た目になります。

見出しボックス

見出しボックス

これが見出しボックスです。

見出しボックスは上部に大きくタイトルの枠があります。

ラベルボックス同様タイトルの文字は自由に編集ができ、タイトルの前のアイコンも52種類(アイコンなしも含む)から選択可能です。

枠の色、背景色、本文の文字色もアレンジが可能です。

ただしタイトル部分の文字は白固定なので、枠は濃い色で設定しましょう。

見出しボックス

これが見出しボックスです。枠の色が薄いとタイトルが見えづらいです。

タブ見出しボックス

タブ見出しボックス

これがタブ見出しボックスです。

タブ見出しボックスはその名の通り上部にタブ型のタイトルの枠があります。

前述の2つと同様、タイトルの文字は自由に編集ができ、タイトルの前のアイコンも52種類(アイコンなしも含む)から選択可能です。

枠の色、背景色、本文の文字色もアレンジが可能です。

見出しボックスと同じく、タイトル部分の文字は白なので枠は濃い色にしましょう。

タブ見出しボックス

これがタブ見出しボックスです。色づかいによって見やすさがかわります。

Cocoonでアイコンや定型句から選択するボックス2つ

つづいて、タイトルや案内事項を選択するタイプです。

  • アイコンボックス
  • タブボックス

の2つです。

補足的な情報や、ちょっとしたコメントを伝えるのに適しています。

イメージがわかないと思うので実際の画面の画像を用いて1つずつ説明しますね。

ふくち
ふくち

個人的にはアイコンボックスが使いやすいですが、

これも見比べて好きな方を使えばOKです!

アイコンボックス

これがアイコンボックスの「補足情報」です。

アイコンボックスは既に紹介済の3つとは異なり、必ずアイコンが入ります。

目的に合わせたアイコン付きのボックスが10種類ありますが、タイトルは付けられません。

図のように、10種類の中から目的に合ったタイプを選択して使用します。

タイプによってアイコンやボックスの色は決まっているので色のカスタマイズは出来ません。

アイコンボックスのタイプ選択画面

実際のボックスの見た目は下記のようになります。

わたしの個人的な好みもありますが、使用頻度を記号で分けましたのでご参考まで。
◎→よく使う 〇→まあまあ使う △→ほとんど使わない ×→使わない

タイプ別の用途

◎補足情報
純粋な補足情報

×補足情報

〇補足情報
マイナスな補足情報

◎メモ
覚えておきたい重要なポイントなど

〇コメント
個人的な意見など

×プロフィール
 別途作成した画像を使用してます

△OK

△NG

〇GOOD

×BAD

タブボックス

これがタブボックスです。

一見先ほど説明した「タブ見出しボックス」にそっくりですが異なる点があります。

それはタブ部分の文言(アイコンも含む)をラベルの選択肢の中から選ぶという点です。

ラベルは16種類あります。

ふくち
ふくち

タブ見出しボックスはタイトルは自由、アイコンは52種類から選べたよね!

タブボックスのラベル選択画面

種類が多いので各ラベルの紹介はしませんが、選択肢がカタカナのものも含め、ラベルはすべて英語表記となります。

ポイント → POINT

文字列が決まっていると自由度は低く感じますが、毎回ボックスのタイトルがバラバラよりは決まったタイトルの方が統一感もあり読みやすくなります。

なおこちらも枠線、背景、文字色はアレンジできます。

これがタブボックスです。おすすめ情報をお伝えするときなどに使います。

枠(背景)のみのボックス3つ

タイトルやアイコンなどを使用しない枠のみのボックスは以下の3つです。

  • 白抜きボックス
  • 案内ボックス
  • 付箋風ボックス

シンプルなのでどんなシーンでも使いやすいです。

特に白抜きボックスがシンプルでおすすめ!

白抜きボックス

これは白抜きボックスです。

枠線、背景色、文字色のアレンジが可能です。

ボックスの中では最もシンプルなタイプで使い勝手が◎

白抜きボックスという名前ですが、背景色を変えればこんなアレンジも!

これは白抜きボックスです。

案内ボックス

これは案内ボックス「プライマリー」です。

案内ボックスはシンプルな前面塗りつぶしタイプのボックスです。

伝えたい情報の優先度や内容によってタイプを選ぶと自動的にボックスの色も決まります。

ブログ自体のイメージと合う色があまりないという理由でわたしはあまり使用していませんが、色々試してみて下さいね。

案内ボックスのタイプ選択画面

これは案内ボックス「サクセス」です

付箋(ふせん)風ボックス

これは付箋風ボックス「灰色」です。

その名の通り紙に貼る付箋(ふせん)をイメージしたボックスです。灰色、黄色、赤色、青色、緑色が選択できます。

案内ボックス同様わたしはあまり利用していません…

付箋風ボックスのタイプ選択画面

これは付箋風ボックス「黄色」です。

Cocoonのボックス使用方法

How to
Toy forklift hold letter block w to complete word how to on wood background
ふくち
ふくち

最後にボックスの使い方を説明するよ

一番カスタマイズ性の高いタイトルが変えられるタイプのうち、「見出しボックス」で説明します。

これが出来れば他のボックスも問題なく使いこなせますのでご安心を。

見出しボックス利用の5ステップ
  1. ブロックメニューから「見出しボックスを選択」
  2. タイトル編集
  3. 本文編集
  4. アイコン選択(選択しないとアイコンなし)
  5. 色のカスタマイズ(デフォルトから変えなくてもOK)

実際に上記の見出しボックスを作る手順を紹介します。

ブロックメニューから見出しボックスを選択

ブロック追加(+)

検索窓で「見出し」と入力

見出しボックスが表示されるので選択する。

ブロックで見出しボックスを検索している画面

ボックスのタイトル編集

下記のブロックが出てきたら見出しを上書きで「見出しボックス利用の5ステップ」に変える

わかるちゃん
わかるちゃん

利用しているスキンによって表示が異なる場合があるよ

本文編集

タイトルの下をクリックして本文を入力します。

今回は箇条書きの番号付きリストなので(+)をクリックし、リストを選択します。

見出しボックスのタイトル入力が完了した状態

デフォルトでは番号なしのリストになっているので、番号付きに切り替えます。

本文で番号付きのリストを選んでいる状態

リスト項目を入力すれば完了◎

リストでも、ただのリストではなく「アイコンリスト」をつかうと文頭が・(黒点)や数字でなくチェックマークや指差しマークなどに変えられるのでアレンジしてみましょう。

アイコン選択

タイトルの前にアイコンを付けたい場合は対象のボックスのブロックを選択した状態で設定(⚙)を押すと詳細の設定が出来ます。

内容に合ったアイコンを選びましょう。

ここで選択をしない場合はアイコンは表示されずタイトルのみとなります。

見出しボックスのアイコン選択画面

色のカスタマイズ

先ほどのアイコン選択画面を下にスクロールすると色の選択画面があります。

カスタマイズできるのは「枠の色」「背景色」「文字色(本文のみ)」です。

※アイコンボックス・案内ボックス・付箋風ボックスは色のカスタマイズ不可

まとめ:Cocoonの〇〇ボックスの使用方法

本日はWordpressテーマCocoonのボックスの使い方をお話しました。

ふくち
ふくち

大切なポイントはこちら

  • Cocoonのボックスの種類は8種類
  • ボックスを使うと読みやすくなり記事の利便性が向上
  • ただし統一感をもって利用することが大切
  • メインで使用するのは8つ中3つのみでOK

最後までお読みいただきありがとうございました。

記事がよかったらクリックで応援お願いします
タイトルとURLをコピーしました