Cocoonアイコンボックスを簡単カスタマイズ！サイドバーで複数デザインを切り替える方法

「こんなことできたらいいな～」を考えました！

この記事では、Cocoonテーマのブロック「アイコンボックス」に、簡単に切り替えられる7種類のデザインスタイルを追加するカスタマイズをご紹介します。

このカスタマイズをすることで、視覚的なアクセントが加わりブログ全体のデザイン性がさらにアップします！ぜひ手軽にできるこの方法を試してみてください。

当カスタマイズの実装手順は有料公開です具体的な実装手順を見る

7種類にスタイルを増やしました！

パソコン表示

モバイル表示

このカスタマイズをおこなうことで視覚的にアクセントをプラスできます。

ここがポイント

サイドバーから簡単操作
クリック操作だけで7種類のデザインが選べます。
同一ページ内で複数のデザイン使用
異なるデザインを同じページ内で自由に組み合わせできます。
簡単な実装手順
コードを2か所に貼り付けるだけで完了、作業時間はわずか5分です。
- 不要になった場合、追加したコードを削除するだけで元に戻せます。

有料テーマのような操作性が手軽に実現できます！

他のブロックデザイン切り替え方法も紹介しています。よく使うブロックがありましたらお試しください！

Contents

実装イメージ｜Cocoonアイコンボックス
Cocoonアイコンボックスのスタイルは7種類
Cocoonアイコンボックスの使い方
Cocoonアイコンボックス｜カスタマイズの注意点と特徴
実装方法／Cocoon「アイコン」のデザインをサイドバーで切り替えするカスタマイズ
まとめ

実装イメージ｜Cocoonアイコンボックス

Cocoonテーマには「アイコンボックス」という便利なブロックがあります。このボックスに複数のスタイルを追加することで、投稿ページや固定ページのデザインをより柔軟に変えることができます。

以下動画は操作イメージです。

すべて同じ「アイコンボックス」を表示し、それぞれスタイル切り替えています。

＼サイドバーでクリックするだけ／

目次に戻る

Cocoonアイコンボックスのスタイルは7種類

デフォルトでは「アイコンボックス」は決まったデザインのみが提供されていますが、今回のカスタマイズにより、自由にスタイルを選んで適用できるようになります。

アイコンタイプの種類

Cocoonで設定されているアイコンタイプは全10種類です。

情報(i)
質問(?)
アラート(!)
メモ
コメント
OK
NG
GOOD
BAD
プロフィール

アイコンを選択すると、設定されたアイコン色、ボックス背景色で表示されます。各アイコンごとに固定されているのでエディタ上で設定では変更できませんが、CSSでは自由に変更できます。

アイコンタイプ

色は固定です

カスタマイズで追加するスタイル

以下、追加するスタイルの一覧です。アイコン色、ボックス背景色はCocoonのデフォルトに準じます。

デフォルト

Cocoonデフォルト：通常のデザイン

デフォルトでも十分ですが、少しアイコンを小さく、余白を調整してスタイリッシュにしてみます！

スタイル 1：シンプル＆ベーシック

デフォルトに近いスタイル
四角いボックスでスッキリした印象
アイコンサイズを小さくし、モバイルでもボックスの左側に表示

四角い枠と適度なアイコンサイズで情報をすっきり整理。無駄を省き、目立たせたいアイコンとテキストをバランス良く配置できます。

CSSを見る

.wp-block-cocoon-blocks-icon-box{
	border-radius: 0; /* 角を四角く */
	padding: 1em 1.5em 1em 4em; /* 内側余白（上・右・下・左） */
}

.wp-block-cocoon-blocks-icon-box::before {
	font-size: 1em; /* アイコンのフォントサイズ */
}

/*モバイル調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;/*縦の中央揃え*/
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
	
	.wp-block-cocoon-blocks-icon-box::before{
		border-right: 1px solid;/*アイコン横の線を追加*/
	}
}

スタイル 2：外枠なし

外枠がなく、柔らかいイメージ
アイコンサイズを小さくし、モバイルでもボックスの左側に表示

枠線をなくすことでふわっとした印象を演出。ちょっとした補足に最適。

