【Cocoon】ボックス(囲み枠)のカスタマイズ!おしゃれなアイコン機能も設定できる

囲み枠の背景や文字の色付けをするには?

「ボックスの機能を設定する項目が表示されない」

「CSSなしでおしゃれにカスタマイズしたい」

この記事では、そんな方に向けて、Cocoonで使える囲み枠の機能と、おしゃれにカスタマイズできるボックス3選をお話しします。

かめコンパス

こんにちは、かめコンパスです!

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでください!

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

さっそく本題に入りましょう。

目次

Cocoonボックス(囲み枠)の使い方

Cocoonでボックス(囲み枠)の

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

ボックス(囲み枠)の挿入方法

ボックス(囲み枠)の挿入方法は、下記の通りです。

STEP

記事投稿画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

白抜きボックスをクリックする

「白抜きボックス」がある場所

今回は「白抜きボックス」を選択しましたが、ボックスは全部で8種類あります。

STEP

これでボックスの出来上がり!

ボックス(囲み枠)の機能を設定する方法

ボックス(囲み枠)の機能を設定する方法は、下記の通りです。

STEP

挿入したボックスを選択する

ボックスを選択している様子

今回は白抜きボックスの機能設定をしていきます。

STEP

設定ブロックの順にクリックし、表示された項目で機能設定!

「設定」、「ブロック」がある場所とボックスの機能を設定している様子

ボックスの機能が表示されない場合は、後ほど解説します。

Cocoonボックス(囲み枠)の種類とカスタマイズ機能

ボックスの種類8つ

Cocoonで使用できるボックス(囲み枠)は8種類あります。

各ボックスのカスタマイズ機能を詳しく紹介します。

「白抜きボックス」

白抜きボックス

「白抜きボックス」で使えるカスタマイズ機能は3つです。

  • ボーダー色
  • 背景色
  • 文字色

ボーダー色…ボックスの枠の色を変更

※準備中

背景色…ボックス内の色を変更

※準備中

文字色…ボックス内の文字の色を変更

※準備中

「タブ見出しボックス」

タブ見出しボックス

「タブ見出しボックス」で使えるカスタマイズ機能は4つです。

  • アイコン
  • 枠の色
  • 背景色
  • 文字色

アイコン…見出しの左側に入れるアイコンを変更

※準備中

アイコンは全部で53種類あります。

タブ見出しボックスのアイコン一覧

枠の色…ボックスの枠の色を変更

※準備中

背景色…ボックス内の色を変更

※準備中

文字色…ボックス内の文字の色を変更

※準備中

「タブボックス」

タブボックス

「タブボックス」で使えるカスタマイズ機能は4つです。

  • ラベル
  • 枠の色
  • 背景色
  • 文字色

ラベル…見出しの左側につけるラベルを変更

※準備中

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

タブボックスのラベル一覧

枠の色…ボックスの枠の色を変更

※準備中

背景色…ボックス内の色を変更

※準備中

文字色…ボックス内の文字の色を変更

※準備中

「ラベルボックス」

ラベルボックス

「ラベルボックス」で使えるカスタマイズ機能は4つです。

  • アイコン
  • 枠の色
  • 背景色
  • 文字色

アイコン…見出しの左側に入れるアイコンを変更

※準備中

アイコンは全部で53種類あります。

ラベルボックスのアイコン一覧

枠の色…ボックスの枠の色を変更

※準備中

背景色…ボックス内の色を変更

※準備中

文字色…ボックス内の文字の色を変更

※準備中

「アイコンボックス」

アイコンボックス

「アイコンボックス」で使えるカスタマイズ機能は1つです。

  • タイプ

タイプ…アイコンとボックス内の色を変更

※準備中

タイプは全部で10種類あります。

アイコンボックスのタイプ一覧

「見出しボックス」

見出しボックス

「見出しボックス」で使えるカスタマイズ機能は4つです。

  • アイコン
  • 枠の色
  • 背景色
  • 文字色

アイコン…見出しの左側に入れるアイコンを変更

※準備中

アイコンは全部で53種類あります。

見出しボックスのアイコン一覧

枠の色…ボックスの枠の色を変更

※準備中

背景色…ボックス内の色を変更

※準備中

文字色…ボックス内の文字の色を変更

※準備中

「案内ボックス」

案内ボックス

「案内ボックス」で使えるカスタマイズ機能は1つです。

  • タイプ

タイプ…ボックス内の背景と文字の色を変更

※準備中

タイプは全部で8種類あります。

案内ボックスのタイプ一覧

「付箋風ボックス」

付箋風ボックス

「付箋風ボックス」で使えるカスタマイズ機能は1つです。

  • タイプ

タイプ…ボックス内の背景の色を変更

※準備中

タイプは全部で5種類あります。

付箋風ボックスのタイプ一覧

おしゃれなカスタマイズ機能付きボックス(囲み枠)3選

私がよく使っている、おしゃれなカスタマイズ機能付きボックス(囲み枠)を3つ紹介します。

  • アイコンボックス
  • ラベルボックス
  • 白抜きボックス

アイコンボックス

視覚効果がとても強いボックスです。

色を付けられるのはもちろん、何より表示されるアイコンが大きいので、読者の目にとまります。

記事の中で特に伝えたい部分があるときにアイコンボックスを使うと良いでしょう。

ラベルボックス

見出しの文字の周りが白色で囲まれていて、他のボックスよりも文字が見やすいです。

背景色を変更しても見出し部分は白色のままなので、見栄えもバツグン。

アイコンも53種類の中から自由に付けられるので重宝しています。

白抜きボックス

8種類あるボックスの中で1番シンプルなボックスです。

使える機能は色の変更のみ。

単純な四角形のボックスなので、どのボックスを使えばいいか迷ったときは、とりあえず白抜きボックスを使えばいいでしょう。

ボックス(囲み枠)の機能が表示されない原因と対処法

ボックス内の文字や背景の色付けはできるけど、ボックス自体の機能を設定する項目が表示されない場合は、下の画像のようになっているかと思います。

ボックス自体の機能を設定する項目が表示されていない様子

ボックスの機能が表示されない原因は、ボックスではなく、ボックス内の項目を選択しているからです。

ボックス内の項目を選択している場合は、下の画像のようになり、

ボックス内の項目を選択し、ボックス内の項目の機能設定が表示されている様子

ボックス自体を選択している場合は、下の画像ようになります。

ボックス自体を選択し、ボックス自体の機能設定が表示されている様子

ボックス自体を選択すれば、ボックス自体の機能を設定する項目が表示されます。

ボックス自体を選択する方法は、下記の通りです。

STEP

ボックスが挿入されているブロックを選択する

ボックスが挿入されているブロックを選択している様子
STEP

記事投稿画面下にある○○ボックスをクリックする

○○には、使っているボックス名が表示されます。

記事投稿画面下にある「○○ボックス」がある場所
STEP

ボックス自体の機能を設定する項目が表示された!

ボックス自体の機能を設定する項目が表示された様子

まとめ

今回は、Cocoonで使える囲み枠の機能と、おしゃれにカスタマイズできるボックス3選を紹介しました。

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonでボックスの種類とおしゃれな機能設定の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次