STINGERで記事下にFeedlyやPocketなどのSNSボタンを追加した時にスマホでの表示を整える方法

snsボタン

WordPressテーマのSTINGERには標準で記事下にSNSボタンが設置されていますが、そこにFeedlyやPocketといった他のSNSをボタンを追加した人も多いはず。

しかし、単純に追加しただけだとPCでの表示は大丈夫なのですが、スマートフォンでの表示が崩れてしまいます。

ですので、CSSでレイアウトを整える必要があります。今回はその方法をご紹介します。

また、今回使用しているテーマはSTINGER5ですが、STINGER3でも同様の方法で解決できます。

スポンサーリンク

まずはFeedlyやPocketのボタンを追加する

まだFeedlyやPocketのボタンを追加していない方もいらっしゃるかもしれませんので、追加方法を確認しておきます。

参考にするのはこのサイト。

あとで読む?Stinger3にPocketボタンを追加する方法

細かすぎて伝わらないStingerカスタマイズ! #Stinger-WP

STINGERのsns.phpは以下のようになります。

また、PCでのレイアウトはこのようになります。

stinger_sns

しかし、このままだとスマートフォンでの表示が崩れてしまいます。

表示が崩れている図

これを、2段目にFeedlyとPocketのボタンが表示されるように変更します。

はてなブックマークのボタンにクラスを追加

まず、はてなブックマークのボタンにクラスで適当なものをつけます。例ではhatenaとしています。

クラスのhatenaにpaddingをつける

次に、style.cssでクラスのhatenaにpadding-bottomを11px程度つけます。これは、11ピクセル以上であればいくつでも構いません。

これで、スマートフォンでの表示が整いました。

stinger_sns3

やったね☆

また、この設定をするときにbackground-colorもつけると、どの程度paddingがついているのか分かりやすくなるのでオススメです。

軽い注意点

基本的にはこれで大丈夫なのですが、もしかするとFeedlyやPocket以外にもSNSボタンを追加した場合、表示が崩れるかもしれません。

そんなときは他のSNSボタンにクラスを付加するなどして上記の方法を応用すれば対応できると思うのですが、少し注意点があります。

marginを使ってはいけない

padding-bottomではなくmargin-bottomを付加しても、何も変化しません。自分はこれでかなり時間を食いました・・・。注意しましょう!

padding-topをつけてはいけない

paddingを上につけてもスマホの表示が整う(はず)ですが、今度はPCでの表示が崩れます!気をつけましょう!

スポンサーリンク

フォローする

コメント

  1. […] 4番5番のカスタマイズはこちらを参考にさせていただきました!!ありがとうございます!! ガジェニュー:WordPress Popular Postの表示をSTINGER5と同じにする way’s Web Hack:STINGERで記事下にFeedlyやPocketなどのSNSボタンを追加した時に… […]

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*