Luxeritasのシェアボタンの色変更！SNSボタンのカスタマイズ！ボタンの色を変えよう！

SNSシェアボタンの色を変えたいと思った事はありませんか？

スタンダードカラーだからこそ認知度が高い！

どこも同じ色だから馴染みがある。

馴染みがあるからボタンをクリックしやすくなる！

スタンダードカラーはそのような利点があります。

ただし…

場合によっては目がいき過ぎてしまう…

と言うような難点も無きにしも非ず。

あえて目立たせない考え方もあります。

または、ブログのスタイルに合わせてオリジナリティを出したい！

と言うような考えもあります。

今回はLuxeritasのシェアボタンの色を変えるカスタマイズ。

必要性があったら試してみてください。

Contents

1. Luxeritasのシェアボタン
2. シェアボタンのカラーカスタマイズ
- 2.1. Luxeritasシェアボタンの色変更
3. Luxeritasのシェアボタン変更まとめ

Luxeritasのシェアボタン

Luxeritasのシェアボタンは7種類から選べます。

SNSボタンバリエーション

通常ボタン
カラータイプ
ホワイトタイプ
可変幅フラットタイプ（カラー）
可変幅フラットタイプ（ホワイト）
名無しアイコンタイプ（カラー）
名無しアイコンタイプ（ホワイト）

いずれもどのブログやサイトでもお馴染みのスタイルです。

通常はこれらのカスタマイズカラーで充分でしょう。

シェアボタンのカラーカスタマイズ

SNSシェアボタンはそれぞれのブランドカラーに設定されています。

ブランドカラーを著しく変える事で判別しにくくなる難点もありますね？

なぜ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; }

オリジナルの色を変更すれば良いだけです。

使用したいスタイルのオリジナルコードを探す必要があります。

Luxeritasのstylesから
sns-flat.css
sns-icon.css
などからピックアップします。

これらを変更する事でアイコンの色なども変更可能です。