Cocoonの補足情報ボックス(？/！/ｉ)を少しかわいくカスタマイズしてみた

Cocoon標準の「補足情報ボックス」を、少し明るくポップな感じにかわいくしてみたので、やり方を共有します。

CSSのコピペだけで導入できるので、お好みにあわせてご利用ください。

※2018年4月8日追記

本カスタマイズは、Cocoon Ver 0.4.4よりCocoonのテーマに組み込み済みです。詳しくはこちら

参考拡張クラスの補足説明ボックスのスタイルを変更しました | 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」属性のカラーコードを変えてみてください。

参考 WEB色見本原色大辞典 – HTMLカラーコード

また、CSSのセレクタを以下の通り置き換えればSimplicityでも使えるはずなので、Simplicityユーザの方はどうぞ。

.information-box → .information
.question-box → .question
.alert-box → .alert

注意事項

コピペ前に念のため、CSSのバックアップをとっておくことをおすすめします。

心配ならテスト環境で事前に確認すると安心です。

WordPressを無料お試しする方法まとめ。調べるより実物を触ろう

WordPressが気になっている方に向けて、WordPress を無料でお試しする方法を解説します。一番のおすすめはレンタルサーバーの無料お試しプログラムを利用することです。

まとめ：Cocoonを自分色に染めよう

以上、Cocoonの補足情報ボックスを少しポップめにかわいくするカスタマイズ方法を共有してみました。

そのままでも十分スタイリッシュなCocoonですが、デフォルトのまま使うより少しのカスタムで自分色に染めて他所のブログと差別化することで、より楽しく美しく使えるのではないでしょうか。

nami より:

2018年5月16日 16:28

Simplicity時代と比べて注意喚起ボックスなどのデザインが
各段におしゃれになりました、こちらのデザインだったんですね
とても気に入ったので、同じデザインで他の項目も作りたいのですが、
同じデザインで、？や！のマークと色だけを変更したい場合
これだけではダメなのでしょうか。
書いてみたのですが実装されませんでした。

.bomb-box {
background:#ffcccc;/*背景色*/
border:1px solid #ff0000;/*枠線*/
}
.bomb-box:before {
color:#ff0000;/*アイコン色*/
border-right: 1px solid #ff0000;/*アイコン右のライン*/
padding-right:.15em;
line-height:1em;
position: absolute;
top:50%;
margin-top:-.5em;
font-family: FontAwesome;
content: “\f1e2”;/*アイコン*/
}

返信

NAE より:

2018年5月16日 17:12

namiさん

コメントありがとうございます。
こちらのカスタマイズは、Cocoonにもともと入っている「ベースのCSS」に対し、ボックスやマークの色・配置を整える「追加CSS」という位置づけです。
「ベースCSS」と「追加CSS」が両方そろってはじめて、ボックスデザインが実装されます。
そのため、こちらの「追加CSS」のみをコピペしても「？」や「！」と同じボックスデザインにはなりません。
Cocoonの親テーマフォルダから「ベースCSS」部分を探してコピペしたうえで、上記「追加CSS」をかぶせてみてください。
（.information-boxなどで検索すると出てくると思います）

返信

nami より:

2018年5月16日 16:28

Simplicity時代と比べて注意喚起ボックスなどのデザインが
各段におしゃれになりました、こちらのデザインだったんですね
とても気に入ったので、同じデザインで他の項目も作りたいのですが、
同じデザインで、？や！のマークと色だけを変更したい場合
これだけではダメなのでしょうか。
書いてみたのですが実装されませんでした。

.bomb-box {
background:#ffcccc;/*背景色*/
border:1px solid #ff0000;/*枠線*/
}
.bomb-box:before {
color:#ff0000;/*アイコン色*/
border-right: 1px solid #ff0000;/*アイコン右のライン*/
padding-right:.15em;
line-height:1em;
position: absolute;
top:50%;
margin-top:-.5em;
font-family: FontAwesome;
content: “\f1e2”;/*アイコン*/
}

返信
- NAE より:
  
  2018年5月16日 17:12
  
  namiさん
  
  コメントありがとうございます。
  こちらのカスタマイズは、Cocoonにもともと入っている「ベースのCSS」に対し、ボックスやマークの色・配置を整える「追加CSS」という位置づけです。
  「ベースCSS」と「追加CSS」が両方そろってはじめて、ボックスデザインが実装されます。
  そのため、こちらの「追加CSS」のみをコピペしても「？」や「！」と同じボックスデザインにはなりません。
  Cocoonの親テーマフォルダから「ベースCSS」部分を探してコピペしたうえで、上記「追加CSS」をかぶせてみてください。
  （.information-boxなどで検索すると出てくると思います）
  
  返信