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が上書きしてくれて広告が綺麗に表示されるようになった。嬉しい。

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

この記事も読んで欲しい↓

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

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。 本日もガジェマガをご覧いただきありがとうございます。ガジェル(@Gadgetkaeru)です。 これからも物欲は尽 ...

続きを見る

スポンサードリンク

カテゴリー

  • この記事を書いた人

ガジェル

奈良出身渋谷区在住の31歳会社員。ヘッダーの鹿は奈良愛の象徴。小学校でポケモンとハイパーヨーヨーにハマり、中学校でマジックザギャザリング、高校でPS2、そして大学でスマホに取り憑かれたオタク。今では立派なスマホ依存症。嫌いなものはパリピと邦画。ふざけた文章書くのが大好きな大人になり切れない大人。

詳細なプロフィールページ→【逃げることには全力。ガジェマガを書いている理由。】

RECOMMENDED

1

米軍採用という言葉には男のロマンが詰まってる。 本日もガジェマガをご覧いただきありがとうございます。ガジェル(@Gadgetkaeru)です。 米軍と言えば地球の平和を守る地球警察というと言い過ぎだけ ...

2

俺はノートパソコンの沼にハマった。 本日もガジェマガをご覧いただきありがとうございます。ガジェル(@Gadgetkaeru)です。 ノートパソコンはデスクトップパソコンと違い単純なパーツの寄せ集めじゃ ...

3

今のパソコン机は首が痛すぎる。だから新しいパソコン机をDIYする。 本日もガジェマガをご覧いただきありがとうございます。ガジェル(@Gadgetkaeru)です。 最近休みの日は一日8時間パソコン机に ...

4

月次でアクセス報告していく宣言を先月したので、今月も継続して報告する。 本日もガジェマガをご覧いただきありがとうございます。ガジェル(@Gadgetkaeru)です。 先月の報告はこちら。 &nbsp ...

5

近未来SF映画が好きだ。リアリティがありながら未来を感じる新たな技術も使われている近未来SF映画はいずれ現実になるかもしれない世界を追体験させてくれる。 本日もガジェマガをご覧いただきありがとうござい ...

-WordPress

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