すたすた式
Blogger Vaster2
自分の環境ではリンク広告をスマートフォンで表示すると5列表示されるようです。
やや高さが気になるので調整しました。
ヘルプページを見るとレスポンシブのアドセンスコードであれば改変OKです
レスポンシブ広告コードを修正する方法 - AdSense ヘルプ
Google のレスポンシブ広告コードで、ご希望どおりの広告ユニットを作成できない場合は、お客様のレスポンシブ サイトの要件に合うように広告コー
HTMLを編集します。必ずバックアップを取ってから作業してください。
もともとのレスポンシブ リンクユニットのHTMLはこんな感じです
<ins class='adsbygoogle' data-ad-client='ca-pub-****************' data-ad-format='link' data-ad-slot='**********' style='display:block'/> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
class に adslot_4を追加しました（class名は適宜決めてください）
adslot_4
<ins class='adsbygoogle adslot_4' data-ad-client='ca-pub-****************' data-ad-format='link' data-ad-slot='**********' style='display:block'/> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
スマートフォンの時には3列にします。
こちらの縦長タイプ見るとリンク広告1つあたりの高さは45pxっぽいので、45×3で135pxにしました
.adslot_4 { max-height: 90px; } @media (max-width: 768px) { .adslot_4 { max-height: 135px; } }
max-heightにしましたがheightでもいいかもしれません
max-height
height
@media (max-width: 768px) { .adslot_4 { max-height: 135px; } }だけだと自分の環境ではうまく動きませんでした。
@media (max-width: 768px) { .adslot_4 { max-height: 135px; } }
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