【開催中】Amazonタイムセール祭りのおすすめガジェット情報を随時更新しています。詳しくはこちら
naenote.netへようこそ

naenote.netは、「捗る」がテーマのガジェット×テック系情報ブログです

シンプル・ミニマル・スピーディーがモットーの管理人が
「これは!」と感じた情報を厳選してお届けします

過去のレビュー記事一覧はこちら

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

ちょっとかわいく

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

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

※2018年4月8日追記

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

参考 拡張クラスの補足説明ボックスのスタイルを変更しました | Cocoon

スポンサーリンク

完成イメージ

カスタマイズ後のCocoonの補足情報ボックスイメージ

  • 細めの枠線を追加
  • アイコン(?/!/i)を上下中央に
  • アイコンの右に薄く縦線
  • ?とiを違う色に
  • 全体的な色味の調整

カスタマイズの方法

下記の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ですが、デフォルトのまま使うより少しのカスタムで自分色に染めて他所のブログと差別化することで、より楽しく美しく使えるのではないでしょうか。

コメント