CSSを見る

/*スタイル 2*/
.wp-block-cocoon-blocks-icon-box{
	padding: 1em 1.5em 1em 4em; /* 内側余白（上・右・下・左） */
	border-radius:0;/* 角を四角く */
	border-width: 0;/* 外枠なし */
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
}

/*モバイル調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;/*縦の中央揃え*/
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
	
	.wp-block-cocoon-blocks-icon-box::before{
		border-right: 1px solid;/*アイコン横の線を追加*/
	}
}

スタイル 3：背景色なし

背景色なし
外枠はあるが、背景色が透明でミニマルな印象
アイコンサイズを小さくし、モバイルでもボックスの左側に表示

シンプルながらもスタイリッシュな印象を与えます。情報をさりげなく伝えたいときにおすすめ。

CSSを見る

/*スタイル 3*/
.wp-block-cocoon-blocks-icon-box{
	border-radius:0;/* 角を四角く */
	border-width: 2px;/* 外枠の太さ*/
	padding: 1em 1.5em 1em 4em; /* 内側余白（上・右・下・左） */
	background-color:initial;/*背景色なし*/
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
}

/*モバイル調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;/*縦の中央揃え*/
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
	
	.wp-block-cocoon-blocks-icon-box::before{
		border-right: 1px solid;/*アイコン横の線を追加*/
	}
}

スタイル 4：付箋風（上枠のみ）

上枠のみが強調された付箋風のデザイン

シンプルな付箋風ながらもアイコンをしっかり目立たせます。スタイル5とお好みで使い分けられます。

CSSを見る

/*スタイル 4*/
.wp-block-cocoon-blocks-icon-box{
	padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
	border-radius:0;/* 角を四角く */
	border-width: 5px;/* 線の太さ */
	border-right:none;
	border-left:none;
	border-bottom:none;
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
	border-right: 0;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
}

スタイル 5：付箋風（左枠のみ）

左枠のみが強調された付箋風のデザイン

よく見かけるシンプルな付箋風ながらも内容をしっかり目立たせます。

CSSを見る

/*スタイル 5*/
.wp-block-cocoon-blocks-icon-box{
	padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
	border-radius:0;/* 角を四角く */
	border-width: 5px;/* 線の太さ */
	border-top:none;
	border-right:none;
	border-bottom:none;
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
	border-right: 0;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
}

スタイル 6：アイコン強調

外枠・背景色あり
アイコンがボックスの外側にはみ出して表示され、際立つデザイン

丸く際立つアイコンがアクセントとなり、文章の中で目を引きます。特に強調したいコメントや注意書きにおすすめ。

CSSを見る

/* スタイル 6: アイコンボックス全体のスタイル */
.wp-block-cocoon-blocks-icon-box {
	border-width: 2px; /* 外枠の太さを2pxに設定 */
	border-radius: 0; /* 外枠の角を四角く設定 */
	padding: 1em 1.5em; /* 内側余白を上下1em、左右1.5emに設定 */
	margin-left: 10px; /* ボックスの左側に10pxの余白を設定 */
}

/* アイコンのスタイル */
.wp-block-cocoon-blocks-icon-box::before {
	top: -15px; /* ボックスの上から15px上に配置 */
	left: -10px; /* ボックスの左から10px左に配置 */
	width: 2em; /* アイコンの幅を2emに設定 */
	padding: 0.5em; /* アイコン内部の余白を0.5emに設定 */
	margin: 0; /* 外側の余白をなしに設定 */
	font-size: 1em; /* アイコンのフォントサイズを1emに設定 */
	color: #fff; /* アイコンの文字色を白に設定 */
	border-right: 0; /* 右側の枠線をなしに設定 */
	border-radius: 1em; /* アイコン背景を円形に設定 */
	box-sizing: border-box; /* ボックスサイズをボーダーを含む形に設定 */
}

/* アイコンの背景色変更: 状況に応じてアイコンの背景色を設定 */

/* 情報 (i): 水色の背景色 */
.information-box::before {
	background-color: #87cefa;
}

/* 質問 (?): ゴールドの背景色 */
.question-box::before {
	background-color: gold;
}

