SNSシェアボタンの色を変えたいと思った事はありませんか？
スタンダードカラーだからこそ認知度が高い！
どこも同じ色だから馴染みがある。
馴染みがあるからボタンをクリックしやすくなる！
スタンダードカラーはそのような利点があります。
ただし…
場合によっては目がいき過ぎてしまう…
と言うような難点も無きにしも非ず。
あえて目立たせない考え方もあります。
または、ブログのスタイルに合わせてオリジナリティを出したい！
と言うような考えもあります。
今回はLuxeritasのシェアボタンの色を変えるカスタマイズ。
必要性があったら試してみてください。
Luxeritasのシェアボタン
Luxeritasのシェアボタンは7種類から選べます。
通常ボタン
カラータイプ
ホワイトタイプ
可変幅フラットタイプ（カラー）
可変幅フラットタイプ（ホワイト）
名無しアイコンタイプ（カラー）
名無しアイコンタイプ（ホワイト）
いずれもどのブログやサイトでもお馴染みのスタイルです。
通常はこれらのカスタマイズカラーで充分でしょう。
シェアボタンのカラーカスタマイズ
SNSシェアボタンはそれぞれのブランドカラーに設定されています。
ブランドカラーを著しく変える事で判別しにくくなる難点もありますね？
ブログやサイトはそれぞれのデザインがあります。
原色のSNSボタンが並ぶ事で全体のデザインを損なう場合もあります。
例えば「和風」や「パステルカラー」など…
落ち着いたスタイルや淡いイメージのサイトに派手な色があると…
目立ちすぎる場合がありますね？
和風→和のカラーに！
淡いイメージ→パステル調に！
ホワイトのボタンを使えば多少影響を受けなくなりますので
カスタマイズの必要性が無いかもしれません。
それでもやっぱりオリジナリティを出したい！
と言う事で…
SNSシェアボタンの色を変えたいと思います。
Luxeritasシェアボタンの色変更
LuxeritasのシェアボタンのCSSを追加するだけで色は変えられます。
このブログは「名無しアイコンタイプ（カラー）」を使用。
名無しアイコンタイプ（カラー）を例にしています。
オリジナルカラー
.snsf-c .twitter a { background: #55acee; }
.snsf-c .facebook a { background: #3b5998; }
.snsf-c .google a { background: #dd4b39; }
.snsf-c .linkedin a { background: #0479b4; }
.snsf-c .pinit a { background: #bd081c; }
.snsf-c .hatena a { background: #3c7dd1; }
.snsf-c .pocket a { background: #ee4257; }
.snsf-c .line a { background: #00c300; }
.snsf-c .rss a { background: #fe9900; }
.snsf-c .feedly a { background: #87bd33; }オリジナルの色を変更すれば良いだけです。
使用したいスタイルのオリジナルコードを探す必要があります。
sns-flat.css
sns-icon.css
などからピックアップします。
これらを変更する事でアイコンの色なども変更可能です。
Luxeritasのシェアボタン変更まとめ
このブログのシェアボタンはブラック50％を乗算した色にしています。
※執筆時
どちらかと言うと「和風カラー」ですね。
このブログ用にしたものでは無い為、必要性の有無は疑問ですが…
いずれこのブログ用にカラーを設定してみたいと思います。
cocoonで運営しているブログも色変更していますが、コードは違ってもやり方は同じです。
