スマホサイトで本文がブレたり、滑りが悪い現象：ブログ制作ネタ

　こんにちは、AMFです。今日は陸マイラーの中のごく一部であるブログを運営している方々、その中でもごく一部の人のヒントになればいいなという記事です。はい！そこのアナタです！！ ということで、アクセス伸びないのを覚悟で書いてみます！

　最近、陸マイラーブログの中で、画面がほんのちょっとだけ左右にぶれたり、上下にスクロールしようとすると一瞬動かないサイトが結構ありませんか？ これらの罠はこのブログでも経験したことがあるので、自分が取った対処法を書き残しておきます。全部のブログがこれで解決する訳はないと思いますが、うまく行ったらご喝采～

本文が左右にわずかにぶれる

　スマートフォンでブログを見ていて、本文をスクロールしているときに、ほんの僅かに左右にブレる現象です。表の部分を見るとわかりやすいです。

　この現象はおそらくもにもにた様ご紹介の、エクセルの評価から HTMLのテーブルを作成できる「Relax Tool」を使うようになってから多く見られるようになったのではないかと思います。

　このツール自体は大変便利で私も使わせていただいているのですが（もにもにた様、ありがとうございます）、一つちょっとした落とし穴があります。HTMLの表のコードを作成する際に、当然のように枠線ありのままにしておくと、tableタグに「border="1"」というプロパティが埋め込まれて、これがどうやら本文が左右にブレる元になるようなのです。

　枠線指定は <table style="border:1px;">などと書いてもできるのですが、「枠線無し」を選択して、border指定がない状態にしても、ブラウザで見ると枠線が表示されるようなので、枠線無しを選んでコードを取得するのが良いと思います。

　そのようにすることで、左右ののブレがなくなりました。枠線もグレーで表示されています。

本文が上下にわずかにずれる、スクロールの滑りが悪い

　一部のブログでは、本文部分をスクロールしようとすると、本文がほんのちょっとだけ上にずれて、その後動かないという現象が見られます。そのためスクロールしようとすると１回目は引っかかったように動かず、２回以上指をなぞって動かすようになります。これに対する私の見解は左右のブレに対するものよりもちょっと不確実なのですが、アドセンスなどの広告を記事直下に移動する方法を使っているブログで出ている現象に思います。

　スクリプトの解説はややこしいので結論から言うと、私のブログではこれを以下のように改造したら、上下のブレが解消されました。

<div id="my-footer">
  <!-- 記事本文直下に置きたいHTML -->
</div>
<script>
var myFooter = document.getElementById("my-footer");
var tmp = myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
var tmp2 = document.getElementsByClassName("entry-content")[0];
tmp2.parentNode.insertBefore(tmp, tmp2.nextSibling);
</script>

　どうやら切り取った広告部分を記事直下に挿入するときに、appendChildで子の要素として挿入すると entry-contentに上下幅ができてしまいブレる現象が起きる場合があるようで、上のようにinsertBeforeを用いて「次の要素の手前」に入れてやると大丈夫なようでした。

　ただしこちらは的外れかも知れません。試される方がいらっしゃいましたら、バックアップを取るなど十分な準備をした上でお願いします。成功または不成功について教えて頂けましたら嬉しいです。