/* アラート (!): 薄赤色の背景色 */
.alert-box::before {
	background-color: #f3aca9;
}

/* メモ: 緑色の背景色 */
.memo-box::before {
	background-color: #7ad0b6;
}

/* コメント: 灰色の背景色 */
.comment-box::before {
	background-color: #999;
}

/* OK: 青色の背景色 */
.ok-box::before {
	background-color: #3cb2cc;
}

/* NG: 赤色の背景色 */
.ng-box::before {
	background-color: #dd5454;
}

/* GOOD: 緑色の背景色 */
.good-box::before {
	background-color: #98e093;
}

/* BAD: ピンク色の背景色 */
.bad-box::before {
	background-color: #eb6980;
}

/* プロフィール: 灰色の背景色 */
.profile-box::before {
	background-color: #999;
}

スタイル 7：アイコン強調（背景色なし）

ボックス背景色なしのすっきりとしたデザイン
アイコンがボックスの左上位置に表示され、際立つデザイン

背景色なしでスッキリと洗練されたデザイン。スタイル6のアクセントを残しつつ、少し控えめで落ち着いた印象を持たせます。

CSSを見る

/* スタイル 7: アイコンボックス全体のスタイル */
.wp-block-cocoon-blocks-icon-box {
	background-color: initial; /* 背景色をなしに設定 */
	border-width: 2px; /* 外枠の太さを2pxに設定 */
	border-radius: 0; /* 外枠の角を四角く設定 */
	padding: 1.5em 1.5em 1em; /* 内側余白を上下1.5em、左右1.5emに設定 */
}

/* アイコンの基本スタイル */
.wp-block-cocoon-blocks-icon-box::before {
	top: -1em; /* アイコンをボックスの上に1em浮かせる */
	left: 0.75em; /* アイコンを左に0.75em移動 */
	width: 2em; /* アイコンの幅を2emに設定 */
	padding: 0.5em; /* アイコン内部の余白を0.5emに設定 */
	margin: 0; /* 外側の余白をなしに設定 */
	font-size: 1em; /* アイコンのフォントサイズを1emに設定 */
	color: #fff; /* アイコンの文字色を白に設定 */
	border-right: 0; /* 右側の枠線をなしに設定 */
	border-radius: 1em; /* アイコンの背景を円形に設定 */
	box-shadow: 0 0 0 2px #fff; /* アイコン背景に白い枠線のシャドウを追加 */
	box-sizing: border-box; /* ボックスサイズをボーダーを含む形に設定 */
}

/* アイコンの背景色変更: 状況に応じてアイコンの背景色を設定 */

/* 情報 (i): 水色の背景色 */
.information-box::before {
	background-color: #87cefa;
}

/* 質問 (?): ゴールドの背景色 */
.question-box::before {
	background-color: gold;
}

/* アラート (!): 薄赤色の背景色 */
.alert-box::before {
	background-color: #f3aca9;
}

/* メモ: 緑色の背景色 */
.memo-box::before {
	background-color: #7ad0b6;
}

/* コメント: 灰色の背景色 */
.comment-box::before {
	background-color: #999;
}

/* OK: 青色の背景色 */
.ok-box::before {
	background-color: #3cb2cc;
}

/* NG: 赤色の背景色 */
.ng-box::before {
	background-color: #dd5454;
}

/* GOOD: 緑色の背景色 */
.good-box::before {
	background-color: #98e093;
}

/* BAD: ピンク色の背景色 */
.bad-box::before {
	background-color: #eb6980;
}

/* プロフィール: 灰色の背景色 */
.profile-box::before {
	background-color: #999;
}

当サイトでよく使っているお気に入りはこちら。

スタイル２：さりげなく補足が入れやすいタイプ

スタイル７：ビックアイコンながらシンプルにアピールできるタイプ

コメントを引用するときは、このアイコン

モバイル時の表示調整

当カスタマイズの大きなポイントです。

デフォルトではモバイル時に上部に表示されるアイコンを、PC表示と同じように統一しています。

アイコンが上部に表示される

アイコンはテキストと横並び

