tableタグを使わずアドセンスを横並びにする方法

1、アドセンス広告のコードを作成する

まずはGoogleアドセンスのサイトで広告コードを作成します。

広告を作成するときはユニットの概要を「イメージ／レスポンシブ」にしておいてください。

アドセンス広告のコードを取得すると以下のような構造になっていると思いますが、今回はその一部を変更。

●レスポンシブ用のサンプル基本コード例

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

レスポンシブ広告コードを修正する方法 – AdSense ヘルプ

このコード内にあるdata-ad-format部分をautoからrectangleに変更します。上記のサンプルコードでは７行目にあたる部分ですね。

formatをレクタングルにすることで高さの揃った広告ユニットが表示されるため、ここは忘れずに変更しましょう。

２、HTMLコードを記述する

HTMLコードははてなブログのデザイン→→記事下に記入します。該当箇所には変更したアドセンスコードを記入しておいてください。

HTML

<!-- Googleアドセンス -->
<div class="adbox">
<div class="adsense-left">
//ここにアドセンス広告のコード１を貼る
</div>
<div class="adsense-right">
//ここにアドセンス広告のコード２を貼る
</div>
</div>
<!-- 記事本文のすぐ下に移動し、「スポンサーリンク」も追加。ただしIE8などの古いブラウザを除く -->
<script>
    if ( document.getElementsByClassName ) {
        var inserteds = document.getElementsByClassName("adbox");
        var footerAd = inserteds[inserteds.length - 1];
        var entryContent = document.getElementsByClassName("entry-content")[0];
    
        var sponsorLink = document.createElement("div");
        sponsorLink.textContent = "スポンサーリンク";
        sponsorLink.style.cssText = "font-size:70%";
    
        entryContent.appendChild(sponsorLink);
        entryContent.appendChild(footerAd);   
    }
</script>

今回は左右の広告をadboxで囲っているため、参考コードの２行目をadboxというクラス名に変更しています。

３、CSSを記述する

HTMLの次はCSSでスタイリングしていきます。

以下のコードをデザイン→→デザインCSSに貼り付けてください。

CSS

.adbox{
width:100%
}
.adsense-left{
width: 50%;
padding:0px;
display: inline-block;
}
.adsense-right{
width: 50%;
float:right;
padding:0px;
display: inline-block;
}
@media screen and (max-width:768px){
.adsense-right{
display:none;
}
.adsense-left{
width:100%;
}
}