WordPress

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

更新日:

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

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




レスポンシブ広告

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

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

謎の隙間ができる

いつか直さないと直さないとと考えながら早一年。htmlもワードプレスもすべて独学でやってる俺には辛すぎた。でもついに修正することが出来たので、俺と同じ悩みを抱えている人に修正方法を残したい。

解決策

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

コード解説

俺も全然詳しくないからこの記事の為に調べたんだけど、overflowはボックスからはみ出た部分の扱いを決める関数だった。スマホの記事本文欄から記事空白欄に飛び出た広告部分の.adsbygoogleについて、今まではhiddenで隠す設定にしてんだけど、visibleを追記してやることで、hiddenを上書きした格好だ。今回の記述の場合は画面サイズが500px以下のスマホサイズの表示のときにだけvisibleが適用される様になっている。

原因究明の過程

これもおなじみだけどChromeの要素の検証をフル活用した。Chromeで調べたいところを右クリック→検証を選択する。

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

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

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

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

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

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

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

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

2018/9/7

【2018年版】格安SIMスマホセットおすすめランキングベスト14!

格安スマホの完成度が高くなることで、敢えてキャリアスマホを選ぶ必要が無くなってきている。 次は格安スマホを購入しようと考えている人は多いと思うんだけど、そこで悩むのがどの通信会社と契約するかだ。キャリアに縛られない格安スマホを購入するのであれば月額費用も安く抑えたい。 そんな需要に応えるべく最近は格安SIMと格安スマホのセットがかなりお買い得になっている。回線も安いのに、セットで購入すればスマホも安い。今回は格安SIMとセットで安く購入できるスマホのおすすめランキングを作成した。 本日もガジェマガ(@Ga ...

ReadMore

スマホ・タブレット

2018/8/21

【2万円はおかしい】Lenovo S5/Xiaomi Redmi Note 5/P20 lite最強コスパスマホ3機種比較

最強コスパスマホP20 liteのレビューをしたところなんだけど、更にとんでもないコスパのスマホが海外で発売されている情報を掴んだので紹介したい。あまりのコスパの高さにP20 liteを脅かすんじゃないかと密かにブームになっている。P20 liteのレビューは下記から見れるので確認して欲しい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 Lenovo S5 Lenovoと言えば日本ではMotoGシリーズを販売しているメーカーのイメージで、Motoのブランドを冠さないス ...

ReadMore

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

2018/8/21

【ZenFone5Zが2万円も安い!】中国版Amazonの「GEAR BEST」が要チェックや!!

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

ReadMore

ライフハック まとめ

2018/9/4

【2018年版】生活が変わる!ガジェマガ式買ってよかったモノ18選

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

ReadMore

LINE@で更新情報をお届け

LINE@を友達追加

  • この記事を書いた人
  • 最新記事

ガジェマガ(中の人)さん

奈良出身渋谷区在住の31歳会社員。ヘッダーの鹿は奈良愛の象徴。小学校でポケモンとハイパーヨーヨーにハマり、中学校でマジックザギャザリング、高校でPS2、そして大学でスマホに取り憑かれたオタク。今では立派なスマホ依存症。嫌いなものはパリピと邦画。ふざけた文章書くのが大好きな大人になり切れない大人。更新情報や日々の雑感をツイッターで呟いています。よければ下のツイッターマークからフォローしてください。喜びます。

-WordPress

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