CocoonのSNSシェアボタン・フォローボタンをカスタマイズでかわいく変身!

当サイトは、アフィリエイト広告を利用しています
sns-buttonをかわいく
読者さん

SNSのボタンがカラフルすぎるんですが、どうにかできないですか?

ちー

かわいくできますよ~

CocoonのSNSシェアボタン・フォローボタンをかわいくしたいと思われている方に向けて、ワードプレス初心者のアラフィフ女子がどのようにカスタマイズを行ったかを備忘録として残しおきます。

わたしは現在は、有料プランのSwellを使ってますが、過去に無料テーマのCocoonを使ってました。

デフォルトのSNSボタンだと原色でいかにも~って感じで気になっていたのですが、カスタマイズすることで自分のサイトにマッチするようになって大満足です!

わたしが参考にさせていただいたサイトも紹介しています。

簡単なので、SNSがボタンがカラフル過ぎると思われている方の参考になると嬉しいです。

CocoonのSNSシェアボタン・フォローボタンのカスタマイズでかわいく?

デフォルトから白抜きへ変更すると↓・・・

SNSボタン
読者さん

白抜きにするだけでも、イメージが変わりますね。

ちー

『Cocoon設定』から簡単に白抜きへの変更はできますよ。

SNSシェアボタン・フォローボタンをデフォルトから白抜きへする方法

ダッシュボードのCocoon設定に進んで、SNSシェア・SNSフォローの設定を一部変更します。

SNSボタン、SNSフォローそれぞれのタブを開いたら、ボタンカラーという文字を探して、そこの設定をブランドカラーブランドカラー(白抜き)に変更するだけです。
(変更箇所はSNSシェアボタンに2箇所、SNSフォローに1箇所のトータル3箇所あります)

SNSシェアボタン・フォローボタンを四角から丸へする方法

さらに手を加えて四角から丸に変えていきます。
丸に変更すると・・・↓

SNSボタン

見た目が優しい印象に!
白抜きだとさらにかわいい感じに♪

ちー

最終的にこう↓なりました♪

SNSボタン
読者さん

ボタンがかわると印象がぜんぜん違いますね~

ちー

下記のサイトを参考にしました!

↑上記のサイトを参考にボタンを丸くしたあとにCocoon設定でボタンを白抜きに変更しました!

ちー

上記のサイトのおすすめポイントは、SNSボタンの透明度を下げてくれていること!

透明度をさげることで、SNSボタンが悪目立ちせず、記事に馴染みやすくなってます♪

読者さん

CSSへの追加?わたしにもできる?

ちー

カスタマイズする前にはバックアップは忘れずにとっておいてくださいね。

はじめはCSSへの追加など、ハードル高く思えますが、バックアップをとったあとに、いろいろなブログを参考にしながら、チャレンジしていくと、なんとなく使えるようになってきます。

ちー

とにかく行動!時々失敗もあるけど・・・自分好みのサイトに変化していくのは、とっても楽しいですよ~

あわせて読みたい
ワードプレス初心者必見!カスタマイズ時に失敗しないためのポイント2つ かわいいブログにしたいのですが、どうしたらいいですか? かわいいブログって憧れますよね。 ワードプレス初心者、アラフィフ知識ほぼ0のわたしですがカスタマイズに...
にほんブログ村 病気ブログ 看護師・ナースへ
よかったらシェアしてね!
  • URLをコピーしました!