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などでメッセージが貰えた場合、こちらでブログを紹介させていただきます!

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

★193万円受給しながら転職可能★
「MamaEdu」プロジェクトは、Web・ITの専門スキルを持ち、活き活きと働く女性を増やしていくことを目的とした活動!

自立支援教育訓練給付金や高等職業訓練促進給付金のフォローを受けることができるため、最大193万円の給付金を貰いながら転職活動が可能です!
この記事を書いた人

Y&K Studioの管理人・執筆担当。
現役エンジニアで趣味は写真撮影や動画制作
Weebill LabとSony α7iiiが相棒。

詳しいプロフィールはこちらから。

\Y&K Studio のフォローはこちら/
WordPress
スポンサーリンク
\ SHARE BUTTONS /

コメント

  1. […] 【Cocoon】拡張スタイル「アイコンボックス」をカスタマイズCocoonユーザーの皆さん、こんにちは!今回はCocoonの拡張スタイル「アイコンボックス」のカスタマイズ記事です!Cocoonの拡張 […]

  2. Cocoonのアイコンボックスがスマホだとダサいなーと思って調べたところ記事を見つけまして、参考にさせていただきました。
    おかげさまでスマホでもいい感じに表示されるようになりました!有益な記事をありがとうございます。
    当方のブログ(https://tamotopi.com/)

タイトルとURLをコピーしました