ガジェマガ

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

ブログ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/9/11

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

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

ReadMore

カメラ スマホ・タブレット パソコン・周辺機器 まとめ

2019/9/11

【2019年版】ガジェットブロガーの仕事道具まとめ【現状と不満】

今月頭に独立してからというもの外出する機会がめっきり減ってしまって毎日家でブログを書く生活が続いている。人と喋らないとやばいなとは思いつつ毎月ガジェットに10万円を仕事として費やして、自分の好きなものに囲まれながら生活できていることに幸せを感じている。 今回はせっかく独立もしたことだし、俺が普段仕事に使っている道具と、その道具に関するリアルな感想をまとめたい。 ガジェットの購入が仕事 元々趣味で購入したガジェットの紹介から始まったのがガジェマガなんだけど、今月頭に独立してからはそれが仕事になった。 とはい ...

ReadMore

ライフハック

2019/9/11

【高すぎ】ゴリラクリニックのヒゲ脱毛で30万円提示された話【評判・口コミ】

髭いらねーって思って髭の永久脱毛に手を出そうとしたんだけど、ゴリラ脱毛が想像以上に高くて、ネットでの値段の記載方法が悪質だと感じたので今日はその件を書きたい。 毎日髭剃るのめんどくさい みんなもそうだと思うけど、朝起きて仕事行くまでの時間は戦争だ。なぜなら俺はなるべく寝ていたい!むしろ起きたくない!でも社会人なので流石に会社に遅刻するわけにもいかず、毎日生きるためにゾンビ顔負けの死んだ表情で通勤しているのが実情だ。 そんな社会人にとって朝の時間は貴重だ。歯を磨いて顔を洗って髭そって朝ごはんを食べて着替えて ...

ReadMore

スマホ・タブレット

2019/5/18

【UMIDIGI S3 Pro実機レビュー】色々ダメ。次回作に期待

激安スマホで話題の中国の新興企業UMIDIGIから同社のハイエンドモデルであるUMIDIGI S3 Proを提供してもらったから詳細にレビューしたい。UMIDIGIといえば1万円台でまともに使えるのが売りなんだけど、UMIDIGI S3 Proに関しては実売価格33,333円と同社のスマホの中で最も高い。UMIDIGI S3 ProがUMIDIGIにとって脱激安スマホの布石となるのかその詳細を見ていきたい。 UMIDIGI S3 Proの特長 まず最初にUMIDIGI S3 Proの特長をまとめる 33, ...

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.