【ワードプレス】コクーンのSNSボタンを「ブランドカラー(白抜き)」でも見やすく

ワードプレス
この記事は約14分で読めます。
スポンサーリンク

ボクは、WorpPress(ワードプレス)のテーマとして「Cocoon(コクーン)」を利用しています。

派手な色使いは好みではないので、Cocoon 設定から SNSシェアボタンフォローボタンのボタンカラーを「ブランドカラー(白抜き)」に設定しています。

マウスカーソル

ところが、ボタンの上にマウスカーソルを乗せたときの、色の変化が微妙なのでよく判りません。
誰の目にも判りやすいように、色の変化にメリハリを付けてみました。

(追記)サウンドクラウドの定義も追加しました(2019.12.03)。

SNSボタンのボタンカラー

SNSシェアボタンフォローボタンは、Cocoon 設定からボタンカラーが選べます
ただボタンの上にマウスカーソルを乗せたときは、どの色でも透明度(opacityの値)が変わるだけです。

「モノクロ」や標準のボタンカラーである「ブランドカラー」の場合は、ボタン全体に色がついています。
透明度(opacityの値)を変えるだけで、すぐに色の変化に気付きます。

本文下 パソコン表示(CSS適用前)
本文下 パソコン表示(CSS適用前)

ところが「ブランドカラー(白抜き)」の場合は、ボタンの大部分が白色です。
透明度(opacityの値)を変えるだけでは、ちょっとメリハリがありません。

ということで、スタイル定義(CSS)を修正します。

ボタンの色反転バージョン

マウスカーソルを SNSボタンに乗せると、色が反転するスタイル定義(CSS)を作りました。

ボタンカラー「ブランドカラー(白抜き)」専用のスタイル定義です。
他のボタンカラーのスタイルには影響を与えません。
/* SNSボタンカラー(白抜き)色反転バージョン */
.bc-brand-color-white.sns-share a,
.bc-brand-color-white.sns-follow a {
  border-width: 2px;
}

.bc-brand-color-white.sns-share a:hover,
.bc-brand-color-white.sns-follow a:hover {
  background-color: #333;
  color: #fff;
  opacity: 1;
}

.bc-brand-color-white.sns-share .twitter-button:hover,
.bc-brand-color-white.sns-follow .twitter-button:hover {
  background-color: #1da1f2;
}

.bc-brand-color-white.sns-share .facebook-button:hover,
.bc-brand-color-white.sns-follow .facebook-button:hover {
  background-color: #3b5998;
}

.bc-brand-color-white.sns-share .hatebu-button:hover,
.bc-brand-color-white.sns-follow .hatebu-button:hover {
  background-color: #2c6ebd;
}

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

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

.bc-brand-color-white.sns-share .line-button:hover,
.bc-brand-color-white.sns-follow .line-button:hover {
  background-color: #00c300;
}

.bc-brand-color-white.sns-share .website-button:hover,
.bc-brand-color-white.sns-follow .website-button:hover {
  background-color: #002561;
}

.bc-brand-color-white.sns-share .instagram-button:hover,
.bc-brand-color-white.sns-follow .instagram-button:hover {
  background-color: #405de6;
}

.bc-brand-color-white.sns-share .pinterest-button:hover,
.bc-brand-color-white.sns-follow .pinterest-button:hover {
  background-color: #bd081c;
}

.bc-brand-color-white.sns-share .youtube-button:hover,
.bc-brand-color-white.sns-follow .youtube-button:hover {
  background-color: #cd201f;
}

.bc-brand-color-white.sns-share .linkedin-button:hover,
.bc-brand-color-white.sns-follow .linkedin-button:hover {
  background-color: #0077b5;
}

.bc-brand-color-white.sns-share .note-button:hover,
.bc-brand-color-white.sns-follow .note-button:hover {
  background-color: #41c9b4;
}

.bc-brand-color-white.sns-share .soundcloud-button:hover,
.bc-brand-color-white.sns-follow .soundcloud-button:hover {
  background-color: #ff8800;
}

.bc-brand-color-white.sns-share .flickr-button:hover,
.bc-brand-color-white.sns-follow .flickr-button:hover {
  background-color: #111;
}

.bc-brand-color-white.sns-share .amazon-button:hover,
.bc-brand-color-white.sns-follow .amazon-button:hover {
  background-color: #ff9900;
}

.bc-brand-color-white.sns-share .rakuten-room-button:hover,
.bc-brand-color-white.sns-follow .rakuten-room-button:hover {
  background-color: #c61e79;
}

.bc-brand-color-white.sns-share .slack-button:hover,
.bc-brand-color-white.sns-follow .slack-button:hover {
  background-color: #e01563;
}

