この記事では、WordPress の無料テーマ Cocoon のバッジを CSS でカスタマイズする方法を解説します。
カスタマイズする CSS クラス
Cocoon では、バッジを以下の CSS クラスで定義しています。
| 色 | CSS クラス |
|---|---|
| オレンジ | .badge |
| 赤色 | .badge-red |
| ピンク | .badge-pink |
| 紫色 | .badge-purple |
| 青色 | .badge-blue |
| 緑色 | .badge-green |
| 黄色 | .badge-yellow |
| 茶色 | .badge-brown |
| 灰色 | .badge-grey |
カスタマイズの例
当 Web サイトでは、バッジを以下のとおりカスタマイズしています。
オレンジのバッジ
/* バッジ（オレンジ） */
.badge {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #f39800;
border-radius: 15px;
color: #f39800;
background-color: #ffffff;
}赤色のバッジ
/* バッジ（赤色） */
.badge-red {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #e60033;
border-radius: 15px;
color: #e60033;
background-color: #ffffff;
}ピンクのバッジ
/* バッジ（ピンク） */
.badge-pink {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #e95295;
border-radius: 15px;
color: #e95295;
background-color: #ffffff;
}紫色のバッジ
/* バッジ（紫色） */
.badge-purple {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #884898;
border-radius: 15px;
color: #884898;
background-color: #ffffff;
}青色のバッジ
/* バッジ（青色） */
.badge-blue {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #0095d9;
border-radius: 15px;
color: #0095d9;
background-color: #ffffff;
}緑色のバッジ
/* バッジ（緑色） */
.badge-green {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #3eb370;
border-radius: 15px;
color: #3eb370;
background-color: #ffffff;
}黄色のバッジ
/* バッジ（黄色） */
.badge-yellow {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #ffd900;
border-radius: 15px;
color: #ffd900;
background-color: #ffffff;
}茶色のバッジ
/* バッジ（茶色） */
.badge-brown {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #954e2a;
border-radius: 15px;
color: #954e2a;
background-color: #ffffff;
}灰色のバッジ
/* バッジ（灰色） */
.badge-grey {
padding: 3px 10px;
border-width: 1px;
border-style: solid;
border-color: #949495;
border-radius: 15px;
color: #949495;
background-color: #ffffff;
}その他
ボーダーや文字の色については、次の記事を参照してください。Cocoon で使用されている配色を解説しています。
WordPress でカスタム CSS を追加する方法については、次の記事を参照してください。