スポンサーリンク

CocoonのSNSフォローボタンが大きかったので小さくした(border-radius)[CSS]

ホームページ運用

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

今日は「フォローボタン」のデザインをおしゃれにしてみました。メモしておきます。

環境

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

キーワード

キーワード:CocoonCSSSNSSNS共有

スポンサーリンク

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

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

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

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

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

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

ありがたやー

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

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

【Cocoon】SNSシェアボタン・フォローボタンを丸く&小型化【カスタマイズ】 | Iの喜劇

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

まず、「.sns-follow-button a」について、幅(width)、高さ(height)を指定して、40pxの正方形にします。そして、「border-radius: 50%」で、正方形の角を丸くすると、円のボタンになるわけです。

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

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

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

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

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

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

QRコードを読み込むと、関連記事を確認できます。
CocoonのSNSフォローボタンが大きかったので小さくした(border-radius)[CSS]
タイトルとURLをコピーしました