前回の記事から少し期間が空いたが、ブログの広告表示に関する各種修正や、サブブログ用の開発環境構築などを行っていた。

今回は、広告表示に関する各種修正うちのひとつ、スマホ用ページでGoogle AdSense広告が表示されなかった件について、状況が改善したのでご報告したいと思う。

（2025/08/21朝更新・修正）

【目次】

【広告欄】

スマホ用ページでGoogle AdSense広告が表示されなかった理由（多分）

当ブログで掲載している広告のうち、Google AdSenseについて、以前、スマホ用ページの広告が表示上限を越えたらしく、表示できないという話を書いた。

だが実際のところは、レスポンシブ非対応ページに対してレスポンシブ対応広告を掲載していたことが原因らしく、固定サイズのバナーに貼り替えたら、正しく広告表示ができるようになった。

参考までに、Google AdSenseの手動広告については、レスポンシブデザインに対応したバナー広告と、固定サイズのバナー広告の両方を選択できる。

なお、パソコン用ページについては、AdSense広告が表示されたりされなかったりする。こちらは単純に表示上限に引っかかっているだけだと思うが。

レスポンシブデザインについて

もしかしたら「レスポンシブデザインとは何ぞや？」と思う方もいるかと思うので、大雑把に説明してみる。

今どきのウェブデザインは、レスポンシブデザインという概念があり、機種や画面サイズに関わらず、最適化されたページを表示する流れになっている。

レスポンシブデザインの大きな恩恵は、横スクロールバーを必要としないレイアウトにすることで、ユーザーの利便性を向上させるといったところであろうか。

縦にも横にもスクロールしないといけないwebページなんて、ただただ面倒なだけなので。

仕組みとしては主に、HTMLコードはコンテンツ（内容）に注力し、CSSだけで画面サイズに応じたデザインを行うような作りになっている。サイズも絶対値ではなく、相対値を使う。

テーブルタグを駆使してページのレイアウトを行うのは、大昔の話。

なお、レスポンシブデザインに対応か否かの確認は、パソコン限定になるが、ブラウザの横幅を広くしたり、逆に狭くしたりすると分かる。

ブラウザの横幅に応じてデザインが変化すれば、レスポンシブデザイン対応であり、逆に横スクロールバーが出てページ全体を見ることが出来なければ、レスポンシブデザインに非対応ということになる。

スマホだと、横スクロールバーが出なければ、レスポンシブデザイン対応と見てよいかと思う。

はてなブログのテーマによっては、このレスポンシブデザインに非対応のテーマがあり、~~現在、当ブログで使用しているテーマが、正にレスポンシブデザインに非対応だった。~~

当ブログで現在使用しているテーマ「Smooth」も、レスポンシブデザイン対応となっていた。

ただし、レスポンシブデザインに対応させるためには、はてなブログのデザイン設定内にある、スマートフォン用の個別設定で、チェックボックスをONにする必要がある。

つまり、当ブログではレスポンシブデザイン連動スイッチがOFFだったために、スマホ側ではレスポンシブデザインが無効になっていた、という具合だ。

はてなブログで使用されるテーマ全般に関わる話だと思うが、わざわざ設定（スイッチ）で切り替えとか、それってレスポンシブデザインと言っていいの？という疑問は残るが、これ以上は深掘りしない。

訂正ここまで。

現在使用しているテーマがレスポンシブデザインに対応しているか否かは、はてなブログのテーマストアを参照して欲しい。時々「レスポンシブデザイン」と書いているテーマが見つかるかと。

やはり慌てて記事を書くと、情報の精度が落ちる。修正前に記事を読んだ方々には申し訳ない。この場を借りてお詫びする。

ただ、今からレスポンシブデザインに対応した広告の張り直しを行うとなると、検証時間が相当かかりそうで、頭が痛い。