当ブログ愛用のWordPressテーマ
広告
＼乗り換え先おすすめテーマ！／
／ブロガーとして本格的に取り組む＼
SWELLの評判レビュー記事
SWELLの評判を徹底レビュー｜Cocoonから乗り換えた理由や使ってみた感想も紹介「SWELLを購入しようか迷っている…」 「SWELLのメリット・エメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事では、そんな方に向けて、SWELLの評...
【Cocoon】ボックス(囲み枠)のカスタマイズ！おしゃれなアイコン機能も設定できる
「囲み枠の背景や文字の色付けをするには？」
「ボックスの機能を設定する項目が表示されない」
「CSSなしでおしゃれにカスタマイズしたい」
この記事では、そんな方に向けて、Cocoonで使える囲み枠の機能と、おしゃれにカスタマイズできるボックス3選をお話しします。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでください！
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
あわせて読みたい
【Cocoon】使い方と初期設定を初心者向けに解説【WordPressテーマ】
WordPress利用者必見！ブログ初心者向けにCocoonの使い方と設定方法を運営歴・記事数別で紹介しています。この記事を読めば、記事の書き方やサイト設計・デザイン、収益化…
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
＼もっと早く乗り換えればよかった…／
使い心地バツグン、高機能でオシャレ！
目次
Cocoonボックス(囲み枠)の使い方
Cocoonでボックス(囲み枠)の
をそれぞれ詳しく解説します。
ボックス(囲み枠)の挿入方法
ボックス(囲み枠)の挿入方法は、下記の通りです。
STEP
記事投稿画面で、+をクリックする
STEP
白抜きボックスをクリックする
今回は「白抜きボックス」を選択しましたが、ボックスは全部で8種類あります。
STEP
これでボックスの出来上がり！
ボックス(囲み枠)の機能を設定する方法
ボックス(囲み枠)の機能を設定する方法は、下記の通りです。
STEP
挿入したボックスを選択する
今回は白抜きボックスの機能設定をしていきます。
STEP
Cocoonボックス(囲み枠)の種類とカスタマイズ機能
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
ボックス自体の機能を設定する項目が表示された！
当ブログ使用「SWELL」はボックス(囲み枠)がオシャレ！
当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。
SWELLでは、以下14パターンからボックスのスタイルを選べます。
デフォルト
小
枠上
枠上2
枠内
浮き出し
内テキスト
ボーダー
Cocoonと同じように、ボックスの
- 色を変更
- アイコンの設定
もできます。
色を変更
アイコンの設定
ボックス
ボックス
私はアイコンを付けられるのがお気に入りで、SWELLでは100種類以上のアイコンが無料で使えます。
かめコンパスほしかったアイコンも見つかり便利
ボックスをよりおしゃれにカスタマイズしたい人は、SWELLもおすすめですよ。
まとめ
今回は、Cocoonで使える囲み枠の機能と、おしゃれにカスタマイズできるボックス3選を紹介しました。
本記事のおさらい
以下の記事では、ボックス以外のカスタマイズ方法も紹介しています。
あわせて読みたい
【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】
WordPress利用者必見！CocoonでCSSを使わず、おしゃれにカスタマイズする方法を紹介しています。この記事に書いてある内容を行えば、ユーザビリティーの向上はもちろん、感…
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです！
この記事が気に入ったら
フォローしてね！
コメント