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

この記事では、テーマCocoonのブロック「アイコンボックス」を使って、複数のデザインを簡単に切り替えるカスタマイズを紹介します。

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

Cocoon「タブ見出しボックス」のデザイン切り替えも紹介しています。

実装イメージ／Cocoon「アイコンボックス」

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

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

Cocoon「アイコンボックス」のスタイルは5種類

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

アイコンタイプの種類

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

1. 情報(i)
2. 質問(?)
3. アラート(!)
4. メモ
5. コメント
6. OK
7. NG
8. GOOD
9. BAD
10. プロフィール

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

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

以下、カスタマイズで追加するスタイルの一覧です。

アイコン色、ボックス背景色はCocoonのデフォルトに準じます。

デフォルト

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

スタイル 1

• 外枠があり、ボックスの角は直角
• アイコンがボックスの外側にはみ出して表示される
• アイコンが際立つデザイン

スタイル 2

• 外枠はなし、ボックスの角は直角
• アイコンを小さくし、ボックス内の左側に表示
• 枠線がなく柔らかいイメージで、補足等に使いやすい

スタイル 3

• 外枠あり、ボックスの角は直角
• アイコンを小さくしてボックス内の左側に表示
• ボックス背景色なしのすっきりとしたデザイン

スタイル 4

• 外枠はなし
• ボックスの上部に太いラインを表示
• 付箋風のデザイン

スタイル 5

• 外枠はなし
• ボックスの左に太いラインを表示
• 付箋風のデザイン

モバイル時の表示調整

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

メモボックスのアイコン

メモボックスを少しオシャレなペン型のアイコンに変更しています。

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

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

当カスタマイズの注意点と特徴

• 検証はスキン「なし」でおこなっています
  • お使いのスキンにより、「アイコンボックス」部分に他のスタイルが入っている場合は表示が崩れることがありますのでご了承ください

• 子テーマを使うため、比較的安全におこなえます
• 当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります

• PHPでエラーがでる場合は下記をご確認ください

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

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

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

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