初心者OK！CocoonのSNSシェアボタンをかわいくカスタマイズする方法

わたしもブログを始めたばかりの頃、「SNSボタンがちょっと味気ないな…」って思ってました。

かわいくて、ブログに自然に馴染むデザインにしたくて、いろいろ調べてチャレンジ！

そのときの体験をもとに、CocoonでSNSボタンをおしゃれにカスタマイズする方法をまとめました◎

画像つきで解説しているので、初心者さんでも安心してチャレンジできますよ◎

CocoonのSNSボタンをかわいくカスタマイズする方法

WordPress初心者さんでも、SNSシェアボタンやフォローボタンのデザインをちょっと変えるだけで、ブログ全体の印象がグッとおしゃれになります♪

今回は、わたしも実際にやってみた「CocoonのSNSボタンを白抜き＆丸いデザインにカスタマイズする方法」をステップで紹介していきますね。

• STEP1：白抜きデザインにする
• STEP2：SNSボタンを丸くする
• STEP3：CSSでさらにかわいく調整

STEP1：白抜きデザインにする

まずは、Cocoonの設定からSNSボタンを「白抜きデザイン」に変更してみましょう。

手順はとってもカンタンです。

• 「Cocoon設定」→「SNSシェアボタン」タブを開く
• ボタンカラーを「ブランドカラー（白抜き）」に変更
• 「SNSフォローボタン」も同じ設定に
• 保存して完了！

STEP2：SNSボタンを丸くする

白抜きにしたら、次は「角をまあるく」していきます。

丸みのあるボタンは、やさしくてやわらかい雰囲気になりますよ◎

STEP3：CSSでさらにかわいく調整

最後に、CSSでちょっとだけ見た目を整えると、全体に統一感が出てよりおしゃれに！

• border-radiusで角をまるく
• marginでボタン同士の間隔を調整
• opacityで透け感を出す

CocoonのSNSシェアボタン・フォローボタンをおしゃれにカスタマイズ！

デフォルトのSNSボタン、ちょっと物足りない…と思ったことありませんか？

わたしも最初は「もっとかわいくしたいな〜」と感じて、いろいろ試してきました。

そこで今回は、CocoonのSNSボタンを白抜き＆丸くするカスタマイズ方法を、初心者さん向けにわかりやすく紹介します♪

• STEP1：白抜きデザインに変更
• STEP2：SNSボタンを丸くする
• STEP3：CSSで微調整する方法

STEP1：白抜きデザインに変更

まずは、Cocoonの設定で、ボタンを白抜きスタイルに変更してみましょう！

• 「SNSシェアボタン」設定 →「ブランドカラー（白抜き）」に変更
• 「SNSフォローボタン」も同様に白抜きに
• 保存して完了◎

STEP2：SNSボタンを丸くする

丸いデザインに変えるだけで、柔らかくて親しみやすい印象に♡

Cocoonのテーマは、CSSを追加するだけでこのデザインにできます！

STEP3：CSSを使ってデザイン調整

CSSを追加すると、さらにおしゃれなデザインにできます。

このカスタマイズ方法は、わたしが以前Cocoonを使っていた頃に、いろんなサイトや動画を参考にしながら試したものです。

今はSWELLを使っているので、Cocoonでの実装画面は確認できないのですが、初心者さんでも比較的カンタンにできる内容になっていると思います◎

実際にわたしもこの設定でSNSボタンが可愛くなって、テンション上がった記憶があります。

• ボタンの角をもっと丸くする
• ボタンの間隔を調整する
• 透明度を下げてデザインになじませる

まとめ：SNSボタンをかわいくして、シェアされるブログへ

今回は、CocoonのSNSボタンを白抜き＆丸いデザインにカスタマイズする方法をご紹介しました。

SNSボタンをちょっとカスタマイズするだけで、ブログ全体の印象ってほんとうに変わるんですよね。

おしゃれなデザインは、読者の滞在時間や信頼感にもつながります◎

さらにSNSでシェアされやすくなると、集客UP → 収益UPの流れもつかみやすくなります。

ちなみに、わたしがカスタマイズばかりに夢中だった頃の失敗談もまとめてるので、よかったらこちらもどうぞ◎

ほかにも、Cocoonの見出しやページ送りのカスタマイズもまとめてます♪