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

ワードプレス
この記事は約7分で読めます。

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

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

マウスカーソル

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

スポンサーリンク

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 {
  background-color: #1da1f2;
}

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

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

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

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

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

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

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

.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 {
  background-color: #e6f5fe;
}

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

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

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

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

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

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

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

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

修正内容:

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

あとがき

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

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

【ワードプレス】コクーンのSNSボタンがずれていたので、整列させました
ボクは WordPress(ワードプレス)にテーマ「Cocoon(コクーン)」を導入しています。 SNSボタンの配置がずれていて気になったので、直してみました。 なお SNSボタンの機能としては、何も問題がありません。 本文下のSNSボタン 「シェアする」ボタンと「フォローする」ボタンは...

コメント

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