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

スタイルシート (style.css）の編集は必ず子テーマで行って下さい。
→Simplicity2の子テーマ

カスタマイズ例

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

【カスタマイズ後】

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

スタイルシートはWordpress管理画面左側にある「外観」→「テーマの編集」→「スタイルシート（Style.css）」から編集・更新、またはFTPソフトでサーバからダウンロードして編集・アップロードという手順で変更することができます。
僕は、これくらいの軽い編集であれば、Wordpressの管理画面内でやってしまうことが多いです。

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

/************************************
** 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;
}

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

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

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

/* ホバー時 */
.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アイコンのサイズ */
.sns-group-viral ul.snsb li a{
font-size: 30px;
}

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

/* 各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;
}