CSSを見る

/*モバイル調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;/*縦の中央揃え*/
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
	
	.wp-block-cocoon-blocks-icon-box::before{
		border-right: 1px solid;/*アイコン横の線を追加*/
	}
}

PCと同じ横並びだとすっきり！

アイコン変更

アイコンひとつひとつにこだわりました。綺麗な表示になるように一部のアイコンを変更しています。

情報(i)ボックス　スタイル6 スタイル7
質問(?)ボックス　スタイル6 スタイル7
アラート(!)ボックス　スタイル6 スタイル7
メモボックス　全スタイル共通

Font Awesome 5の設定

アイコンを表示するために、「Cocoon設定」→「全体」→「サイトアイコンフォント」で「Font Awesome 5」に●をつけてください。

アイコンボックスの色を変更する方法

外側の枠線
アイコン

この２つの色をアイコンタイプごとに変更するCSSを掲載するので、色を変更したい場合にご利用ください。

外側の枠線

CSSを見る

/*外側の枠線の色変更*/

/* 情報(i) */
.information-box{
	border-color:#87cefa;
}

/* 質問(?) */
.question-box{
	border-color:gold;
}

/* アラート(!) */
.alert-box{
	border-color:#f3aca9;
}

/* メモ */
.memo-box{
	border-color:#7ad0b6;
}

/* コメント */	
.comment-box{
	border-color:#999;
	border-color:#999;
}

/* OK*/
.ok-box{
	border-color:#3cb2cc;
}

/* NG */
.ng-box{
	border-color:#dd5454;
}

/* GOOD */
.good-box{
	border-color:#98e093;
}

/* BAD */
.bad-box{
	border-color:#eb6980;
}

/*プロフィール*/
.profile-box{
	border-color:#999;
}

アイコン

CSSを見る

/*アイコンの色変更*/

/* 情報(i) */
.information-box::before{
	color:#87cefa;
	border-color:#87cefa;
}

/* 質問(?) */
.question-box::before{
	color:gold;
	border-color:gold;
}

/* アラート(!) */
.alert-box::before{
	color:#f3aca9;
	border-color:#f3aca9;
}

/* メモ */
.memo-box::before{
	color:#7ad0b6;
	border-color:#7ad0b6;
}

/* コメント */	
.comment-box::before{
	color:#999;
}

/* OK*/
.ok-box::before{
	color:#3cb2cc;
	border-color:#3cb2cc;
}

/* NG */
.ng-box::before{
	color:#dd5454;
	border-color:#dd5454;
}

/* GOOD */
.good-box::before{
	color:#98e093;
	border-color:#98e093;
}

/* BAD */
.bad-box::before{
	color:#eb6980;
	border-color:#eb6980;
}

/*プロフィール*/
.profile-box::before{
	color:#999;
	border-color:#999;
}

目次に戻る

Cocoonアイコンボックスの使い方

Step1
ブロックメニューを選択

ブロックエディタで「アイコンボックス」を選択します。
Step2
お好みのスタイルを選ぶ

サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。

選んだスタイルがすぐに反映されます。
Step3
アイコンタイプ設定

表示するアイコンを選択します。
Step4
ボックスの内容を編集

ボックス内にコンテンツを入力したら完成です。

目次に戻る

Cocoonアイコンボックス｜カスタマイズの注意点と特徴

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

スキンによる影響
- 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによってはスタイルの重複等で表示が崩れる場合があります。
子テーマを利用
- 子テーマを使用することで安全性を確保しています。
- 万が一不要になった場合は、追加したコードを削除するだけで簡単に元の状態に戻せます。
PHPエラーが発生した場合の対処
エラー表示が出て保存できない場合、以下の項目を確認してください。

WAF設定
サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
ベーシック認証
- サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。

目次に戻る

実装方法／Cocoon「アイコン」のデザインをサイドバーで切り替えするカスタマイズ

実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。

PHPの設定

スタイル切り替えをエディタに追加

PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。

CSSの設定

各スタイルを指定する

CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。

カスタマイズ前にバックアップをおこないましょう。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	500円
お支払い方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
お支払い方法	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。