【Cocoonカスタマイズ】SNSボタンの配色を変更する

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

Cocoonのデザインをカスタマイズしてみよう大作戦。
今回は、SNSボタンの配色を変更したいと思います。

ぱぷれさん
ぱぷれさん
カスタマイズは自己責任でおねがいします。

SNSボタン

SNSボタンとは、SNSシェアボタンとSNSフォローボタンのことをどちらもひっくるめてSNSボタンと私は呼んでおります。

SNSシェアボタン

SNSフォローボタン

こんな感じのボタン群のことですね。
これの配色をちょっと変更してみたいと思います。

CocoonのSNSボタンスタイル変更方法

Cocoonでは、SNSボタンのスタイル変更は設定画面から行なえます。
設定画面から「SNSシェア」「SNSフォロー」のタブを開くと、

  • モノクロ
  • ブランドカラー
  • ブランドカラー(白抜き)

の3種類から選べます。

ブランドカラータイプボタンの背景色変更

今回は、この中のブランドカラータイプを変更します。

ブランドカラーを設定すると、このような感じになります。
カラフルでかわいいんですが、ちょっと主張が激しすぎる配色にどうしてもなってしまっています。各ブランドカラーなので、それは当たり前なんですけれど。

なので、ちょっとだけトーンを落とした色に変えてみました。

こうなります。
少し色合いを淡くしただけなのであまり違いがないようにも思えますが、そのへんは自由に変えられます。

CSSコード

以下のコードをコピーし、CSSに追加してください。

/* SNSボタン ブランドカラー設定 */
.bc-brand-color.sns-share .twitter-button, .bc-brand-color.sns-follow .twitter-button {
  background-color: #6fb0d1; }

.bc-brand-color.sns-share .facebook-button, .bc-brand-color.sns-follow .facebook-button {
  background-color: #697996; }

.bc-brand-color.sns-share .hatebu-button, .bc-brand-color.sns-follow .hatebu-button {
  background-color: #7b97b2; }

.bc-brand-color.sns-share .google-plus-button, .bc-brand-color.sns-follow .google-plus-button {
  background-color: #d87c75; }

.bc-brand-color.sns-share .pocket-button, .bc-brand-color.sns-follow .pocket-button {
  background-color: #e58f9d; }

.bc-brand-color.sns-share .line-button, .bc-brand-color.sns-follow .line-button {
  background-color: #6ab76a; }

.bc-brand-color.sns-share .feedly-button, .bc-brand-color.sns-follow .feedly-button {
  background-color: #49a55d; }

.bc-brand-color.sns-share .rss-button, .bc-brand-color.sns-follow .rss-button {
  background-color: #e28966; }

コードの変更

各ボタンは「twitter-button」のように種類が書かれています。
該当するSNSのカラーコードを書き換えてしまえば、好きな色に設定することが出来ます。

また、前述のSNSボタンはシェアボタンデフォルト+フォローデフォルト(FeedlyとRSS)のみ変更していますが、それ以外のボタンは以下のコードのカラーコードを書き換えて追加してください。

.bc-brand-color.sns-share .website-button, .bc-brand-color.sns-follow .website-button {
  background-color: #002561;
}
.bc-brand-color.sns-share .instagram-button, .bc-brand-color.sns-follow .instagram-button {
  background-color: #405de6;
}
.bc-brand-color.sns-share .pinterest-button, .bc-brand-color.sns-follow .pinterest-button {
  background-color: #bd081c;
}
.bc-brand-color.sns-share .youtube-button, .bc-brand-color.sns-follow .youtube-button {
  background-color: #cd201f;
}
.bc-brand-color.sns-share .flickr-button, .bc-brand-color.sns-follow .flickr-button {
  background-color: #111;
}
.bc-brand-color.sns-share .amazon-button, .bc-brand-color.sns-follow .amazon-button {
  background-color: #ff9900;
}
.bc-brand-color.sns-share .rakuten-room-button, .bc-brand-color.sns-follow .rakuten-room-button {
  background-color: #c61e79;
}
.bc-brand-color.sns-share .github-button, .bc-brand-color.sns-follow .github-button {
  background-color: #4078c0;
}

カラーコードの調べ方

カラーコードは画像ソフトなどを使って調べるか、専用のサイトがありますのでそちらで調べるといいと思います。

HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

まとめ

SNSボタンがちょっとカラフルすぎて他とごっちゃになってしまう感があったので、ちょっとだけ変更してみました。
何かもうちょっと違う感じにしたいような気もしなくはないのでまたいずれ考えますが、やり方としてはこんな感じですよ、ということで。

コメント

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