ワードプレステーマ「AFFINGER6」を導入してからは、色々な機能を試しつつブログを執筆していた。
しかし、いつからかスマートフォンで自分のサイトを見ると、横に少しズレる現象が発生するようになった。
今回はその横ズレを直す方法について解説する。
スマホで見るとちょっと横にズレるようになった
自分のブログをスマートフォンで見てみると、いつの間にか縦スクロールをする時に、ちょっと横にズレるようになるのに気が付いた。
横にズレるとスムーズに縦スクロールができないので、結構ストレス。
全く身に覚えがなかったので、色々ネットで知らべてみると、大体の原因がわかってきた。
スマホで横ズレする原因
調べてみると、スマホで横ズレする原因は大体次の通り
- 要素が大きすぎる
- 無駄な余白がある
- 文字が折り返されていない
- アドセンスがはみ出ている
正直違いがわからない。
とりあえず、何かはみ出しているんじゃないか？ということがわかった。
何がはみ出しているのかを調べる
何となく原因はわかったが、はみ出し野郎が誰なのかを突き止めなければならない。
しかし、調べてみるとCSSを弄ったりして大変そう...
あきらめかけたその時、いい感じの方法が紹介されていた。
外観 ▶︎ カスタムマイズ ▶︎ 追加CSS
を開いて
次のコードを入力する。
* { outline: 2px solid red; }
すると
こんな感じでブログの要素にアウトラインを引くことができる。
これで何かはみ出していそうな箇所がないか調べてみるんだ。
すると
(･･｡)ん?
なんかここはみ出してない？
というわけで、フッターウィジェットに設置していたスクロールするおすすめ記事を取り除いてみると...
横ズレが直ったーー！ ٩(ˊᗜˋ*)و
犯人はAFFINGER6の機能である「おすすめ記事」スライドショーだった。
まさか、お前が犯人だったなんて・・・！
AFINGER管理のスライドショーは横ずれしない
ちなみに、今回の原因は「フッター一括ウィジェット」にHTMLのコードを描いて表示していた記事スライドショーが原因だった。
AFFINGER管理 ▶︎ ヘッダー下/おすすめ ▶︎ おすすめ記事一覧
から設定できるスライドショーの機能では、横ズレが発生しなかったので、こちらで設定すれば大丈夫。
まとめ アウトラインを描いて横ズレを探せ
今回は追加CSSに
* { outline: 2px solid red; }を入力することで何とか原因を突き止めることができた。
実は、この方法を試す前は、一つ一つ設定を変えてみて、横ズレが直るか試していたんだが、結構気が遠くなるような作業だった。
もしかしたらこの記事を読んでくれている人の原因はスライドショーの機能ではないかもしれないけど、アウトラインを描くことでなんとなく原因の「当たり」をつけることができるんじゃないだろうか。
以上、参考になれば幸いです。
