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

カスタマイズ例

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

【カスタマイズ後】

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

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

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

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

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

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

さいごに