SimplicityのSNSシェアボタンを、よりシンプルにカスタマイズする方法

Simplicityでは、投稿の上下に、↓このようなSNSのシェアボタンを設置することができます。

今回は、このSNSのシェアボタンのデザインをカスタマイズする方法を紹介します。
編集するのは、スタイルシート（CSS）のみです。

カスタマイズ例

先に、僕のカスタマイズ例を載せておきます。

【デフォルト：バイラルタイプ（高速）】

【カスタマイズ後】

色付きのボックスと、各SNS名のテキストを非表示にし、カウントはそのまま残しています。
そしてコンパクトになったので、SNSシェアボタン全体を右寄せにしています。

色を統一したので、目立たなくなりましたが、スッキリしている方が好きなので気に入っています。

SNSシェアボタンのデザインをカスタマイズする

事前に、Wordpress管理画面左側にある「外観」→「カスタマイズ」→「SNS」から「シェアボタンのタイプ（PC）」を、「バイラルタイプ（高速）」に設定しておいて下さい。

モバイル表示も同じにする場合は、「シェアボタンのタイプ（モバイル）」も「バイラルタイプ」に設定して下さい。

シンプルなデザインに変更する

子テーマ（Simplicity2 child）のスタイルシート (style.css）を開き、以下のコードを貼り付けて下さい。

/************************************
** SNSシェアボタン
************************************/
.sns-group-viral{
margin-left: auto;
width: 280px;
}
.sns-group-viral ul.snsb li{
width:auto;
}
.sns-group-viral ul.snsb li a{
font-size: 21px;/* 各SNSアイコンのサイズ */
color:#bbb;/* 各SNSアイコンの色 */
width: 50px;
height: 35px;
}
/* 各SNSの名前を非表示 */
.icon-twitter::after,
.icon-facebook::after, 
.icon-hatena::after, 
.icon-pocket::after,
.icon-feedly::after{
display: none;
}
/* 各SNSボタンの色 */
ul.snsbs a.twitter-btn-icon-link,
ul.snsbs a.facebook-btn-icon-link,
ul.snsbs a.hatena-btn-icon-link,
ul.snsbs a.pocket-btn-icon-link,
ul.snsbs a.feedly-btn-icon-link{
background-color:#fff;
}

このサンプルでは、Twitter、Facebook、はてなブックマーク、Pocket、Feedlyの5つのサービスのボタンについて記述しています。

これにGoogle+を追加したい場合は、「/* 各SNSの名前を非表示 */」、「/* 各SNSボタンの色 */」にGoogle+の記述（.google-plus-btn-icon-link）を付け足して下さい。

逆に、使っていないものがあれば消して下さい。

マウスホバー時に、アイコンの色を各SNSのイメージカラーにする

マウスホバー時に、色を付けるカスタマイズです。

ボタンのデザインをシンプルにしたので、マウスをホバーしたときに、SNSシェアボタンだと分かるように色を付けました。

【サンプル：Twitterホバー時】

【サンプル：Facebookホバー時】

ホバー時に色を付けるカスタマイズを施すには、以下のCSSコードをスタイルシートに貼り付けて下さい。

/* ホバー時 */
.sns-group-viral ul.snsb li.twitter-btn-icon a:hover{
 color:#55acee;
}
.sns-group-viral ul.snsb li.facebook-btn-icon a:hover{
 color:#3b5998;
}
.sns-group-viral ul.snsb li.hatena-btn-icon a:hover{
 color:#3C7DD1;
}
.sns-group-viral ul.snsb li.pocket-btn-icon a:hover{
 color:#EE4257;
}
.sns-group-viral ul.snsb li.feedly-btn-icon a:hover{
 color:#87bd33;
}

その他のサンプル① アイコンサイズを大きくする

各SNSアイコンのサイズを30pxにしました。

/* 各SNSアイコンのサイズ */
.sns-group-viral ul.snsb li a{
font-size: 30px;
}

その他のサンプル② グレーのボタンに白抜きアイコンのデザイン

背景色を薄いグレーにして、各SNSアイコンを白にしています。

/* 各SNSアイコンの色 */
.sns-group-viral ul.snsb li a{
color:#fff;
}
/* 各SNSボタンの色 */
ul.snsbs a.twitter-btn-icon-link,
ul.snsbs a.facebook-btn-icon-link,
ul.snsbs a.hatena-btn-icon-link,
ul.snsbs a.pocket-btn-icon-link,
ul.snsbs a.feedly-btn-icon-link{
background-color:#bbb;
}

さいごに

ブログのSNSシェアボタンは、各SNSのイメージカラーを使ったものが多く、目立つデザインが多いです（シェアボタンなので目立つのが当たり前ですが）。

僕は控えめなデザインにしたかったので、このようなカスタマイズをしました。

同様に、SimplicityのSNSフォローボタンを丸くして、色を変更する方法という記事で、SimplicityのSNSフォローボタンのカスタマイズも紹介しています。