【種類別】Cocoonの囲み枠(ボックス)のカスタマイズを紹介【初心者向け】

「コンテンツを囲み枠に入れたい…」

「複数あるボックスの設定方法は？」

「アイコンボックスや見出しボックスの使い方を教えて」

この記事では、そんな方に向けて、Cocoonで囲み枠(ボックス)の使い方とカスタマイズ方法を解説します。

この記事を読めば、あなたも簡単に

• 複数あるボックス系ブロックの使い方やカスタマイズ方法が分かる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインで情報を区切って整理し、見やすい記事を作成できるようになりました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！

Cocoonの囲み枠(ボックス)は全8種類ある

Cocoonの囲み枠(ボックス)は全部で8種類あります。

囲み枠(ボックス)によって色の設定やアイコンの挿入、デザイン装飾の変更などカスタマイズできる項目が異なります。

では実際に、8種類ある囲み枠(ボックス)ごとの使い方とカスタマイズ方法を紹介します。

【種類別】Cocoon囲み枠(ボックス)の使い方とカスタマイズ設定

まずはCocoonで囲み枠(ボックス)を挿入する方法を紹介します。

Cocoonで利用できるボックス系ブロックは以下の8種類あり、それぞれのカスタマイズ項目を詳しく紹介します。

①：アイコンボックス

アイコンボックスでカスタマイズできる項目は以下の1つあります。

アイコンボックスのタイプは全部で10種類あります。

②：タブボックス

タブボックスでカスタマイズできる項目は以下の4つあります。

タブボックスのラベルは全部で16種類あります。

以下のようにタブボックスを青色に設定してみました。

色の設定方法は、「色設定」欄の「ボーダー色」「背景色」「文字色」をクリックすると色を選択できます。

もし使いたい色がない場合は、下の画像にある白と灰色の網目状になっている長方形をクリックしましょう。

ここで色を設定する方法は以下の2つあります。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

カラーコードが分からない…カラーコードの調べ方が分からない…という方はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられます。

_{＼クリックで開く／}

③：見出しボックス

見出しボックスでカスタマイズできる項目は以下の4つあります。

見出しボックスで使用できるアイコンは全部で52種類あります。

以下のように見出しボックスを青色に設定してみました。

色の設定方法はこちら 

④：タブ見出しボックス

タブ見出しボックスでカスタマイズできる項目は以下の4つあります。

タブ見出しボックスで使用できるアイコンは全部で52種類あります。

以下のようにタブ見出しボックスを青色に設定してみました。

色の設定方法はこちら 

⑤：ラベルボックス

ラベルボックスでカスタマイズできる項目は以下の4つあります。

ラベルボックスで使用できるアイコンは全部で52種類あります。

以下のようにラベルボックスを青色に設定してみました。

色の設定方法はこちら 

⑥：案内ボックス

案内ボックスでカスタマイズできる項目は以下の1つあります。

案内ボックスのタイプは全部で8種類あります。

⑦：付箋風ボックス

付箋風ボックスでカスタマイズできる項目は以下の1つあります。

付箋風ボックスのタイプは全部で5種類あります。

⑧：白抜きボックス

白抜きボックスでカスタマイズできる項目は以下の3つあります。

以下のように白抜きボックスを青色に設定してみました。

色の設定方法はこちら 

【実体験】Cocoon囲み枠(ボックス)のおすすめな活用例2つ

ここからはCocoonの囲み枠(ボックス)のおすすめな活用方法を2つ紹介します。

それぞれ詳しく解説します。

ボックス内にリストを配置する

まず多くの人が使うであろう囲み枠(ボックス)内にリスト(箇条書き)を配置した例を紹介します。

Cocoonのリストと併用することで、要点をまとめて整理した情報をボックス形式で分かりやすく表示させることができます。

メリット・デメリットボックスを作成する

Cocoon汎用ブロックの囲み枠(ボックス)と2カラムブロックを組み合わせて使えば、以下のようなメリット・デメリットボックスも作成できます。

Cocoon汎用ブロックの囲み枠(ボックス)とは…見出しボックス、タブ見出しボックス、ラベルボックスのこと

商品やサービスを紹介するときによく使用するので、作り方を覚えておきましょう。

_{＼クリックで開く／}

Cocoonの段落ブロックとグループ化機能は囲み枠(ボックス)化できる！

Cocoonの段落ブロックとグループ化機能で使えるカスタマイズ装飾を使って、文章や複数コンテンツを囲み枠(ボックス)化することができます。

カスタマイズ装飾の数について、段落ブロックでは71種類、グループ化機能では30種類もありますよ。

それぞれで囲み枠(ボックス)化をする方法は下記のとおりです。

当ブログ愛用「SWELL」のボックスは独自ブロック+機能拡張でオシャレ！

WordPressテーマ「SWELL」にはキャプションボックスという専用ブロックがあり、以下の7種類からデザイン装飾を選べます。

Cocoonと同じくボックスの色を変えたり、アイコンの設定もできますよ。

SWELLでは1000種類以上のアイコンが無料で使えます。(以下、一部抜粋)

さらにSWELLでは段落ブロックとグループ化ブロックの機能が拡張され、以下の画像のようなボックス装飾が設定できます。

個人的におすすめなボックス装飾トップ3は以下で、どれもデザインが格段にオシャレです。

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用：Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

よりオシャレなボックスを使いたい方は、SWELLをチェックしてみてください。

Cocoon囲み枠(ボックス)の使い方とカスタマイズまとめ

今回は、Cocoonで囲み枠(ボックス)の使い方とカスタマイズ方法を紹介しました。

以下の記事では、ボックス以外のカスタマイズ方法も紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。