スマホからはてなのブログサーフィンをするのが日課となりつつある今日この頃。
時々ページがスマホの画面からはみ出て横スクロールするブログに出会ったりします。
そのようなブログの感想をひと言でいうと
「うぜえ！」。
言葉悪くて申し訳ない。
本当に面倒なんです。
文章を読みながら下にスクロールしていくとページが左にズレてしまって、行はじめの文字がはみ出て見えなくなってしまう。
縦スクロールするたびに横にもスクロールして位置を戻さないといけない。
長文の記事は特に、興味深いテーマでも読むのやめたくなるんですよね…。
とてももったいない！
私はあなたの記事を読み切りたいんだ！
というわけで、勝手ながら横スクロールする原因と対策を考えてみたいと思います。
スポンサーリンク
横スクロール問題を解決する
と、ここまで不満タラタラ流してきた私ですが、人のこと言えませんでした。
上記ページ、今は改善しましたがついさっきまで堂々と横スクロールかましてました。
読んでいただいた方には大変面倒な思いをさせてしまい、申し訳ありません。
それでは本編に参りましょう。
原因1 広告サイズ
ひとつ目は、ブログにグーグルアドセンスなどの広告を貼っている場合の可能性です。
アドセンスは使えるバナーの大きさが選べるのですが、その中に「レクタングル大」という広告サイズがあります。
大きさは横336x縦280。
広告主が多く比較的高い収益を見込めるサイズなんですが、これをスマホページに貼るとiphone5sから前くらいの画面サイズだとはみ出て横スクロールしてしまいます。
（ファブレットくらい大きければ大丈夫だと思います。）
改善策
広告サイズを変更します。
グーグルがスマホ向けとして推奨している「レクタングル（中）」か「レスポンシブ」にしてみましょう。
レクタングル中は300x250、レスポンシブは画面の大きさに合わせたサイズを表示します。
レクタングル大には及ばずとも比較的広告主が多いので、個人的にはレクタングル中がオススメ。
原因2 記事リンク
見てきた中で一番多い原因かもしれません。
当ブログ記事の横スクロールもこれによるものでした。
スマホからのスクリーンショットです。
思いっきり横にズレてるー！
はてなではブログカードを埋め込んでリンクを貼ることができます。
簡単で、アイキャッチ画像や冒頭の文章が読めるので書き手にも読み手にも便利。
しかし、リンク先のサイトやブログの名前が長いとブログカードの横幅も長くなってしまうことがあるみたいなんです。
すると原因１の広告同様はみ出して横スクロールしてしまう、というわけ。
記事タイトルは長くても改行されているのにブログ名はならないんですねぇ。
改善策
記事作成時にプレビューを確認し、横にはみ出している場合はテキストリンクに変えましょう。
どうしてもブログカードで記事を紹介したい場合は諦めましょう。（おい！
原因3 ブログパーツ
ブログ村パーツや「あわせて読みたい」等のブログパーツは横幅が広いものが多いです。
私もPC版にはブログパーツを貼っていますが、同じようにスマホ版に貼ると横幅がかなりオーバーしてしまいます。
こちらが理由の横スクロールにはあまり出会ったことがありませんが、出会うと一番イラっとします（笑）
改善策
パーツの幅を変えられる、または選べるものがあるのでそれを最小サイズにしてみましょう。
いっそ全て取り去るのもいいかもしれませんが…(スマホは注目記事とかあるから)
以上、主な原因3つをご紹介しました。
今のところ他の原因には出会っていないのでこれでほとんどの横スクロールはなくなるかと。
我が家も今後気をつけます。
