【Cocoonカスタマイズ】バッジの色と大きさを変える方法【コピペOK】

ワードプレステーマCocoon（コクーン）には、バッジという装飾機能があります。

重要←これ

参考←これ

デフォルトのまま使ってもいいけど、色をちょっと変えるだけで独自性が出ていいよね。

今回は、コピペで簡単に色の変更とバッジの大きさを変えるカスタマイズをご紹介します。

上の「コピペ」の部分ちょっと大きくなってるでしょ？こんな感じのやつを実装していくよ。

Cocoonカスタマイズ：バッジの色を変更する。
Cocoonカスタマイズ：バッジの大きさを変更する。

Cocoonカスタマイズ：バッジの色を変更する。

Cocoonのバッジの色を変更していきます。

手順は以下の通りです。

手順

バッジの色を変える方法

STEP1
CSSをコピペ
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;}

Copy

「外観→テーマエディター→style.css(子テーマ)」または
「外観→カスタマイズ→追加CSS」に貼り付けてください。

次は自分の好きな色を決めていこう！

STEP2. 色の変更

コピペしたCSSの「#bb8bc7」や「#bf4762」が、色を決めているカラーコードと呼ばれるものです。

この部分を変更することで、オリジナルのバッジカラーを設定することができます。

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

【2020年版】もう配色デザインには迷わない！すごい無料カラーパレットツール66個まとめ - PhotoshopVIP

配色はあらゆるデザインの基本となる、とても重要な要素のひとつで、配色を選ぶときは細心の注意が必要となります。苦手な人も多い配色えらびをより手軽に行うことができる、無料カラーツールをまとめて今回はご紹介します。直感選ぶだけで配色を決めることができ、デザイン制作で覚えておきたいツールが揃っています。

Cocoonカスタマイズ：バッジの大きさを変更する。

Cocoonのバッジの大きさを変更していきます。

手順は以下の通り。

手順

バッジの大きさを変える方法

STEP1
CSSをコピペ
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;
}

Copy

「外観→テーマエディター→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;

Copy

以上になります。

自分のオリジナルバッジを作って行きましょー！