部長ナビのページはApple製品のレビューを中心としたブログです。ドラマ仕立ての長期連載も見てね!

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

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

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

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! ブログスタッフ「ちゃぼP」の指導の下、師匠のg.O.R

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

できあがり

image

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

image

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

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

image

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

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

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

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

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

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

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

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

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

フォロー購読方法について >

関連記事もっと記事を読む >

  1. Home >
  2. ブログ管理 >
  3. Simplicity >