【Cocoon】アイコンボックス・白抜きボックスのカスタマイズ

ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。

アイコンボックス・白抜きボックスのカスタマイズのカスタマイズを紹介します。

アイコンボックス・白抜きボックスとは？

アイコンボックス・白抜きボックスは、ブログ記事を読みやすくするための便利な装飾です。

アイコンボックスは、アイコンがあることで一目で役割をわかりやすく伝えます。また、白抜きボックスはシンプルなので汎用的に使用できます。

当ブログのアイコンボックス・白抜きボックスカスタマイズ

このブログのアイコンボックス・白抜きボックスカスタマイズは以下のとおりです。

アイコンボックス・白抜きボックスのカスタマイズ方法

アイコンボックス・白抜きボックスのカスタマイズ方法を紹介します。

【CSS】アイコンボックスのカスタマイズ

アイコンボックスは数が多いので、使用するアイコンボックスのみカスタマイズするのがおすすめです。

アイコンボックスのCSSカスタマイズは以下のとおりです。

/*アイコンボックス（情報）のカスタマイズ*/
.information-box {
  background:rgba(199,213,229,0.1);  /*背景色の変更（※RGBA形式で透明度を設定）*/
  border: solid 1px #c7d5e5;  /*線の種類、太さ、色を変更*/
  border-radius: 0px;  /*角の丸みをなくす*/
}
.information-box:before {
  color:#c7d5e5;  /*アイコンの色を変更*/
  border-right: none;  /*アイコンと文章の間の線をなくす*/
}

/*アイコンボックス（質問）のカスタマイズ*/
.question-box  {
  background:rgba(229,229,199,0.1);  /*背景色の変更（※RGBA形式で透明度を設定）*/
  border: solid 1px #e5e5c7;  /*線の種類、太さ、色を変更*/
  border-radius: 0px;  /*角の丸みをなくす*/
}
.question-box:before {
  color:#e5e5c7;  /*アイコンの色を変更*/
  border-right: none;  /*アイコンと文章の間の線をなくす*/
}

/*アイコンボックス（アラート）のカスタマイズ*/
.alert-box{
  background:rgba(229,199,199,0.1);  /*背景色の変更（※RGBA形式で透明度を設定）*/
  border:solid 1px #e5c7c7;  /*線の種類、太さ、色を変更*/
  border-radius: 0px;  /*角の丸みをなくす*/
}
.alert-box:before {
  color: #e5c7c7;  /*アイコンの色を変更*/
  border-right: none;  /*アイコンと文章の間の線をなくす*/
}

RGBA形式って何？

色の指定方法はいろいろあるよ！

• 16進数（例：#ffffff）
• RGBA（例：rgba(199,213,229,0.1)）
• カラーネーム（例：white）

16進数では透明度を変更できませんが、RGBAでは透明度を設定できます。16進数からRGBAには、以下のサイトで変換できます。

• TECH-UNLIMiTED：カラーコード変換ツール

それぞれのセレクタは以下のとおりです。

.information-box {  /*情報*/
  カスタマイズ内容を入力する
}

.question-box  /*質問*/
.alert-box  /*アラート*/
.memo-box  /*メモ*/
.comment-box  /*コメント*/
.ok-box  /*OK*/
.ng-box  /*NG*/
.good-box  /*GOOD*/
.bad-box  /*BAD*/
.profile-box  /*プロフィール*/

【CSS】白抜きボックスのカスタマイズ

タブ見出しボックスのCSSカスタマイズは以下のとおりです。

/*白抜きボックス*/
.blank-box{
  border-radius: 0px;
  border:1px solid #ccc;
}

まとめ

アイコンボックス・白抜きボックスのデザインは簡単に変更できます。

自由に変更してみましょう。