![](https://ekubo-blog.com/wp-content/uploads/2023/07/women-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women-150x150.jpg)
SNSのボタンがカラフルすぎるんですが、どうにかできないですか?
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
かわいくできますよ~
CocoonのSNSシェアボタン・フォローボタンをかわいくしたいと思われている方に向けて、ワードプレス初心者のアラフィフ女子がどのようにカスタマイズを行ったかを備忘録として残しおきます。
わたしは現在は、有料プランのSwellを使ってますが、過去に無料テーマのCocoonを使ってました。
デフォルトのSNSボタンだと原色でいかにも~って感じで気になっていたのですが、カスタマイズすることで自分のサイトにマッチするようになって大満足です!
わたしが参考にさせていただいたサイトも紹介しています。
簡単なので、SNSがボタンがカラフル過ぎると思われている方の参考になると嬉しいです。
CocoonのSNSシェアボタン・フォローボタンのカスタマイズでかわいく?
デフォルトから白抜きへ変更すると↓・・・
![SNSボタン](https://ekubo-blog.com/wp-content/uploads/2022/11/SNS-4.jpg)
![SNSボタン](https://ekubo-blog.com/wp-content/uploads/2022/11/SNS-4.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women1-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women1-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women1-150x150.jpg)
白抜きにするだけでも、イメージが変わりますね。
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
『Cocoon設定』から簡単に白抜きへの変更はできます。
SNSシェアボタン・フォローボタンをデフォルトから白抜きへする方法
ダッシュボードのCocoon設定に進んで、SNSシェア・SNSフォローの設定を一部変更します。
![](https://ekubo-blog.com/wp-content/uploads/2022/11/2022-11-03_09h14_25-1024x258.png)
![](https://ekubo-blog.com/wp-content/uploads/2022/11/2022-11-03_09h14_25-1024x258.png)
SNSボタン、SNSフォローそれぞれのタブを開いたら、ボタンカラーという文字を探して、そこの設定をブランドカラー⇨ブランドカラー(白抜き)に変更するだけです。
(変更箇所はSNSシェアボタンに2箇所、SNSフォローに1箇所のトータル3箇所あります)
![](https://ekubo-blog.com/wp-content/uploads/2022/11/2022-11-03_09h15_29.png)
![](https://ekubo-blog.com/wp-content/uploads/2022/11/2022-11-03_09h15_29.png)
SNSシェアボタン・フォローボタンを四角から丸へする方法
さらに手を加えて四角から丸に変えていきます。
丸に変更すると・・・↓
![SNSボタン](https://ekubo-blog.com/wp-content/uploads/2022/11/SNS-1.jpg)
![SNSボタン](https://ekubo-blog.com/wp-content/uploads/2022/11/SNS-1.jpg)
見た目が優しい印象に!
白抜きだとさらにかわいい感じに♪
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
最終的にこう↓なりました♪
![SNSボタン](https://ekubo-blog.com/wp-content/uploads/2022/11/SNS-2.jpg)
![SNSボタン](https://ekubo-blog.com/wp-content/uploads/2022/11/SNS-2.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women1-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women1-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women1-150x150.jpg)
ボタンがかわると印象がぜんぜん違いますね~
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
下記のサイトを参考にしました!
↑上記のサイトを参考にボタンを丸くしたあとにCocoon設定でボタンを白抜きに変更しました!
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
上記のサイトのおすすめポイントは、SNSボタンの透明度を下げてくれていること!
透明度をさげることで、SNSボタンが悪目立ちせず、記事に馴染みやすくなってます♪
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women-150x150.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/women-150x150.jpg)
CSSへの追加?わたしにもできる?
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
カスタマイズする前にはバックアップは忘れずにとっておいてくださいね。
はじめはCSSへの追加など、ハードル高く思えますが、バックアップをとったあとに、いろいろなブログを参考にしながら、チャレンジしていくと、なんとなく使えるようになってきます。
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
![](https://ekubo-blog.com/wp-content/uploads/2023/07/ekubo-3-150x150.png)
とにかく行動!時々失敗もあるけど・・・自分好みのサイトに変化していくのは、とっても楽しいですよ~
![](https://ekubo-blog.com/wp-content/uploads/2023/05/preparation-300x158.jpg)
![](https://ekubo-blog.com/wp-content/uploads/2023/05/preparation-300x158.jpg)