Blog

【Google Adsens 広告設定】はてなブログでスマホ表示がアドセンスで横にガタガタする問題の解決方法まとめ

はてなブログを見ているとスマホが横にガタガタして見にくい !!!
こんな経験をしたことってありますよね。笑

今回はその解決方法のお話です ( ˘ω˘ )‬

改めましてこんにちは、あいまいみー( @imyme_999 )です(´-`).。oO
いつも見てくださってる方、はじめましての方、よろしくお願いします ^^

まだまだ応援お待ちしております~~ ‪( ˘ω˘ )‬

はじめに

今回はブロガーさんへの記事です ٩( ‘ω’ )و

  • スマホ表示にすると記事内が横にガタガタするよ?
  • あれ、どうしてだろうアドセンスがはみ出ているよ?
  • はてなブログのスマホガタガタ問題を解決したい

という方に届けばいいなと思います ‪( ˘ω˘ )

今回は「あいまいみーのきたろぐ」と同じような感じで設定している方がいたら「こうしたら治るかも~~」という記事です。

「ふーん、こんな方法もあるんだ~~」くらいな感じでお読みいただければと思います。

スマホ画面のガタガタを解決する方法

Google Adsens 広告設定(前提)

「あいまいみーのきたろぐ」の場合、記事内には

▼記事内自動挿入
・見出し一つ目 上(レスポンシブ)
・見出し 2/1(レスポンシブ)
・見出し最後 上(レスポンシブ)

にアドセンスを設定していました。カスタマイズをした時から横にガタガタが発生していたので、アドセンスが原因なのは分かっていたのですが、なかなか直さず。笑

この設定と同じ方は今回ご紹介する方法でおそらく直ります ‪( ˘ω˘ )‬

f:id:imyme_999:20171003013928j:plain

その他のみんなは最後の別の方法で試してみてね~~

スマホ表示でガタガタする原因

調べてみるといろんな原因がありました。

  • アドセンス広告が大きく表示されすぎている(サイズが合っていない)
  • 画像が大きすぎる
  • コードで間違っているところがある

とかとか。

 

f:id:imyme_999:20171005172146j:plain
「諦めずに原因を探してみよう」

 

正直、そのブログによりけりだと思うので、諦めず原因を探してみましょう 。゚(゚´ω`゚)゚。

今回はいちばんシンプルに

レスポンシブ → 300×280

の変更をしました(´-`).。oO

それ以外の方法は最後にまとめさせていただきます。
それではご紹介します ٩( ‘ω’ )و

Adsens 広告設定の見直し

変更前と変更後

f:id:imyme_999:20171027025611j:plain

こんな感じでレスポンシブ(または320×100)の設定にすると広告の右側が見切れて、記事をスクロールすると横にガタガタしてました 。゚(゚´ω`゚)゚。

300×280 に変更すれば広告は小さくなりますが、ガタガタは直ります !! ٩( ‘ω’ )و

広告ユニットを作成

f:id:imyme_999:20171027010550j:plain

広告の種類とサイズを選択

20171027004442

はい、もうお分かりだと思いますが、わたしがしたのはこれだけです。笑
レスポンシブ ⇒ 300×280 に変更しただけ ‪( ˘ω˘ )‬
期待させた方はごめんなさい |ω・`)

記事内アドセンス自動挿入の設定を変更する

「あいまいみーのきたろぐ」でも自動挿入の設定を採用しております。

はじめてのブログ Googleアドセンス登録から広告設置と収益まで 」でご紹介している U太郎(id:uxlayman)さんの記事がやはり最強ですよね ٩( ‘ω’ )و

uxlayman.hatenablog.com

Adsensの記事の挿入場所などについてはこちら

www.imyme9.com

注意するところ

f:id:imyme_999:20171027020825j:plain

基本的にU太郎さんの記事通りで問題はありませんが「スポンサーリンク」の文字をセンター表記にしたかったため一部だけヒトデ(id:hitode99)さんの記事を参考に変更させていただきました ‪( ˘ω˘ )‬

<p style=”text-align: center; font-size: 80%;”>スポンサーリンク<br />
あどせんすのこーど
</p>

【コピペでOK】はてなブログでアドセンスの配置に役立つコードの書いてある記事をまとめたよ!(スポンサーリンク表記、横並び、ソーシャルボタン下、記事中) – 今日はヒトデ祭りだぞ!

U太郎さん、ヒトデさんお世話になりました \( ˆoˆ )/

この他にも方法はあるようです

調べてみると、なかなかいろんな方法があったんですが、 正直よくわからなかった「あいまいみーのきたろぐ」はこれで良いかなと。笑

もちろん、広告が大きければその分クリックしてもらえる確率も増えると思うのですが、「ガタガタ見にくい < 少し小さめ広告」の方がユーザーとしてはストレスが小さいと思います。

 

f:id:imyme_999:20170905190338j:plain
「変化についていけないよ…… 」

 

iPhone8 や X が発売され、画面の大きさなども変化していくと思うのですが、現状 iPhone6S を使用しているあいまいみーは 300×280 の広告でも違和感なく見れるかなーと思うので、おそらくこのまま使用していきます ‪( ˘ω˘ )‬

スマホ表示で横にガタガタなるのを解決したい方にはこちらがおすすめ

失礼を承知で一気にご紹介させていただきます 。゚(゚´ω`゚)゚。
どれも参考になるサイトさんばかりなので、お困りの方はぜひ一度見てみてください !!

みなさんのスマホガタガタ問題が解決しますように(´-`).。oO

naifix.com

akiueo.hatenablog.com

www.hitode-festival.com

www.life-alright.com

f:id:imyme_999:20171003014227j:plain

これだけあれば何か原因がわかるかもだねっ

こちらの書籍もおすすめです

f:id:imyme_999:20171003013928j:plain

『SAO』まであるってすごいよね。
いまのプログラミングは最先端なのね……

おわりに

今回はスマホ表示の横揺れ、ガタガタ問題についてでした (´-`).。oO

直さないとなぁと思いながら、なかなか出来なかったので、安心 ‪( ˘ω˘ )‬

「なるほどね〜!」とか「やってみる !  さんきゅー !」とか「他にも良い方法あるよ!!」という方は、読者登録、はてなブックマーク、コメントお待ちしております ^^

また、Twitterもしていますので、よろしければお声掛けください ‪( ˘ω˘ )‬
めっちゃ喜びます(待ってます ٩( ‘ω’ )و )


それでは、本日はこのへんで。
お付き合いいただきまして、有難うございました ^^

f:id:imyme_999:20171003014227j:plain

みんなもガタガタしている人がいたらこの記事を教えてあげてね

おしごと依頼について

Webデザイン・ランディングページ(LP)・ロゴデザイン・名刺・リンクバナー・カラー設計・ライティング(寄稿)など、グラフィックデザイン、DTP、Web まで幅広くお受けしております。

 まずは作品がみたい ◎まずは相談してみる ◎

まずはお気軽にご相談くださいませ ( ˆoˆ ) ✧*。