Cocoonユーザーの皆さん、こんにちは！
今回はCocoonの拡張スタイル「アイコンボックス」のカスタマイズ記事です！
Cocoonの拡張スタイル「アイコンボックス」はパソコン画面で表示すると素敵なんですが、スマホで表示するとデザインが少し変わってしまうのはご存知ですか？
なので、スマホサイズでアイコンボックスを表示させる際に、流行りのイケてるWordPressテーマ「SWELL」のように表示させるカスタマイズ方法をご紹介します！
完成イメージ
実はスマホで見て本記事いる人は既に見て貰っていますが、完成イメージは以下の図のような形になります。
スマホサイズでもアイコンが左側に表示されるようにカスタマイズしました。
また、アイコンの右側に表示されている縦棒をダッシュ形式に変更しています。
カスタマイズ方法
カスタマイズ手順
- STEP1CSSをコピー外観 > テーマエディター > style.cssにペーストします
STEP1 : CSSをコピー
下記のコードをコピーしてください。
/* アイコン */
.information-box::before, .information::before {
border-right: 2px dashed #bde4fc;
}
.question-box::before, .question::before {
border-right: 2px dashed #ffe766;
}
.alert-box::before, .alert::before {
border-right: 2px dashed #f6b9b9;
}
.memo-box::before {
border-right: 2px dashed #8dd7c1;
}
.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 {
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 {
font-family: "FontAwesome";
position: absolute;
line-height: 1em;
top: 50%;
left: 1em;
padding-right: .45em;
display: inline-block;
font-size: 30px;
}
}上記のCSSですと、デフォルトとは異なり、アイコン横の縦棒がダッシュになっています。
もし、デフォルトのままで使用したい方は以下のCSSのコードをお使い下さい。
/* アイコン */
.information-box::before, .information::before {
border-right: 2px solid #bde4fc;
}
.question-box::before, .question::before {
border-right: 2px solid #ffe766;
}
.alert-box::before, .alert::before {
border-right: 2px solid #f6b9b9;
}
.memo-box::before {
border-right: 2px solid #8dd7c1;
}
.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 {
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 {
font-family: "FontAwesome";
position: absolute;
line-height: 1em;
top: 50%;
left: 1em;
padding-right: .45em;
display: inline-block;
font-size: 30px;
}
}DEMO
問題なくコピーできてい場合は以下のように表示されていると思います。
良かったらスマホで確認してみてください！
もし変な所がある場合は、良ければコメントしてくださいね。
導入済みのブログをサイト紹介させて頂きたいと思います！
「この記事を見て導入したよ！」という方でSNSやブログでこの記事を紹介していただいた場合、または、参考にしました！とSNSなどでメッセージが貰えた場合、こちらでブログを紹介させていただきます！
ご連絡お待ちしております！
コメント
[…] 【Cocoon】拡張スタイル「アイコンボックス」をカスタマイズCocoonユーザーの皆さん、こんにちは！今回はCocoonの拡張スタイル「アイコンボックス」のカスタマイズ記事です！Cocoonの拡張 […]
Cocoonのアイコンボックスがスマホだとダサいなーと思って調べたところ記事を見つけまして、参考にさせていただきました。
おかげさまでスマホでもいい感じに表示されるようになりました！有益な記事をありがとうございます。
当方のブログ（https://tamotopi.com/）