ワードプレステーマCocoon(コクーン)には、バッジという装飾機能があります。
重要←これ
参考←これ

デフォルトのまま使ってもいいけど、色をちょっと変えるだけで独自性が出ていいよね。
今回は、コピペで簡単に色の変更とバッジの大きさを変えるカスタマイズをご紹介します。

上の「コピペ」の部分ちょっと大きくなってるでしょ?こんな感じのやつを実装していくよ。
Cocoonカスタマイズ:バッジの色を変更する。
Cocoonのバッジの色を変更していきます。
手順は以下の通りです。
- STEP1CSSをコピペ
style.cssにコードをコピペ
- STEP2オリジナルの色を決める
STEP1でコピペしたものをアレンジ
STEP1. CSSをコピペ
CSSをコピペします。
/*Cocoonバッジカラー変更*/ .badge{background-color: #f0c886;} .badge-red {background-color: #bf4762;} .badge-pink {background-color: #ebb2cb;} .badge-purple {background-color: #bb8bc7;} .badge-blue {background-color: #92c1d6;} .badge-green {background-color: #8bd9ac;} .badge-yellow {background-color: #edde8a;} .badge-brown {background-color: #9e735d;} .badge-grey {background-color: #b9b9bd;}
「外観→テーマエディター→style.css(子テーマ)」または
「外観→カスタマイズ→追加CSS」に貼り付けてください。

次は自分の好きな色を決めていこう!
STEP2. 色の変更
コピペしたCSSの「#bb8bc7」や「#bf4762」が、色を決めているカラーコードと呼ばれるものです。
この部分を変更することで、オリジナルのバッジカラーを設定することができます。

迷っちゃう人は、以下のサイトが役に立つかも~。

Cocoonカスタマイズ:バッジの大きさを変更する。
Cocoonのバッジの大きさを変更していきます。
手順は以下の通り。
- STEP1CSSをコピペ
style.cssにコードをコピペ
- STEP2オリジナルの大きさを決める
STEP1でコピペしたものをアレンジ
STEP1. CSSをコピペ
CSSをコピペします。
/*バッジ*/ .badge, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey { color: #fff; padding: 1px 5px 0; border-radius: 2px; font-size: 12px; }
「外観→テーマエディター→style.css(子テーマ)」または
「外観→カスタマイズ→追加CSS」に貼り付けてください。

自分の好きな大きさや、幅を決めていこう。
STEP2. 大きさや幅を決める。
color: #fff; ←色
padding: 1px 5px 0; ←幅
border-radius: 2px; ←角丸
font-size: 12px; ←文字サイズ
自分の好きな大きさや文字サイズを決めていきましょう。

私が現在使用している、設定は以下のようなものです。
コピペで簡単に設定
padding: 5px 10px; border-radius: 5px; font-size: 14px;
以上になります。
自分のオリジナルバッジを作って行きましょー!
コメント