.bc-brand-color-white.sns-share .github-button:hover,
.bc-brand-color-white.sns-follow .github-button:hover {
  background-color: #4078c0;
}

.bc-brand-color-white.sns-share .codepen-button:hover,
.bc-brand-color-white.sns-follow .codepen-button:hover {
  background-color: #333;
}

.bc-brand-color-white.sns-share .feedly-button:hover,
.bc-brand-color-white.sns-follow .feedly-button:hover {
  background-color: #2bb24c;
}

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

修正内容:

  • ボタンをすこし目立たせるため、ボーダーを太く(2px)する。
  • ボタンの上にマウスカーソルを乗せたときには、ボタンの色を反転させる

ボタンの背景淡色バージョン

マウスカーソルを SNSボタンに乗せると、背景色が淡い文字色になるスタイル定義(CSS)を作りました。

ボタンカラー「ブランドカラー(白抜き)」専用のスタイル定義です。
他のボタンカラーのスタイルには影響を与えません。
/* SNSボタンカラー(白抜き)背景淡色バージョン */
.bc-brand-color-white.sns-share a,
.bc-brand-color-white.sns-follow a {
  border-width: 2px;
}

.bc-brand-color-white.sns-share a:hover,
.bc-brand-color-white.sns-follow a:hover {
  background-color: #eee;
  opacity: 1;
}

.bc-brand-color-white.sns-share .twitter-button:hover,
.bc-brand-color-white.sns-follow .twitter-button:hover {
  background-color: #e6f5fe;
}

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

.bc-brand-color-white.sns-share .hatebu-button:hover,
.bc-brand-color-white.sns-follow .hatebu-button:hover {
  background-color: #eaf1fa;
}

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

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

.bc-brand-color-white.sns-share .line-button:hover,
.bc-brand-color-white.sns-follow .line-button:hover {
  background-color: #e5ffe5;
}

.bc-brand-color-white.sns-share .website-button:hover,
.bc-brand-color-white.sns-follow .website-button:hover {
  background-color: #e5efff;
}

.bc-brand-color-white.sns-share .instagram-button:hover,
.bc-brand-color-white.sns-follow .instagram-button:hover {
  background-color: #e8ecfb;
}

.bc-brand-color-white.sns-share .pinterest-button:hover,
.bc-brand-color-white.sns-follow .pinterest-button:hover {
  background-color: #fde6e9;
}

.bc-brand-color-white.sns-share .youtube-button:hover,
.bc-brand-color-white.sns-follow .youtube-button:hover {
  background-color: #fbe8e8;
}

.bc-brand-color-white.sns-share .linkedin-button:hover,
.bc-brand-color-white.sns-follow .linkedin-button:hover {
  background-color: #e5f6ff;
}

.bc-brand-color-white.sns-share .note-button:hover,
.bc-brand-color-white.sns-follow .note-button:hover {
  background-color: #ebf9f6;
}

.bc-brand-color-white.sns-share .soundcloud-button:hover,
.bc-brand-color-white.sns-follow .soundcloud-button:hover {
  background-color: #fff3e5;
}

.bc-brand-color-white.sns-share .flickr-button:hover,
.bc-brand-color-white.sns-follow .flickr-button:hover {
  background-color: #f2f2f2;
}

.bc-brand-color-white.sns-share .amazon-button:hover,
.bc-brand-color-white.sns-follow .amazon-button:hover {
  background-color: #fff4e5;
}

.bc-brand-color-white.sns-share .rakuten-room-button:hover,
.bc-brand-color-white.sns-follow .rakuten-room-button:hover {
  background-color: #fbe8f3;
}

.bc-brand-color-white.sns-share .slack-button:hover,
.bc-brand-color-white.sns-follow .slack-button:hover {
  background-color: #fce7f0;
}

.bc-brand-color-white.sns-share .github-button:hover,
.bc-brand-color-white.sns-follow .github-button:hover {
  background-color: #ebf1f8;
}

.bc-brand-color-white.sns-share .codepen-button:hover,
.bc-brand-color-white.sns-follow .codepen-button:hover {
  background-color: #f2f2f2;
}

.bc-brand-color-white.sns-share .feedly-button:hover,
.bc-brand-color-white.sns-follow .feedly-button:hover {
  background-color: #eafaee;
}

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

修正内容:

  • ボタンをすこし目立たせるため、ボーダーを太く(2px)する。
  • ボタンの上にマウスカーソルを乗せたときには、ボタンの背景色を淡い文字色にする

あとがき

これで目立たなかったボタンカラー「ブランドカラー(白抜き)」の SNSボタンが、すこしだけ目立つようになりました。

さらにマウスカーソルを SNSボタンに乗せたときの変化が判りやすくなりました。
しばらくこれで様子を見ることにします。

コメント

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