【Cocoon】拡張スタイル「アイコンボックス」のスマホ表示をカスタマイズ

WordPressを始めて間もないながらもカスタマイズした内容を紹介していきます。

今回は、Cocoonテーマの拡張スタイル「アイコンボックス」のスマホ表示をカスタマイズします。

Cocoonテーマの拡張スタイルの「アイコンボックス」とても活躍してくれそうなボックスだと思ったのですが・・・。

パソコンのマウスを右クリック⇒「検証」でスマホ表示させてみたらこんなかんじになっちゃってました。

念のため、スマホでも確認したら、同じ表示でした。

見た目はやっぱりパソコンと同じ表示が良いな～。

そう思ったのでに、どうしたら良いか探していたところ見つけちゃいました！

こちらを参考にさっそく導入です。

【Cocoon】拡張スタイル「アイコンボックス」をカスタマイズ

Cocoonユーザーの皆さん、こんにちは！今回はCocoonの拡張スタイル「アイコンボックス」のカスタマイズ記事です！Cocoonの拡張スタイル「アイコンボックス」はパソコン画面で表示すると素敵なんですが、スマホで表示するとデザインが少し変

y-k-studio.com

こちらで紹介されている「アイコンボックス」は一部のアイコンのカスタマイズです。

どうせなら全ての「アイコンボックス」をカスタマイズしたいと思い自分なりにカスタマイズした方法です。

「アイコンボックス」のカスタマイズ方法

1. 以下のコードをコピーします
2. 「外観 > テーマエディター > style.css(子テーマ)」か「外観 > カスタマイズ > 追加CSS」に貼りつけます。

/* アイコンボックス */ 
.information-box::before, .information::before { border-right: 1px solid #bde4fc; } 
.question-box::before, .question::before { border-right: 1px solid #ffe766; } 
.alert-box::before, .alert::before { border-right: 1px solid #f6b9b9; } 
.memo-box::before { border-right: 1px solid #8dd7c1; } 
.comment-box::before { border-right: 1px solid #ccd; }
.ok-box::before { border-right: 1px solid #3cb2cc; }
.ng-box::before { border-right: 1px solid #dd5454; }
.good-box::before { border-right: 1px solid #98e093; }
.bad-box::before { border-right: 1px solid #eb6980; }
.profile-box::before { border-right: 1px solid #ccd; }

.information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before, .ok-box::before, .ng-box::before, .good-box::before, .bad-box::before, .profile-box::before{ font-size: 30px; }
@media screen and (max-width: 480px){ .information-box, .common-icon-box { padding: 1em 1em 1em 4.25em; line-height: 1.6; }
.information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before, .ok-box::before, .ng-box::before, .good-box::before, .bad-box::before, .profile-box::before { font-family: "FontAwesome"; position: absolute; line-height: 1em; top: 50%; left: 1em; padding-right: .45em; display: inline-block; font-size: 30px; } }

カスタマイズ後

『補足情報（i）』から『メモ』までは、上記にあるのでそれ以降のアイコンボックスを表示しました。

早速確認！

パソコンでスマホ表示・・・マウスを右クリック⇒「検証」で確認します。

で、出来てました！

素人なので、コードのことはまったく分からないので質問されてもお答えはできません。

パソコンでの表示確認ブラウザは、Google Chrome、Microsoft Edge、Firefox。

それぞれ、Windows7、8、10で確認しました。

「アイコンボックス」の表示内容を変えたい場合

コード内で、アイコンボックスの表示内容を変えることができます。
変更できるところは、アイコンと文章の間の縦線の太さと、縦線の形状です。

アイコンボックスの表示内容を変えたい場合は、下記を変更してください。

アイコンと文章の間の縦線の太さを変更したい

.information-box::before, .information::before { border-right: 1px solid #bde4fc; }

「1」の数字を上げてると太くなります。

縦線の形状を変更したい

.information-box::before, .information::before { border-right:1px solid #bde4fc; }

「solid」は直線です。

縦点線にしたい時は「dashed」に変更してください。
二重線にしたい場合は「double」に変更です。

まとめ

必要な「アイコンボックス」だけをカスタマイズしたいという方はいると思います。

私は、二度手間にならないように全て変更しました。

一応、自分用の記録保存のため、カスタマイズしやすいように以下を書いておきます。