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

Customize

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

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

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

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

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

ただし…

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

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

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

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

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

今回は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
などからピックアップします。

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

Luxeritasのシェアボタン変更まとめ

このブログのシェアボタンはブラック50%を乗算した色にしています。
※執筆時

どちらかと言うと「和風カラー」ですね。

このブログ用にしたものでは無い為、必要性の有無は疑問ですが…

いずれこのブログ用にカラーを設定してみたいと思います。

cocoonで運営しているブログも色変更していますが、

コードは違ってもやり方は同じです。



Fatal error: Uncaught Error: Call to undefined function WP_Optimize() in /home/door-navi/pix524.net/public_html/wp-content/plugins/wp-optimize/cache/file-based-page-cache-functions.php:136 Stack trace: #0 [internal function]: wpo_cache('<!DOCTYPE html>...', 9) #1 /home/door-navi/pix524.net/public_html/wp-includes/functions.php(4339): ob_end_flush() #2 /home/door-navi/pix524.net/public_html/wp-includes/class-wp-hook.php(286): wp_ob_end_flush_all('') #3 /home/door-navi/pix524.net/public_html/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters('', Array) #4 /home/door-navi/pix524.net/public_html/wp-includes/plugin.php(465): WP_Hook->do_action(Array) #5 /home/door-navi/pix524.net/public_html/wp-includes/load.php(954): do_action('shutdown') #6 [internal function]: shutdown_action_hook() #7 {main} thrown in /home/door-navi/pix524.net/public_html/wp-content/plugins/wp-optimize/cache/file-based-page-cache-functions.php on line 136