「囲み枠の背景や文字の色付けをするには？」
「ボックスの機能を設定する項目が表示されない」
「CSSなしでおしゃれにカスタマイズしたい」
この記事では、そんな方に向けて、Cocoonで使える囲み枠の機能と、おしゃれにカスタマイズできるボックス3選をお話しします。
かめコンパスこんにちは、かめコンパスです！
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでください！
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
＼もっと早く乗り換えればよかった…／
使い心地バツグン、高機能でオシャレ！
Cocoonボックス(囲み枠)の使い方
Cocoonでボックス(囲み枠)の
をそれぞれ詳しく解説します。
ボックス(囲み枠)の挿入方法
ボックス(囲み枠)の挿入方法は、下記の通りです。
記事投稿画面で、+をクリックする
白抜きボックスをクリックする
今回は「白抜きボックス」を選択しましたが、ボックスは全部で8種類あります。
これでボックスの出来上がり！
ボックス(囲み枠)の機能を設定する方法
ボックス(囲み枠)の機能を設定する方法は、下記の通りです。
挿入したボックスを選択する
今回は白抜きボックスの機能設定をしていきます。
Cocoonボックス(囲み枠)の種類とカスタマイズ機能
Cocoonで使用できるボックス(囲み枠)は8種類あります。
各ボックスのカスタマイズ機能を詳しく紹介します。
「白抜きボックス」
「白抜きボックス」で使えるカスタマイズ機能は3つです。
- ボーダー色
- 背景色
- 文字色
ボーダー色…ボックスの枠の色を変更
※準備中
背景色…ボックス内の色を変更
※準備中
文字色…ボックス内の文字の色を変更
※準備中
「タブ見出しボックス」
「タブ見出しボックス」で使えるカスタマイズ機能は4つです。
- アイコン
- 枠の色
- 背景色
- 文字色
アイコン…見出しの左側に入れるアイコンを変更
※準備中
アイコンは全部で53種類あります。
枠の色…ボックスの枠の色を変更
※準備中
背景色…ボックス内の色を変更
※準備中
文字色…ボックス内の文字の色を変更
※準備中
「タブボックス」
「タブボックス」で使えるカスタマイズ機能は4つです。
- ラベル
- 枠の色
- 背景色
- 文字色
ラベル…見出しの左側につけるラベルを変更
※準備中
ラベルは全部で16種類あります。
枠の色…ボックスの枠の色を変更
※準備中
背景色…ボックス内の色を変更
※準備中
文字色…ボックス内の文字の色を変更
※準備中
「ラベルボックス」
「ラベルボックス」で使えるカスタマイズ機能は4つです。
- アイコン
- 枠の色
- 背景色
- 文字色
アイコン…見出しの左側に入れるアイコンを変更
※準備中
アイコンは全部で53種類あります。
枠の色…ボックスの枠の色を変更
※準備中
背景色…ボックス内の色を変更
※準備中
文字色…ボックス内の文字の色を変更
※準備中
「アイコンボックス」
「アイコンボックス」で使えるカスタマイズ機能は1つです。
- タイプ
タイプ…アイコンとボックス内の色を変更
※準備中
タイプは全部で10種類あります。
「見出しボックス」
「見出しボックス」で使えるカスタマイズ機能は4つです。
- アイコン
- 枠の色
- 背景色
- 文字色
アイコン…見出しの左側に入れるアイコンを変更
※準備中
アイコンは全部で53種類あります。
枠の色…ボックスの枠の色を変更
※準備中
背景色…ボックス内の色を変更
※準備中
文字色…ボックス内の文字の色を変更
※準備中
「案内ボックス」
「案内ボックス」で使えるカスタマイズ機能は1つです。
- タイプ
タイプ…ボックス内の背景と文字の色を変更
※準備中
タイプは全部で8種類あります。
「付箋風ボックス」
「付箋風ボックス」で使えるカスタマイズ機能は1つです。
- タイプ
タイプ…ボックス内の背景の色を変更
※準備中
タイプは全部で5種類あります。
おしゃれなカスタマイズ機能付きボックス(囲み枠)3選
私がよく使っている、おしゃれなカスタマイズ機能付きボックス(囲み枠)を3つ紹介します。
- アイコンボックス
- ラベルボックス
- 白抜きボックス
見出しの文字の周りが白色で囲まれていて、他のボックスよりも文字が見やすいです。
背景色を変更しても見出し部分は白色のままなので、見栄えもバツグン。
アイコンも53種類の中から自由に付けられるので重宝しています。
8種類あるボックスの中で1番シンプルなボックスです。
使える機能は色の変更のみ。
単純な四角形のボックスなので、どのボックスを使えばいいか迷ったときは、とりあえず白抜きボックスを使えばいいでしょう。
ボックス(囲み枠)の機能が表示されない原因と対処法
ボックス内の文字や背景の色付けはできるけど、ボックス自体の機能を設定する項目が表示されない場合は、下の画像のようになっているかと思います。
ボックスの機能が表示されない原因は、ボックスではなく、ボックス内の項目を選択しているからです。
ボックス内の項目を選択している場合は、下の画像のようになり、
ボックス自体を選択している場合は、下の画像ようになります。
ボックス自体を選択すれば、ボックス自体の機能を設定する項目が表示されます。
ボックス自体を選択する方法は、下記の通りです。
ボックスが挿入されているブロックを選択する
記事投稿画面下にある○○ボックスをクリックする
ボックス自体の機能を設定する項目が表示された！
当ブログ使用「SWELL」はボックス(囲み枠)がオシャレ！
当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。
SWELLでは、以下14パターンからボックスのスタイルを選べます。
ボーダー
Cocoonと同じように、ボックスの
- 色を変更
- アイコンの設定
もできます。
色を変更
アイコンの設定
私はアイコンを付けられるのがお気に入りで、SWELLでは100種類以上のアイコンが無料で使えます。
かめコンパスほしかったアイコンも見つかり便利
ボックスをよりおしゃれにカスタマイズしたい人は、SWELLもおすすめですよ。
まとめ
今回は、Cocoonで使える囲み枠の機能と、おしゃれにカスタマイズできるボックス3選を紹介しました。
以下の記事では、ボックス以外のカスタマイズ方法も紹介しています。
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“コメント”してくれると嬉しいです！
コメント