リンク広告(リンクユニット)の高さをスマホの時に低くしました
自分の環境ではリンク広告をスマートフォンで表示すると5列表示されるようです。
やや高さが気になるので調整しました。
ヘルプページを見るとレスポンシブのアドセンスコードであれば改変OKです
レスポンシブ広告コードを修正する方法 - AdSense ヘルプ
Google のレスポンシブ広告コードで、ご希望どおりの広告ユニットを作成できない場合は、お客様のレスポンシブ サイトの要件に合うように広告コー
HTML
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名は適宜決めてください)
<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>
CSSに下記コードを追加
スマートフォンの時には3列にします。
こちらの縦長タイプ見るとリンク広告1つあたりの高さは45pxっぽいので、45×3で135pxにしました
.adslot_4 { max-height: 90px; }
@media (max-width: 768px) { .adslot_4 { max-height: 135px; } }
max-height
にしましたがheight
でもいいかもしれません
@media (max-width: 768px) { .adslot_4 { max-height: 135px; } }
だけだと自分の環境ではうまく動きませんでした。
コメントなし: