flower border

愛愛日記~クローン病ブログ

クローン病ブログから健康ブログへ。腸に良い食事や料理レシピ、健康食品など

スポンサードリンク

TOP > ブログ > title - ブログのスマホ表示で画面が横揺れするのが直った!原因と対策方法

ブログのスマホ表示で画面が横揺れするのが直った!原因と対策方法

Categoryブログ
ブログのことです。

これまで、このブログをスマホで見ているときに、下のほうを読むために指でスクロールして動かそうとすると、画面が左右に横揺れして イヤだな~ 見にくいな~と思っていました。

スマホでこのブログを読まれた方はきっと、横揺れして読みにくいなと思われていたと思います。

スマホ表示での横揺れの原因がずっとわからなかったので、仕方なくガタガタ動く状態のままで放置していたのですけど、昨日 その原因がわかって、直すことができました。

良かった~

直したのは、個別ページ(記事ページ)だけなんですけどね。笑

トップページの横揺れの原因も同じなので、直そうと思えばたぶん直ると思うのですが、いろいろ都合があって…今のところは前のままにしています。

でも、記事を読む画面が横揺れしなくなったので、これまでよりもスマホで読みやすくなったと思います。


スマホ画面が横揺れする原因を模索


ブログのスマホ表示で画面が横揺れする原因が、これまではよくわかりませんでした。

このブログはFC2ブログで、FC2ブログのテンプレートをダウンロードして最初使っていたときには、スマホで見たときに横揺れしていなかったので、自分であとからなにかをしたことで横揺れする状態になってしまったんだろうなと思いました。


レスポンシブ広告に変えたけど横揺れが直らない


横揺れする原因と対策をネットでいろいろ調べたりして考えてみると、ブログに表示させているアドセンス広告が原因かもしれないと思って、広告のサイズを変えてみたりしたのですけど、これまで試してみた方法では横揺れは直りませんでした。

テンプレートはレスポンシブ対応のテンプレートで、今はスマホ版は非表示にしてレスポンシブにしています。

以前はブログのパソコン画面のサイドバーに300px×250pxのサイズのアドセンス広告を貼っていたのですけど、もしかしたらそれがスマホの横揺れの原因になっているのかもしれないと思い、パソコン表示画面のサイドバーの幅を少し広げて、さらにスマホ画面の左右の余白を狭くして記事幅をひろげ、300px×250pxの広告が表示されるようにしてからレスポンシブ広告に変えてみました。

ブログに貼っていた広告のうち、レスポンシブ広告でなかったのはサイドバーの広告だけだったので、サイドバーの広告をレスポンシブ広告に変更したら横揺れがなおるかなと思ったのです。

でも、全部レスポンシブ広告にしても横揺れはなおらなくて、その他の原因が特定できず、そこで行き詰まってしまいました…


スマホが横揺れする対策法や解決法をネットで調べてみると、ワードプレスの場合の対策法を書いているサイトが多くて、いくつか読んで考えたのですが、FC2ブログではどうしたらいいのかよくわからなかったです。

FC2ブログでは、このブログで使っているテンプレートの製作者 Akiraさんのサイトで、スマホ表示での横揺れの原因と対策法について ものすごく詳しく書かれていたので、これは嬉しいと思って読んでみたのですが…

Akiraさんのパソコンスキルのレベルが高すぎて、書かれていることが難しくて なんのことかよくわからず…

Akiraさんにとってはものすごく簡単で低レベルなことが もも姫にはちんぷんかんぷんで… 笑
理解不能だった…

残念..


横揺れの原因はアドセンス広告


その後 ずっと、スマホ表示で横揺れする原因と対策がわからないままでブログを書いていたのですが、
昨日 めでたく横揺れの原因がわかりました!

横揺れの原因となることを もういちどよく考えてみたんです。

第1に考えたことは、やっぱりアドセンス広告のサイズです。

レスポンシブ広告にしていれば、スマホで広告が表示されるときにスマホの画面に合わせてアドセンスの広告のサイズが変更されて表示されるので、スマホ画面が横揺れしないはず。

でも、横揺れしている…

それなら広告以外に原因があるのか…?

そこで、ひとつ気になったことがありました。

スマホ版の上部、ファーストビュー(最初に見える部分)に表示させていた320×100のサイズの広告のことです。

スポンサードリンク

レスポンシブ広告でサイズ指定していたことが原因


その320×100で表示されていたアドセンス広告は、アドセンスのレスポンシブ広告のコードを一部書きかえてHTMLに貼っていたので、もういちどHTMLに貼ったアドセンス広告のコードをよく見てみました。

スマホの他のアドセンス広告は、レスポンシブ広告で「レクタングル」とは指定しているけれど数字では指定していなくて、300×250のサイズで表示されているようなので、たぶん横幅的に問題ないはず。

スマホ画面で表示されている広告で一番幅が広いサイズの広告は、ファーストビューで表示させている横幅が320のアドセンス広告だったので、その広告がなんとなくあやしそうな予感…

そのファーストビューに貼っていたレスポンシブ広告は、パソコンでは横長の大きな広告で表示されるように、そして、スマホでは320×100のサイズで表示されるようにコードを書き換えていました。

