ガジェマガ

ガジェットと生活改善のブログマガジン【毎日更新】

ブログPV・アクセス

【コピペでOK】スマホ表示でグーグルアドセンスの右端が切れる・はみ出す修正方法

更新日:

グーグルアドセンス広告の右端が切れている状態を2年間放置してたけどやっと修正できたので報告したい。

本日もガジェマガをご覧いただきありがとうございます。ツイッターフォローYoutubeチャンネル登録してくれたら圧倒的に感謝します。



アドセンスはレスポンシブ広告

ガジェマガではグーグルアドセンス広告のレスポンシブ広告を採用してる。

レスポンシブ広告を採用することでグーグルが現在表示されている解像度に対応して最適なサイズの広告を配信してくれるから、デスクトップでもスマホでも対応できる。ただ1つ問題があった。

スマホだと右端が切れる・はみ出す

スマホでの四角い広告には大小2種類のサイズがある。小サイズの広告が配信されてるときはなんの問題もないんだけど、大サイズの広告が配信されていると右端が切れて広告がすべて表示されない。

具体的にはこんな感じ。広告の右端が切れてしまっている。

いつか直さないと直さないとと考えながら早一年。htmlもワードプレスもすべて独学でやってる俺には辛すぎた。

でもついに修正することが出来たので、俺と同じ悩みを抱えている人に修正方法を残したい。

スマホで右端が切れる・はみ出す解決策

最初に解決策から書く。作業は死ぬほど単純だった。style.cssの一番下に下記記述を追記するだけだった。

コード解説

俺も全然詳しくないからこの記事の為に調べたんだけど、overflowはボックスからはみ出た部分の扱いを決める関数だった。

スマホの記事本文欄から記事空白欄に飛び出た広告部分の.adsbygoogleについて、今まではhiddenで隠す設定にしてんだけど、visibleを追記してやることで、hiddenを上書きした格好だ。

今回の記述の場合は画面サイズが500px以下のスマホサイズの表示のときにだけvisibleが適用される様になっている。

CSSの原因の見つけ方

これを解析するためにはChromeブラウザの要素の検証をフル活用した。Chromeで調べたいところを右クリックして検証を選択することでウェブサイトのhtmlが見れる。

始めはこの画面見るだけでノイローゼだったけど今はギリギリ見れる…

この中で広告コードを確認して、色々チェックを入れたり外したりをしてグーグルアドセンスの実際の動きを見ていくと、変化があった。

ここのoverflowの項目のチェックを試しに外してみると

広告が綺麗に表示された!!!!

癌を見つけることが出来たからあとはこの癌を潰すだけでいい。というわけでさっきも上で書いたコードをstyle.cssの一番下に追記する。

style.cssは下にあるコードほど優先されるから、この記述を一番下に書くことによって、今まで広告の表示を邪魔していたhiddenをvisibleが上書きしてくれて広告が綺麗に表示されるようになった。嬉しい。

これによってグーグル広告のクリック率がどう変化するかはまだわからない。というか、他にも色々いじりすぎてデータを取ることもできない状態だけど、広告の右端が切れることなくしっかりと表示されることで一瞬画像かと思ってしっかり見てしまうから、クリック率は上がるんじゃないかと思う。

ちなみにガジェマガはワードプレスの有料テーマに変えることでPVが3倍に増えて収入も激増している。有料テーマを買うのは勇気がいるけど、収入アップで回収できるからおすすめだ。詳細は下記記事で。

解説
【SEO】AFFINGER5 WINGで月10万PV達成しました

これ本当に嘘みたいな話なんだけど、WING(AFFINGER5)購入してからのアクセスの伸びが半端ない。今はひと段落して ...

続きを見る

 

まとめ ライフハック

2019/2/27

【2019年版】生活が変わるガジェマガ式買ってよかったもの15選

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。これからも物欲は尽きることないだろうし、ガジェットに限らず様々な物を購入することになると思うけど、今後は足りないものを補うというより、今あるものをグレードアップする買い物が主流になると思う。 そんな満たされた生活の中でも、俺基準俺調べの買ってよかった商品を、生活に与えたインパクト順にランキング形式でを紹介したい。正直もっと早く買っておけば良かったと思うものばかりなので、まだ持っていないものがあれば急いで購入してほしい。 1 ...

ReadMore

ブログPV・アクセス

2019/2/10

【月刊ガジェマガ19年1月号】2018年振り返り

あけましておめでとうございます。1月に入ったので12月のガジェマガの活動を記録する。 先月の報告はこちら。 12月に買ったもの ドルチェグストタワーカプセルホルダー 毎日使っているドルチェグストのカプセルの保管が煩雑だったから見せる収納としてドルチェグストタワーカプセルホルダーを購入。普通に毎日使ってて便利。 Soundcore Liberty Air完全ワイヤレスイヤホン 発売日に勢いで買ってしまった完全ワイヤレスイヤホン。ikanziを持っていたけど、Ankerが作っているイヤホンの品質を確かめたくな ...

ReadMore

ガジェット ライフハック

2019/2/10

ガジェマガの中の人のポケットとカバンの中身【男の必要最小限】

多くの有名ブロガーがカバンの中身を記事にしているのにガジェマガではまだ一度も鞄の中身について書いたことがなかった。ブロガーになりたいのであれば、他のブロガーが書いている記事はしっかりと抑えておきたいということで、今回はガジェマガなりのカバンの中身と、ポケットの中身を紹介したい。 鞄はオカマの象徴 in USA 俺は中学生高校生の頃はリュックサックを使っていたし、社会人になってからはボディバッグを休日の荷物入れとして使っていた。社会人になり立ての頃にアメリカに留学していた妹と再会する機会があって、アメリカの ...

ReadMore

パソコン・周辺機器

2019/2/10

Huawei Matebook X Proを2か月使った感想【欠点あり】

去年の11月5日にMatebook X Proを購入して丸2ヵ月経った。今のメインマシンはこれ一台で、ブログ執筆も動画編集も全部Matebook X Pro一台で行っているから、購入してから2か月間でMatebook X Proに触れない日は一日もなかったと思う。 今回は丸2ヵ月使って感じたHuawei Matebook X Proに関するリアルな感想をまとめたい。 Matebook X Proに期待したこと そもそもここ2年程はパソコンを新品で購入することがなくて、型落ち中古パソコンを定期的に買い替えて ...

ReadMore

スマホ・タブレット まとめ 格安SIM

2019/3/19

【格安SIM10社比較】料金と特徴とおすすめスマホ15選【ほぼ同じ】

既に格安SIMを取り扱うMVNOの提供会社は100社を超えていて、過当競争が進みすぎて値段も品質もほとんど違いがない。 そんな中でも比較的有名な格安SIM提供会社10社の比較と、それぞれが取り扱うスマホのおすすめランキングを紹介する。前半でMVNOの格安SIMをまとめて、後半でスマホをまとめている。 格安SIMの違いはどうでもいいからスマホのおすすめが知りたい人は後半からどうぞ(⇒後半までスキップ) 格安SIMはどこも一緒です これからMVNO11社社のプランを紹介するけど、結論から言うとどこも代わり映え ...

ReadMore

-ブログPV・アクセス

Copyright© ガジェマガ , 2019 All Rights Reserved Powered by AFFINGER5.