読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

レスポンシブデザインでCSSメディアクエリを使って広告サイズを切り替える

はてな
スポンサーリンク

現在利用しているはてなブログのテーマ「Wedges.bin」ですが、このテーマはレスポンシブデザインに対応したテーマです。

ですので、PCはPC用、スマホはスマホ用に最適化されたサイズで、自動で記事を表示してくれます。

はてな☆イリュージョン 2 (ダッシュエックス文庫DIGITAL)

はてな☆イリュージョン 2 (ダッシュエックス文庫DIGITAL)


しかしながらこのサイトでも利用している広告は自動では大きさがかわるわけではありません。
するとPCに貼った広告がスマホで見ると横に「びよ~ん」と飛び出たりします。

それはちょっといやかな、ということで対策しました。

メディアクエリってのを使います。

ここではCSSのメディアクエリってのを使います。

これは「画面のサイズがいくらだったらこうしてね」みたいなことがCSSで書けます。

で、今回投入したCSSが以下のものです。

@media screen and (max-width: 767px) {
  .head_ad {
      display:none;
  }
  .head_ad_sp {
      display:block;
  }
}
@media screen and (min-width: 768px) {
  .head_ad {
      display:block;
  }
  .head_ad_sp {
      display:none;
  }
}

これをはてなブログのCSS設定に入れます。

次に実際に広告を出すところで

<div class="head_ad" align="center">
PCの広告URL
</div>
<div class="head_ad_sp" align="center">
スマホの広告URL
</div>

を挿入します。
(わたしは今は記事上に出してます。奥様や彼女にクリスマスプレゼントを。はよ。)

これでスマホの時は「head_ad_sp」で囲まれた広告、それ以外の時は「head_ad」で囲まれた広告が出る・・・はず。

スマホでのはみ出し「びよ~ん」は無くなっていると思います。
実際見てないのでわからないけど。

もし上手く出ない場合は「768px」とか「767px」を調整してみてください。
(あ、スマホを縦、横にして表示できるかのテストしてないや・・・。)

ではみなさん、がんばって。

スラスラわかるCSSデザインのきほん

スラスラわかるCSSデザインのきほん