CocoonのSNSシェア・フォローボタンをかわいく変身!

Web/Blog

ワードプレスのSNSボタンをかわいくしたいと思われている方へ
ワードプレス初心者のアラフィフ女子がどのように行ったかを備忘録として残しおきます。

わたしは現在、無料テーマのCocoonを使ってます。

デフォルトのSNSボタンだと原色でいかにも~って感じで・・・
自分のサイトになるべくあわせて、もっと控えめにしたいなぁと思ってました。

スポンサーリンク

SNSボタンをデフォルトから白抜きへ

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

アラフィフ女性
アラフィフ女性

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

ちー
ちー

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

Cocoonカスタマイズの方法

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

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

SNSボタンを四角から丸へ

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

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

ちー
ちー

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

アラフィフ女性
アラフィフ女性

ボタンがかわるだけで全然印象が違いますね~

ちー
ちー

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

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

アラフィフ女性
アラフィフ女性

全然印象が違いますね~


上記のサイトのおすすめポイントは、SNSボタンの透明度を下げてくれていること!
透明度をさげることで、SNSボタンが悪目立ちせず、記事に馴染みやすくなってます♪

アラフィフ女性
アラフィフ女性

CSSへの追加、自信ないです。

ちー
ちー

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

はじめはCSSへの追加など、ハードル高く思えますが、まずはチャレンジ♪
自分好みのサイトに変化していくのは、とっても楽しいですよ~

ちー
ちー

とにかく行動!時々失敗もあるけど楽しいです♪

タイトルとURLをコピーしました