ガジェマガ

おすすめガジェットと生活改善のブログマガジン

ブログPV・アクセス

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

更新日:

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

本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。




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

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

レスポンシブ広告を採用することでグーグルが現在表示されている解像度に対応して最適なサイズの広告を配信してくれるから、デスクトップでもスマホでも対応できる。ただ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)購入してからのアクセスの伸びが半端ない。今はひと段落して落ち着いたんだけど、テーマ変えるだけでこんなに伸びるならもっと早く変えとけばよか ...

続きを見る

 

まとめ ライフハック

2018/12/16

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

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

ReadMore

スマホ・タブレット ライフハック

2018/12/11

家電量販店販売員と交渉してスマホを安く購入する方法【応用可】

どうせ同じスマホを購入するなら1円でも安く買いたい。そんな人におすすめなのが家電量販店でのスマホ販売員との交渉だ。 家電量販店の販売員はショップの店員さんと違って表には出さない下げ幅を持っていることが多く、うまく交渉することで相手が持つ下げ幅を最大限引き出すことができる。 今回は一時期電話番号を23回線保有しながら月の支払いが2,000円程度だった元携帯乞食でありながら、家電量販店と携帯ショップでのスマホ販売経験もある俺が値下げを引き出すコツを教える。 本日もガジェマガ(@Gadgetkaeru)をご覧い ...

ReadMore

パソコン・周辺機器

2018/11/27

【Matebook X Proレビュー】Macの外観サーフェスのスペック

2018年の6月に発売されたばかりのMatebook X Proを購入したので、ライバル機であるMacbookやSurfaceと比較しながらレビューする。 Matebook X Proの最大の魅力は3:2比率で画面占有率91%の3Kディスプレイだから、そこを中心にボディの質感からスペックまで網羅した。 今薄型ノートパソコンウルトラブックの購入、買い替えを検討している人は参考にしてほしい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 Huawei Matebook X ...

ReadMore

お得情報 スマホ・タブレット

2018/11/18

【ZenFone5Zが5万円】GEARBESTでスマホを安く買う

GEAR BESTって知ってるだろうか。簡単に言うと中国のAMAZONなんだけど、日本への進出も着々と進めていて、最近では日本倉庫まで作ってしまった通販会社だ。AMAZONも楽天もあるなかで更に通販会社の選択を増やす必要があるのだろうかという疑問を抱く気持ちはよく分かるんだろうけど、GEAR BESTには独自の魅力がある。今日はGEAR BESTが同魅力的なのか、具体的に製品を列挙しながら解説したい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 GEAR BESTの魅 ...

ReadMore

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

スマホ・タブレット

2018/11/9

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

これからスマホを買う人、次のスマホへの買い替えを検討している人向けに、AndroidとiPhoneの違いとそれぞれの優れている点を比較解説する。 また、なぜ俺がiPhoneからAndroidに買い替えたのかを解説したい。 迷っている人はとりあえずこの記事を読めば違いがすべて把握できる。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 iPhoneもAndroidもできることはほぼ一緒 当たり前だけど主に出来ることはほとんど一緒だから、iPhoneとAndroidの違いはト ...

ReadMore

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

2018/12/16

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

既に格安SIMを取り扱うMVNOの提供会社は100社を超えていて、過当競争が進みすぎて値段も品質もほとんど違いがない。 そんな中でも比較的有名な格安SIM提供会社11社の比較と、それぞれが取り扱うスマホのおすすめランキングを紹介する。前半でMVNOの格安SIMをまとめて、後半でスマホをまとめている。 格安SIMの違いはどうでもいいからスマホのおすすめが知りたい人は後半からどうぞ(⇒後半までスキップ) 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 格安SIMはどこも一緒で ...

ReadMore

-ブログPV・アクセス

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