Twitter icon Facebook icon Line icon Hatena Bookmark icon Pocket icon Feedly icon

[リンクユニット サイズ変更] スマホの時の高さを調整しました。[リンク広告]




リンクユニットの高さ調整アイキャッチ画像

リンク広告(リンクユニット)の高さをスマホの時に低くしました

自分の環境ではリンク広告をスマートフォンで表示すると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; } }だけだと自分の環境ではうまく動きませんでした。

 




NHkで紹介されました。

0 件のコメント :