Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの文字装飾バッジの色やデザインをカスタマイズ

スポンサーリンク
カスタマイズ

Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。

投稿編集の「スタイル」

 

文字装飾の一覧は以下にまとめています。

 

この記事はバッジのカスタマイズ方法です。

 

スポンサーリンク

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

バッジ

Before

スタイル・バッジ

スタイル・バッジ

初期値の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;
}
.badge{background-color: #f39800;}
.badge-red {background-color: #e60033;}
.badge-pink {background-color: #e95295;}
.badge-purple {background-color: #884898;}
.badge-blue {background-color: #0095d9;}
.badge-green {background-color: #3eb370;}
.badge-yellow {background-color: #ffd900;}
.badge-brown {background-color: #954e2a;}
.badge-grey {background-color: #949495;}

 

以降、カスタマイズに必要な部分のみを追記してご利用下さい。

色を変える

薄い色にしてみる

バッジ:カスタマイズ

.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;}

ボタンの色を薄くして文字が見えにくい場合は以下のように文字色を追記して下さい。

.badge-yellow {
background-color: #edde8a;
color:#000; /*文字色*/
}

バッジ:カスタマイズ

 

枠の形状を変える

少し大きくします

バッジ:カスタマイズ

.badge{
padding: 5px;
border-radius: 5px;
font-size: 13px;
}

 

枠線を付ける

バッジ:カスタマイズ

.badge{
padding: 5px;
border-radius: 5px;
font-size: 13px;
border: solid 2px #888;
}

 

その他の文字装飾

その他、文字装飾のカスタマイズは以下をご覧ください。

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

コメント

タイトルとURLをコピーしました