Cocoonカスタマイズ まとめ記事公開中

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

WordPress
スポンサーリンク

Cocoonユーザーの皆さん、こんにちは!

今回はCocoonの拡張スタイル「アイコンボックス」のカスタマイズ記事です!

Cocoonの拡張スタイル「アイコンボックス」はパソコン画面で表示すると素敵なんですが、スマホで表示するとデザインが少し変わってしまうのはご存知ですか?

補足情報1
注意喚起文
アイコンボックス 補足情報(i)
アイコンボックス スマホ画面1
アイコンボックス 補足情報(!)
アイコンボックス スマホ画面2

なので、スマホサイズでアイコンボックスを表示させる際に、流行りのイケてるWordPressテーマ「SWELL」のように表示させるカスタマイズ方法をご紹介します!

スポンサーリンク

完成イメージ

実はスマホで見て本記事いる人は既に見て貰っていますが、完成イメージは以下の図のような形になります。

完成イメージ

スマホサイズでもアイコンが左側に表示されるようにカスタマイズしました。
また、アイコンの右側に表示されている縦棒をダッシュ形式に変更しています。

今回のカスタマイズは「ボックスアイコン」の全てに対応しているわけではありません。
主要?な4つのみをカスタマイズしております。
スポンサーリンク

カスタマイズ方法

カスタマイズ手順

  • STEP1
    CSSをコピー
    外観 > テーマエディター > style.cssにペーストします

STEP1 : CSSをコピー

下記のコードをコピーしてください。

ペーストする場所は、「外観 > テーマエディター > style.css(子テーマ)」。
もしくは、「外観 > カスタマイズ > 追加CSS」のどちらでもOKです。
/* アイコン */
.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

問題なくコピーできてい場合は以下のように表示されていると思います。
良かったらスマホで確認してみてください!

もし変な所がある場合は、良ければコメントしてくださいね。

Y&K Studio – 二人三脚ブログ- 
管理人・執筆担当のYoshitakaと申します
CocoonやWordPressのカスタマイズを時々しています
カスタマイズ依頼が御座いましたらコメントください

スポンサーリンク

導入済みのブログをサイト紹介させて頂きたいと思います!

「この記事を見て導入したよ!」という方でSNSやブログでこの記事を紹介していただいた場合、または、参考にしました!とSNSなどでメッセージが貰えた場合、こちらでブログを紹介させていただきます!

ご連絡お待ちしております!

コメント