CocoonのSNSシェア・フォローボタンを小さく丸くする方法

2023/10/24

本サイトにはプロモーションが含まれます

2022年3月更新
ブログのテーマをCocoonから SWELL へ移行しました。記事の内容は有効ですが、実装はしていません。ご了承ください。

こんにちは。sabo（ sabo_nochihare）です。

WordPressの無料テーマ「Cocoon」をお使いで、SNSシェア・フォローボタンの存在感が気になっている方いませんか？

無料でこれだけ便利な設定がそろっているCocoonですが、ブログにこだわりが出てくると個別にカスタマイズしたい箇所も多くなります。

この記事ではCocoonのSNSシェアボタンを小さくする方法を説明します。

この記事を書いた人

sabo

・ブログ開始：2021年5月
・収益化開始：2022年1月
・2022年の確定収益：約400万円（詳細はこちら）
・使用しているテーマ： SWELL

　 Twitter　　 Contact

ブログの運営記録

テーマを SWELL に変えた10ヶ月目から作業時間は2/3、収益は2倍以上に！

収益増に役立った本

2,310円(税込)

詳細

~~3,980円(税抜)~~
→ 550円(税込)

詳細

3,800円(税抜)
→ 無料！

詳細

クリックできる目次

CocoonのSNSシェア・フォローボタンを小さくする方法

CocoonのSNSシェア・フォローボタンを小さくするには、コードをスタイルシート（style.css）に書き込むことで解決します。

ここから、設定の手順を画面キャプチャ付きで解説します。

１．Cocoonの設定を変更

まずは、Cocoonの設定を見直しておきましょう。

▼「Cocoon設定」→「SNSシェア」をクリック

▼「カラム数」をボタンの数に合わせて設定

▼「ロゴ・キャプションの配置」は左右を選択

設定はトップシェアボタン・ボトムシェアボタンとも忘れず行ってください

２．子テーマのスタイルシートにCSSコードを追加

次は、SNSシェア・フォローボタンのデザインや大きさを変更します。

sabo

コピペで簡単に設定できます！

▼WordPressメニューの「外観」→「テーマエディター」をクリック

▼以下のコードをコピーし、スタイルシート（style.css）の「子テーマ用のスタイルを書く」部分にペースト

編集するテーマはかならず「Cocoon Child」を選択！

#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; /*ボタンの高さ（（カスタマイズを！）*/
}

アイコンのサイズや間隔は、私なりに試して「これがベストかなー？」という値を設定しています

▼「ファイルを更新」をクリック