Cocoon標準の「補足情報ボックス」を、少し明るくポップな感じにかわいくしてみたので、やり方を共有します。
CSSのコピペだけで導入できるので、お好みにあわせてご利用ください。
※2018年4月8日追記
本カスタマイズは、Cocoon Ver 0.4.4よりCocoonのテーマに組み込み済みです。詳しくはこちら
参考 拡張クラスの補足説明ボックスのスタイルを変更しました | Cocoon
完成イメージ#
- 細めの枠線を追加
- アイコン（？/！/ｉ）を上下中央に
- アイコンの右に薄く縦線
- ？とｉを違う色に
- 全体的な色味の調整
カスタマイズの方法#
下記のCSSを、子テーマのstyle.cssまたは「外観＞カスタマイズ＞追加CSS」に貼り付けてください。
- CSSを表示する
.information-box:before, .question-box:before, .alert-box:before {
padding-right:.15em;
line-height:1em;
position: absolute;
top:50%;
margin-top:-.5em;
}
.information-box {
background:rgba(135,206,250,.1);
border:1px solid rgba(135,206,250,.5);
}
.information-box:before {
color:#87cefa;
border-right: 1px solid rgba(135,206,250,.5);
}
.question-box:before {
color:gold;
border-right: 1px solid rgba(255,215,0,.5);
}
.question-box {
background:rgba(255,215,0,.2);
border: 1px solid rgba(255,215,0,.5);
}
.alert-box{
background:rgba(240,128,128,.1);
border:1px solid rgba(240,128,128,.5);
}
.alert-box:before {
border-right: 1px solid rgba(240,128,128,.5);
}色味を変える場合は、「color」や「background」属性のカラーコードを変えてみてください。
また、CSSのセレクタを以下の通り置き換えればSimplicityでも使えるはずなので、Simplicityユーザの方はどうぞ。
- .information-box → .information
- .question-box → .question
- .alert-box → .alert
注意事項#
コピペ前に念のため、CSSのバックアップをとっておくことをおすすめします。
心配ならテスト環境で事前に確認すると安心です。
WordPressを無料お試しする方法まとめ。調べるより実物を触ろう
まとめ：Cocoonを自分色に染めよう#
以上、Cocoonの補足情報ボックスを少しポップめにかわいくするカスタマイズ方法を共有してみました。
そのままでも十分スタイリッシュなCocoonですが、デフォルトのまま使うより少しのカスタムで自分色に染めて他所のブログと差別化することで、より楽しく美しく使えるのではないでしょうか。
