STINGER WordPress WordPressカスタマイズ

STINGER5をスマホで見ると横ずれするのはRSSと検索フォームが原因だった

WordPress+STINGER5を使用したサイトをスマホで見てみると、横スクロールしないはずなのにカクッと右にスクロールしてしまいました。以前に書いたSTINGER5のカスタマイズでは、自分で追加したコードのせいで横にずれるようになってしまったと思っていましたが、どうやら違ったようです。

何が原因か検索したところ、STINGER5で横にずれるのは「広告がはみ出ているから」「画像がはみ出してるから」などが挙げられていました。しかし、どれも自分のブログには当てはまりませんでした。

何より、その原因の解決策を載せているブログを、下記のスマホで表示してみると横ずれしています。さらに調べたところ、ほとんどのサイトで横ずれが発生していました。

検証環境

テーマはstinger5ver20141227です。スマホは、android2.3.4、解像度480×800（ドット）、DensityDPIは240（High）で、テキストサイズと倍率は共に「中」です。

現在この機種と同等のスペックの機種が、どれほどのシェア率があるかはわかりませんが、気になったので修正することにしました。

スマホで横ずれする原因と解決策

広告も画像もはみ出していないのに、横ずれする場合はこれが原因かもしれません。
  • 「RSS購読する」のボタン
  • 検索フォーム
この二つが、デフォルトの状態でもはみ出しているため、横ずれしていました。

解決策は、子テーマのstyle.cssに下記を追加します。
aside #search {
overflow: hidden;
}

.rssbox {
overflow: hidden;
}
これではみ出しは解消されます。（本当ははみ出していても表示しないようになります。）

もしこれでもはみ出るなら、SNSボタンが原因かもしれません。SNSボタンのデザインを変更したらはみ出さなくなりました。

検索ボタンのサイズ変更

スマホで見ると、検索ボタンだけ小さくなってタップし辛かったため、ボタンのサイズもボックスの高さに合うように変更します。
上の画像はイメージですが、スマホで見るとボタンが小さくなっていました。修正後は少し縦長になります。

子テーマのstyle.cssに下記を追加します。
#searchsubmit {
height: 100%;
}
アスペクト比が多少おかしくなるので、元の方がよければそのままで。
スポンサーリンク
関連記事
スポンサーリンク