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

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

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

カスタマイズ例

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

【デフォルト（ボタンカラー：モノクロ）】

【カスタマイズ後】

編集がしやすいので、Cocoon設定でボタンカラーを「モノクロ」に設定しています。

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

【記事タイトルとSNSシェアボタン】

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

まずはこのサイトで適用しているシェアボタンのデザインのCSSコードを説明します。

事前に、Wordpress管理画面左側にある「Cocoon設定」→「Cocoon設定」→「SNSシェア」タブから「ボタンカラー」を、「モノクロ」に設定しておいて下さい。

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

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

/************************************
** SNSシェアボタン
************************************/
/* 各SNSボタン共通 */
#main .sns-buttons a{
 color:#5d5d5d;
 background-color:#fff;
 width:2.5em;
 margin-left:0.5em;
}
/* テキストを非表示 */
.sns-share.ss-high-and-low-lc a .button-caption{
 display:none;
}
/* 全体を右寄せ */
.sns-share-buttons{
justify-content:flex-end;
}

文字色を変更したい場合は、「#main .sns-buttons a」という箇所の「color:#5d5d5d;」の値を変更してください。

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

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

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

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

/* ホバー時 */
.sns-buttons .icon-twitter:hover{
color:#55acee;
}
.sns-buttons .icon-facebook:hover{
color:#3b5998;
}
.sns-buttons .icon-hatena:hover{
color:#3C7DD1;
}
.sns-buttons .icon-pocket:hover{
color:#EE4257;
}
.sns-buttons .icon-line:hover{
color:#00c300;
}
.sns-buttons .copy-button:hover{
color:#5d5d5d; 
}

このサンプルでは、Twitter、Facebook、はてなブックマーク、Pocket、LINE、リンクコピーの6つのボタンについて記述しています。

これにPinterestとLinkedInを追加したい場合は、同じように追記すればOKです。

シェアボタンのデザインサンプル

デザインサンプルです。コピペして使ってください。
すべて、上の「①シンプルなデザインに変更する」のデザインを元にしています。

このコードを貼り付けてから対象の箇所だけ変更してください。

/************************************
** SNSシェアボタン
************************************/
/* 各SNSボタン共通 */
#main .sns-buttons a{
 color:#5d5d5d;
 background-color:#fff;
 width:2.5em;
 margin-left:0.5em;
}
/* テキストを非表示 */
.sns-share.ss-high-and-low-lc a .button-caption{
 display:none;
}
/* 全体を右寄せ */
.sns-share-buttons{
justify-content:flex-end;
}

背景色をつけて丸くする＋SNSカウント非表示

/* 各SNSボタン共通 */
#main .sns-buttons a {
 color: #f7f7f7;
 background-color: #484848;
 border-radius: 30px;
 width: 2.5em;
 margin-left: .5em;
}
/* SNSカウント非表示 */
.sns-share-buttons a .share-count {
    display: none;
}

マウスホバー時に下線をつける

.sns-buttons a:hover {
 border-bottom: 1px solid #5d5d5d;
}

さいごに

SNSシェアボタンは便利なのですが、なるべく目立たないシンプルなデザインにしたかったので、このようなカスタマイズをしました。
コピペで使ってみてください。

他のカスタマイズがしたいけれどやり方がわからない、という場合はコメントをしていただければ、時間があるときに対応します。