【Cocoon】SNSボタンの設定方法とカスタマイズ

こんにちは、yuji（@yujiblog）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。

ブログ初心者なりに、SNSシェアボタンをおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、SNSシェアボタンは以下のようなデザインにしています。

このように最小限シンプルなデザインにすることで、限られたスペースで邪魔にならずにボタンを配置できます。

この記事では、以上のようなCocoonのSNSシェアボタンを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》おすすめWordPressテーマ15選

【2024年】おすすめWordPressテーマ15選【初心者向けランキング】

目次をチェック

SNSシェアボタンの設定方法
「カスタマイズが上手くいかない…」と感じる方へ
- 多くの人に読まれる記事を書こう
- アフィリエイト神ツールを使いこなそう

SNSシェアボタンの設定方法

Cocoon/ホワイトラーメンのデフォルトでは、このようなデザインになっています。

また、Cocoonの全体的な基本設定がまだの方は以下の記事をご覧ください。
》Cocoonの使い方とおすすめ初期設定

SNSシェア設定

１．WordPressメニューから「Cocoon設定」を開きます。

２．「Cocoon設定」から「SNSシェア」タブを選択します。

３．設定内容はこちら。

ボトムシェアボタン設定

ボトムシェアボタンの表示
：メインカラムボトムシェアボタンを表示
シェアメッセージ
：初期設定のままでOK（※「シェアメッセージ」の内容は本文には反映されませんが、空欄はNGです。何かしら入力されている状態にして下さい。）

ボトムシェアボタン設定

カラム数
：6列
ロゴ・キャプション配置
：ロゴ・キャプション上下
シェア数の表示
：非表示

その他の項目は、必要に応じて自由に変更しましょう。

以上のように設定できたら「変更をまとめて保存」をクリックします。

スタイルシートにコードをコピペする

１．「外観」から「テーマファイルエディター」に進み「Cocoon Child: スタイルシート (style.css)」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

スタイルシートに入力するときの注意点

編集前に必ずスタイルシートのバックアップを取る
編集するテーマが「CocoonChild」になっていることを確かめる
「@charset “UTF-8”;」から始まる部分（最初から入力されている内容すべて）は消さずに下に追記していく

/************************************
****　SNSシェアボタン
************************************/
.sns-share{
margin: 0 0 24px ;
}
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
letter-spacing:.3em;
border-radius:20px;
border: 0;
padding: 0;
background-color:#3f5569;/*SHARE 背景色の変更はこちら*/
color:#fff;
display: inline-block;
width: 40%;
}
.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {
margin:20px 0 10px 0;
}
.sns-share.ss-high-and-low-lc a .button-caption.button-caption{
display:none;
}
.sns-share-buttons {
padding-right:10%;
padding-left:10%;	
}
.sns-share-buttons a {		
transition:0.5s;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 13%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 25px;
}
@media (max-width:480px){
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
width: 55%;
}
.sns-share-buttons {
padding-right:5%;
padding-left:5%;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 15%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 20px;
}
}

３．コピペができたら「ファイルを更新」をクリックします。