2022年3月更新
ブログのテーマをCocoonから SWELL へ移行しました。記事の内容は有効ですが、実装はしていません。ご了承ください。
こんにちは。sabo( sabo_nochihare)です。
WordPressの無料テーマ「Cocoon」をお使いで、SNSシェア・フォローボタンの存在感が気になっている方いませんか?
![](https://nochihareblog.com/wp-content/uploads/2021/06/1D78EE87-2B06-4410-A3F8-6431AA06076B.jpeg)
無料でこれだけ便利な設定がそろっているCocoonですが、ブログにこだわりが出てくると個別にカスタマイズしたい箇所も多くなります。
この記事ではCocoonのSNSシェアボタンを小さくする方法を説明します。
- 1ヶ月目:420PV / 発生定収益48円
- 2ヶ月目:601PV / 発生定収益3円
- 3ヶ月目:1,652PV / 発生定収益280円
- 4ヶ月目:2,668PV / 発生収益361円
- 5ヶ月目:5,312PV / 発生収益366円
- 10ヶ月目:20,172PV / 発生収益10,9921円
テーマを SWELL に変えた10ヶ月目から作業時間は2/3、収益は2倍以上に!
CocoonのSNSシェア・フォローボタンを小さくする方法
CocoonのSNSシェア・フォローボタンを小さくするには、コードをスタイルシート(style.css)に書き込むことで解決します。
ここから、設定の手順を画面キャプチャ付きで解説します。
1.Cocoonの設定を変更
まずは、Cocoonの設定を見直しておきましょう。
▼「Cocoon設定」→「SNSシェア」をクリック
![](https://nochihareblog.com/wp-content/uploads/2021/06/DCDEDD54-B744-4D9E-A9C6-7779DEA8561E.jpeg)
▼「カラム数」をボタンの数に合わせて設定
![](https://nochihareblog.com/wp-content/uploads/2021/06/B7958536-C888-4495-B799-E4F8EFA807C5.jpeg)
▼「ロゴ・キャプションの配置」は左右を選択
![](https://nochihareblog.com/wp-content/uploads/2021/06/D2E6A17F-CCF9-41AC-B46C-B40167C9D658.jpeg)
2.子テーマのスタイルシートにCSSコードを追加
次は、SNSシェア・フォローボタンのデザインや大きさを変更します。
![](https://nochihareblog.com/wp-content/uploads/2022/07/sabo-profile-icon-150x150.jpeg)
コピペで簡単に設定できます!
▼WordPressメニューの「外観」→「テーマエディター」をクリック
![](https://nochihareblog.com/wp-content/uploads/2021/06/9C8FC767-2609-47BB-9B25-5CB8AC9040B3.jpeg)
![](https://nochihareblog.com/wp-content/uploads/2021/06/9C8FC767-2609-47BB-9B25-5CB8AC9040B3.jpeg)
▼以下のコードをコピーし、スタイルシート(style.css)の「子テーマ用のスタイルを書く」部分にペースト
![](https://nochihareblog.com/wp-content/uploads/2021/06/C87C1385-FEB4-4A94-8536-0DED1834BB0D.jpeg)
![](https://nochihareblog.com/wp-content/uploads/2021/06/C87C1385-FEB4-4A94-8536-0DED1834BB0D.jpeg)
#main .button-caption {
display: none; /*キャプション非表示*/
}
/*SNSシェアボタン*/
.sns-share-message{
font-weight: bold; /*太字にする*/
color: #875d5b; /*文字色を指定*/
}
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: center; /*中央揃え*/
}
.sns-share-buttons a {
border-radius: 50%; /*アイコンを丸くする(カスタマイズを!)*/
font-size: 20px; /*アイコンのサイズ(カスタマイズを!)*/
margin: 0 5px; /*ボタン同士の間隔(カスタマイズを!)*/
}
#main .sns-share a {
width: 40px; /*ボタンの横幅(カスタマイズを!)*/
height: 40px; /*ボタンの高さ(カスタマイズを!)*/
}
/*SNSフォローボタン*/
.sns-follow-message{
font-weight: bold; /*太字にする*/
color: #875d5b; /*文字色を指定*/
}
.sns-follow-buttons {
justify-content: center; /*中央揃え*/
}
.sns-follow-buttons a {
border-radius: 50%; /*アイコンを丸くする(カスタマイズを!)*/
font-size: 20px; /*アイコンのサイズ(カスタマイズを!)*/
margin: 0 5px; /*ボタンの間隔(カスタマイズを!)*/
}
#main .sns-follow a {
width: 40px; /*ボタンの横幅(カスタマイズを!)*/
height: 40px; /*ボタンの高さ((カスタマイズを!)*/
}
▼「ファイルを更新」をクリック
![](https://nochihareblog.com/wp-content/uploads/2021/06/FC5F9736-4CBF-4C59-83DF-BBBB8E888281.jpeg)
![](https://nochihareblog.com/wp-content/uploads/2021/06/FC5F9736-4CBF-4C59-83DF-BBBB8E888281.jpeg)
▼記事を表示し、SNSシェア・フォローボタンが小さく丸くなっていれば完了
![](https://nochihareblog.com/wp-content/uploads/2021/06/CDCFA6D5-115C-4B04-87EE-82DA1C33581B.jpeg)
![](https://nochihareblog.com/wp-content/uploads/2021/06/CDCFA6D5-115C-4B04-87EE-82DA1C33581B.jpeg)
あの、存在感のある四角いSNSボタンが控えめでオシャレな丸いアイコンになってる!
まとめ:カスタマイズで読みやすい記事に!
この記事では、CocoonのSNSシェア・フォローボタンを小さく丸くする方法を説明しました。
ブログは読者に読んでもらって初めて価値があります。
デザインをカスタマイズすることで、読者がストレスなく読みやすい記事やブログにしたいですね。
![](https://nochihareblog.com/wp-content/uploads/2021/06/john-schnobrich-FlPc9_VocJ4-unsplash-300x200.jpg)
![](https://nochihareblog.com/wp-content/uploads/2021/06/john-schnobrich-FlPc9_VocJ4-unsplash-300x200.jpg)