その広告を普通のレスポンシブ広告にすると、パソコンでは横幅がものすごく長い広告が表示されてしまい、スマホではすごく小さなサイズの広告が表示されていたので、ネットでいろいろ調べて ちょうど良いサイズで表示されるようにコードを書き換えていたのです。

でも、そうしてサイズを指定して書き換えたことが横揺れの原因となっていたようでした。

レスポンシブ広告だけれど 横幅320の広告が表示されるようにコードを書きかえて指定していたことが原因です。


横幅320から300の広告サイズに変更


320×100の広告を、他の記事内広告と同じく スマホ表示で横幅が300 縦が250になるようなレスポンシブ広告に変えて、それで横揺れが直るか試してみることにしました。

記事内のレスポンシブ広告は、パソコン表示ではレクタングル大のサイズでも表示されるようにコードを書き換えて設定しています。

300×250のサイズの広告はスマホ画面のファーストビュー部分には貼らないほうがいいので(※貼ってもよくなったそうですね。)、ファーストビューに広告を貼るのはやめて、それよりも下の画面に貼ることに。

それより下の位置というと、記事タイトルの下がいいかなと思い、そこにアドセンスのレスポンシブ広告を貼ることにしました。

ほんとうは導入文の下の位置というのがいいなと思ったのですけど、見出しのない記事もあって、これまで導入文とか考えて文章を書いていなかったので…
記事タイトルの下しかないかなと。

パソコン画面で見ると、記事タイトルのすぐ下にレクタングル大の広告があると、ちょっと違和感があるかもしれないですけどね。

でも、これまでは記事タイトルの上に横長の大きな広告を貼っていたし それとあまり変わらないかなと思いました。

そして、このブログはスマホで見られるほうが大分多いようなので、パソコン画面での見栄えについては あまり気にしないことにしました。 笑


これまで記事タイトル上に表示していた広告を記事タイトル下に貼りかえることで ちょっと問題がありました。

それはトップページの広告のことです。

個別ページのファーストビューに表示していた横幅320の広告を外すと、トップページのファーストビュー広告も同じように消えてしまいます。

個別ページは記事タイトルの下に広告を移せるのでいいのですけど、トップページでは記事がいくつか並んでいて その間に広告を貼るということは難しくてできません。

トップページの上部に広告を全く貼らないというのは大分もったいないので、トップページはとりあえず これまでと同じく横揺れしても仕方がないということで、ファーストビューに広告が見える状態にしておくことにしました。

それで、個別ページではファーストビューに広告が表示されないように、トップページにだけファーストビューに広告が表示されるようなコードをネットで調べて、アドセンス広告のコードの前後につけたして書きました。


スマホ表示で画面が左右に揺れるのが直った


そうしてアドセンス広告のサイズと位置を調整して、そのあとスマホでブログを見て確認してみると、
個別ページでの横揺れがしなくなっていました。

ヤッタ~~

やっぱり 320px幅で表示されるように設定したレスポンシブ広告が横揺れの原因でした。

長いあいだ解決できなかったことが やっと解決できて、嬉しいです。

でも、トップページはこれまでと同じく横揺れしてますよ。笑

トップページの横揺れを直すには、画面上部に表示されている320×100の広告を、それよりも横幅の狭い広告に変えなくてはいけないです。

でも、広告のサイズが小さ過ぎると広告を貼っている意味があまりないので…

トップページの記事一覧の上になにか案内のようなことを書いて、その下のファーストビューじゃない場所に300×250のサイズのアドセンス広告を貼るといいかなと思ったりもしますが、その案内が個別ページにも表示されてしまうかもしれないし、色々考えることがあるので、いまのところはトップページはそのままにしています。

スマホ表示で横揺れする原因がわかったので、またいつか なにか良いアイデアが思いついたら、トップページもなにか対策をしようと思います。

ブログをスマホで見たときに個別ページの記事画面が横揺れしなくなって記事が読みやすくなったので、ブログを画面の下のほうまでストレス少なく読んでもらいやすくなったかなと思います。

もも姫はスマホでネット検索してなにかを調べることがよくあるのですが、いろいろなサイトやブログを読んでいる時に、スクロールすると画面が左右に動いて横揺れしているサイトがよくあるので、やっぱり横揺れを直すことは難しいのだろうなと思っていました。

スマホの画面が横揺れすると、指で上下に動かしにくくて文章が左右にゆれて読みづらいので、できれば直したほうがいいですね。


他の簡単な方法


この記事をかいたあと、簡単になおせる方法が見つかって、トップページも横揺れしなくなりました。

その方法で320×100のサイズの広告をスマホで表示させても横揺れしなくなったので、アドセンス広告をもとの位置にもどしました。

もも姫ができた簡単な方法が書かれているのは、Naifixというサイトのこの記事です。

スマホでブログを見たときに横揺れ・見切れ・はみ出してしまう原因と対策

最後のほうに書かれている「横揺れを完全に防ぐCSSコード」というのをcssの一番下にそのまま貼りつけてみたら、すぐに横揺れがしなくなりました。
良かった~
助かりました。


【関連記事】

ブログを続けることでわかったこと

ブログ開始から5年 クローン病ブログ

ブログ記事が消えた原因。ブログのバックアップ・保存 FC2

ブログの全記事コピーサイトを発見して対策
関連記事
スポンサードリンク