SimplicityでSNSシェアボタンをCSSのみで大きくする方法

こんにちは。部長ナビ(@nabi_1080)です

Simplicityのカスタマイズで、「SNSシェア総カウント数」を表示する方法を紹介しました

Simplicityで「SNSシェア総カウント数」をカッコよく表示する方法
Simplicityで「SNSシェア総カウント数」をカッコよく表示する方法
こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! ブログスタッフ...

ここで、「シェアボタンが小さい」というご意見を頂戴しましたので、調べてやってみたら出来ました。CSSを追記するだけの簡単カスタマイズなのでやってみてくださいね

スポンサーリンク

できあがり

image

こんな感じになります。デフォルトは「シェア数をバルーン表示」しているので、アイコン小さくても良いんですけど、右に「SNSシェア総カウント数」を表示すると、個別の表示が非表示になるので、アイコンだけだと小さくなります

image

これが、カスタマイズ前です。小さいですよね?ええ。小さいんです

これでイケないことはありませんが、小さいですよね。ええ。小さいです。デカいボタンの方がシェアしてもらえるかなと言うのと「大きくしたい」という声があったので、やってみたと言うことですな

image

記事下のボタンもデカくなりますが、デカくなり方が違います。でも、それはわかりませんので、もっと詳しい方にお聞き下さい。謎です。

では、Simplicity用カスタマイズのCSSコードいってみよう!

いじるのは「子テーマ」の「style.css」です。そこに、コレをブチ込むだけです。簡単だね!

/* SNSボタンを大きくする */
ul.snsb-balloon li a {
    font-size:30px;
    text-align:center;
    height:30px;
    width:70%;
    padding:10px;
}

はい。終わり。コレだけ。

ネットで調べて、シェアボタンを大きくするCSSコードは見つけたんですけど、「SimplicityのPC表示」には対応していませんでした。その理由は「class名」でした。そこで、phpコードを見て、何回かいじってみたらうまく行きました。フォントサイズ、高さ、幅、余白は結構いじって調整したので、各ブログでお好きな値にしてください。

コードをいじるカスタマイズは自己責任でお願いします!

当然ですが、カスタマイズは自己責任でお願いします。バックアップを取って、万全の体制で行ってくださいね!

では、よいSimplicity生活を!アディオス!シェアしてね〜

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索