「こんなことできたらいいな～」を考えました！
この記事では、Cocoonテーマのブロック「アイコンボックス」を使って、複数のデザインを簡単に切り替えるカスタマイズを紹介します。
この５つのスタイルを準備しました
パソコン表示
モバイル表示
このカスタマイズをおこなうことで視覚的にアクセントをプラスできます。
ここがポイント
- サイドバーからクリックするだけで５種類のデザインが選べる
- →デザインは後から自由に変更可能（CSS）
- 同じページ内で複数のデザインが使える
- ブロックの汎用性アップ
- 実装方法は２ヶ所にコードを貼り付けるだけ（所要時間５分程度）
- 切り替えしない場合でも参考にできるように、各スタイルのCSSを掲載します
有料テーマ風の使い心地になります！
ブロックのデザイン切り替えシリーズ、他にも紹介しています。
よく使うブロックがありましたらお試しください！
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計280件（月間約20件）購入いただいています
はっちゃん
です
です
実装イメージ／Cocoon「アイコンボックス」
Cocoonテーマには「アイコンボックス」という便利なブロックがあります。このボックスに複数のスタイルを追加することで、投稿ページや固定ページのデザインをより柔軟に変えることができます。
以下動画は操作イメージです。
＼5種類のスタイルを切り替えています／
Cocoon「アイコンボックス」のスタイルは5種類
デフォルトでは「アイコンボックス」は決まったデザインのみが提供されていますが、今回のカスタマイズにより、自由にスタイルを選んで適用できるようになります。
アイコンタイプの種類
Cocoonで設定されているアイコンタイプは全10種類です。
- 情報(i)
- 質問(?)
- アラート(!)
- メモ
- コメント
- OK
- NG
- GOOD
- BAD
- プロフィール
アイコンを選択すると、設定されたアイコン色、ボックス背景色で表示されます。各アイコンごとに固定されているので設定では変更できません。（CSSでは自由に変更できます）
アイコンタイプ
色は固定です
カスタマイズで追加するスタイル
以下、カスタマイズで追加するスタイルの一覧です。
アイコン色、ボックス背景色はCocoonのデフォルトに準じます。
デフォルト
Cocoonデフォルト：通常のデザイン
デフォルトでも十分ですが、少しアイコンを小さく、余白を調整してスタイリッシュにしてみます！
スタイル 1
- 外枠があり、ボックスの角は直角
- アイコンがボックスの外側にはみ出して表示される
- アイコンが際立つデザイン
/*スタイル 1*/
.wp-block-cocoon-blocks-icon-box{
border-width: 2px;/* 外枠の太さ */
border-radius:0;/* 角を四角く */
padding: 1em 1.5em;/* 内側余白（上下・左右） */
margin-left:10px;/*左側に余白*/
}
/*アイコンのスタイル*/
.wp-block-cocoon-blocks-icon-box::before{
top: -15px;/*上からの位置*/
left: -10px;/*左からの位置*/
width: 2em;
padding: 0.5em;
margin: 0;
font-size: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;
}スタイル 2
- 外枠はなし、ボックスの角は直角
- アイコンを小さくし、ボックス内の左側に表示
- 枠線がなく柔らかいイメージで、補足等に使いやすい
/*スタイル 2*/
.wp-block-cocoon-blocks-icon-box{
border-radius:0;/* 角を四角く */
padding: .8em 2em .8em 4.5em;/* 内側余白（上・右・下・左） */
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
- 外枠あり、ボックスの角は直角
- アイコンを小さくしてボックス内の左側に表示
- ボックス背景色なしのすっきりとしたデザイン
/*スタイル 3*/
.wp-block-cocoon-blocks-icon-box{
border-radius:0;/* 角を四角く */
padding: .8em 2em .8em 4.5em;/* 内側余白（上・右・下・左） */
border-width: 2px;/* 外枠の太さ*/
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
- 外枠はなし
- ボックスの上部に太いラインを表示
- 付箋風のデザイン
/*スタイル 4*/
.wp-block-cocoon-blocks-icon-box{
border-width: 5px;/* 外枠なし */
border-radius:0;/* 角を四角く */
padding: .8em 2em .8em 3em;/* 内側余白（上・右・下・左） */
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
- 外枠はなし
- ボックスの左に太いラインを表示
- 付箋風のデザイン
/*スタイル 5*/
.wp-block-cocoon-blocks-icon-box{
border-width: 5px;/* 外枠なし */
border-radius:0;/* 角を四角く */
padding: .8em 2em .8em 3em;/* 内側余白（上・右・下・左） */
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;
}
}モバイル時の表示調整
デフォルトではモバイル時に上部に表示されるアイコンを、PC表示と同じように統一しています。
アイコンが上部に表示される
アイコンはテキストと横並び
/*モバイル調整*/
/*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と同じ横並びだとすっきり！
メモボックスのアイコン
メモボックスを少しオシャレなペン型のアイコンに変更しています。
/*アイコン変更（メモ）*/
.memo-box::before {
content: "\f304";
}アイコンを表示するために、「Cocoon設定」→「全体」→「サイトアイコンフォント」で「Font Awesome 5」に●をつけてください。
アイコンボックスの色を変更する方法
- 外側の枠線
- アイコン
この２つの色をアイコンタイプごとに変更する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;
}
/* 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;
}
アイコン
/*アイコンの色変更*/
/* 情報(i) */
.information-box::before{
color:#87cefa;
}
/* 質問(?) */
.question-box::before{
color:gold;
}
/* アラート(!) */
.alert-box::before{
color:#f3aca9;
}
/* メモ */
.memo-box::before{
color:#7ad0b6;
}
/* コメント */
.comment-box::before{
color:#999;
}
/* OK*/
.ok-box::before{
color:#3cb2cc;
}
/* NG */
.ng-box::before{
color:#dd5454;
}
/* GOOD */
.good-box::before{
color:#98e093;
}
/* BAD */
.bad-box::before{
color:#eb6980;
}
/*プロフィール*/
.profile-box::before{
color:#999;
}Cocoon「アイコンボックス」の使い方
- ブロックメニューを選択
ブロックエディタで「アイコンボックス」を選択します。
- お好みのスタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
選んだスタイルがすぐに反映されます。
- アイコンタイプ設定
表示するアイコンを選択します。
- ボックスの内容を編集
ボックス内にコンテンツを入力したら完成です。
当カスタマイズの注意点と特徴
- 子テーマを使うため、比較的安全におこなえます
- 当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります
- PHPでエラーがでる場合は下記をご確認ください
- サーバー側でベーシック認証（アクセス制限）を設定していないか
- →エラーが表示され編集できません
- サーバー側でWAF設定をONにしていないか
- →エックスサーバーでは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条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