【スマホ版】Cocoonのsnsシェアボタンを簡単に小さくする方法

Cocoonの基本設定だとsnsシェアボタンとフォローボタンがスマホ表示だと大きかったので小さくしてみました!

調べたことを備忘録も兼ねてまとめておきます。

スポンサーリンク

元々の大きさ

Cocoonは非常に便利ですが、スマホで表示した時にsnsフォローボタンとシェアボタンが大きいことが悩みでした。

Cocoonシェアボタン

上の感じで画面いっぱいに表示されるため圧迫感がありました。

そこでCSSをいじることでカスタム出来ないか調べてみました。

スポンサーリンク

大きさ解決法

小さく丸くする

snsシェアボタンとフォローボタンを小さく丸くする方法はこちらのサイトを参考にしました。

サイトにあるコードを貼ると

snsシェアボタンを小さくした画像

シェアボタン&フォローボタンが丸くなっていて可愛いですね。

sns拡散も広がりそうです(笑)

WordPress管理画面サイドバー中にある「外観」の「テーマエディター」のstyle.cssに貼り付けるだけで簡単に小さくすることが出来ました。

貼り付けるときは子テーマの貼り付ける様にしましょう!

小さく四角にする

snsフォローボタンとシェアボタンを小さく四角にする方法はこちらのサイトを参考にしました。

サイトにあるコードを貼ると

フォローボタンを四角で、小さくした画像

ちゃんと四角&小さくなってコンパクトで見やすいですね!

こちらでもsnsボタンが押しやすそうです♪

こちらもサイトにあるコードを「外観」の「テーマエディター」のstyle.cssに貼り付けるだけで簡単に小さくすることが出来ました。

スポンサーリンク

まとめ

Cocoonのsnsフォローボタン&シェアボタンは簡単に小さく出来る

コメント

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