スポンサーリンク
スポンサーリンク

CocoonのSNSフォローボタンが大きかったので小さくした

ちいラボのブログメンテナンス日記!

ということで、今日は「フォローボタン」のデザインをおしゃれにしてみましたので、レポートします。

WordPress 5.5.1 (Cocoon テーマ バージョン: 2.2.3.1)

スポンサーリンク

「SNSフォロー」ボタンを見つけた

ホームページのメンテナンスをしながら「Cocoon設定」を見ていたら、「SNSフォロー」ボタンがありました。

さっそく表示させてみたところ、スマホでみると3行とだいぶ「目立ちすぎる」感じです。

フォローボタンが5つもあると、ちょっと圧迫感がありますね。

フォローボタンの大きさを追加CSSで設定しました

そこで、こちらのページを参考にCSSをいじってみました。

ありがたやー

わたしの場合は、自分のサイトのためのデザインは 「外観」→「カスタマイズ」→「追加CSS」の一番下に追加しています。

ポイントは、<a>(アンカー)タグですね。

「.sns-follow-button a」について、幅(width)、高さ(height)を指定しています。

参考サイトのそのままです

劇的!ビフォー・アフター

なんということでしょう~

圧迫感のあったフォローボタンは、匠の手によってまんまるキュートになりました。

ついでにシェアボタンも同じデザインに統一され、SNSでの人気もうなぎのぼりに?

思い通りのデザインにできると、気分が上がりますね

こちらもどうぞ

QRコードを読み込むと、関連記事を確認できます。

最後までお読みいただいて、ありがとうございます。 よかったら、LINE登録 よろしくお願いいたします。

友だち追加

ちいラボでは、LINEからも質問を受け付けています(*^^*)


ブログ村ランキングに参加しています。
ポチっと応援していただけると嬉しいです。


ホームページ運用
スポンサーリンク
\記事が役に立ったらシェアしてね/
スマホ教室ちいラボ
タイトルとURLをコピーしました