くるみ
ということで今回は
- 横長四角形のCocoonのSNSボタンがあまり気に入ってない
- もっとクリックされるシェア・フォローボタンにしたい
という方に向けて、SNSシェア・フォローボタンをシンプルに小さくするカスタマイズ方法をまとめました。
本記事を参考にすれば、初心者の方でもコードをコピペするだけでおしゃれなカスタマイズを再現することができます。
お品書き
SNSボタンの完成イメージ
トップシェアボタン
before
after
ボトムシェア・フォローボタン
before
after
調整した点は以下の通りです。
- 丸くすることでより可愛いデザインに
- スペースを設けることで記事を圧迫しない
- 透明度を上げて落ち着いた色合いに
デフォルトのSNSボタンだと色合い的に目がチカチカしてしまい、どうしてもメインコンテンツの邪魔をしてしまいます。
そこで透明度を下げ落ち着いた色にし記事に馴染ませることにより、よりさりげなくシェア・フォローを促すことができます。
くるみ

「Cocoon設定」→「スキン」から設定可能なのでお試しあれ。
CocoonのSNSシェア・フォローボタンのカスタマイズ方法
今回のカスタマイズはCSSを追記するだけで完成するものかつとても簡単なものなので安心してくださいね。肩の力を抜いてやっていきましょう。
バックアップは忘れずにしておこう
早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。
「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

CSSを追加する
以下のどれかの方法でCSSのコードをコピペします。
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
くるみ
「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

コードはこちら
/************************************
** トップシェアボタン
************************************/
.sns-share.ss-high-and-low-lc a .social-icon {
font-size: 22px;
}
/************************************
** ボトムシェアボタン
************************************/
@media screen and (min-width:481px) {
.sns-share, .sns-follow {
width: 70%;
margin-right: auto;
margin-left: auto;
}
}
.sns-share-buttons {
justify-content: space-evenly;
}
.sns-share-buttons a {
font-size: 1.25em;
border-radius: 50%;
width: 50px!important;
height: 50px;
opacity: .6;
}
@media screen and (max-width:834px) {
.ss-bottom .sns-share-buttons a {
font-size: 1.3em;
}
}
.sns-share-buttons a .button-caption {
display: none!important;
}
.sns-share-message, .sns-follow-message {
color: #bbb;
margin-bottom: 30px;
position: relative;
}
.sns-share-message:before, .sns-follow-message:before {
content: '';
position: absolute;
display: inline-block;
width: 30px;
height: 2px;
left: 50%;
bottom: -5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 3px;
background-color: #c0c0c0;
}
/************************************
** ボトムフォローボタン
************************************/
.sns-follow-buttons {
justify-content: space-evenly;
}
.sns-follow-buttons a {
font-size: 1.7em;
border-radius: 50%;
width: 50px;
height: 50px;
opacity: .6;
}
@media screen and (max-width:834px) {
.ss-bottom .sns-follow-buttons a {
font-size: 1.3em;
}
}
/************************************
** トップシェアボタン
************************************/
.sns-share.ss-high-and-low-lc a .social-icon {
font-size: 22px;
}
/************************************
** ボトムシェアボタン
************************************/
@media screen and (min-width:481px) {
.sns-share, .sns-follow {
width: 70%;
margin-right: auto;
margin-left: auto;
}
}
.sns-share-buttons {
justify-content: space-evenly;
}
.sns-share-buttons a {
font-size: 1.25em;
border-radius: 50%;
width: 50px!important;
height: 50px;
opacity: .6;
}
@media screen and (max-width:834px) {
.ss-bottom .sns-share-buttons a {
font-size: 1.3em;
}
}
.sns-share-buttons a .button-caption {
display: none!important;
}
.sns-share-message, .sns-follow-message {
color: #bbb;
margin-bottom: 30px;
position: relative;
}
.sns-share-message:before, .sns-follow-message:before {
content: '';
position: absolute;
display: inline-block;
width: 30px;
height: 2px;
left: 50%;
bottom: -5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 3px;
background-color: #c0c0c0;
}
/************************************
** ボトムフォローボタン
************************************/
.sns-follow-buttons {
justify-content: space-evenly;
}
.sns-follow-buttons a {
font-size: 1.7em;
border-radius: 50%;
width: 50px;
height: 50px;
opacity: .6;
}
@media screen and (max-width:834px) {
.ss-bottom .sns-follow-buttons a {
font-size: 1.3em;
}
}
ここまれ来ればカスタマイズは終了。お疲れ様です。
くるみ
CSSの変更が反映されない場合の対処法
「CSSを追記して保存したにも関わらず反映されないぞ…」となった場合は、以下が原因であることが多いです。- キャッシュ系プラグイン
- プラウザキャッシュ
キャッシュ系プラグインを疑う
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は以下のショートカットキーで削除できます。
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
まとめ
他にも、今回のSNSボタンのデザインと調和のとれたCocoonカスタマイズをまとめているのでぜひ。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
はじめまして。
cocoonでイノセンスを使わせていただいております。
かわいいデザインですごく気に入っています。
SNSシェアボタンでFacebookとLINEのボタンを押すと、自分のログイン済みのアプリに飛ばず、ログイン画面が出てきてしまうのですが、解決方法はありますでしょうか?
匿名さん
>ログイン済みのアプリ
ということはモバイルでの話でしょうか。
でしたらそれは見ているユーザー次第で挙動が変わってくるものなので正直改善のしようが無いですね…
というのも、シェアボタンを押した際にアプリに飛ぶことがありますが、それはそのブログを閲覧していたブラウザで過去に(そのSNS)でログインしたことがあるケースの挙動なためです。
要するにユーザー次第なので運営者の方ではどうすることもできない状態です…
お力になれず申し訳ありません。
アイコンの形がマルではなく四角形になってしまうのですが、、、