今回の記事では WordPressテーマ:賢威7のサイドバーにGoogleAdSenseの広告をはみ出さないように表示させる方法を紹介したいと思います。

賢威7には「サブコンテンツ」というサイドバー用のウィジェットエリアが用意されていますが、テキストウィジェットの中に広告コードを入れただけだと、ブラウザを狭めたときに広告がはみ出てしまいます。

コンテンツがはみ出てしまうとGoogle先生にも指摘されてしまいますし、何より印象が悪くなってしまいますよね。
ということで、今回のカスタマイズではPHPとCSSコードを編集して、サイドバーに広告をはみ出さずに表示させる方法を紹介していきます。

うちのサイトでも使っているオススメの方法なので、よかったら参考にしてみて下さい。

カスタマイズ後

300*250pxの広告を表示

↓ サイドバーの上部にAdSense広告を表示

sidebar-adsense-after-3

ブラウザの横幅を狭めた状態

↓ 広告がはみ出るサイズになると、一度広告が非表示になります。

sidebar-adsense-after-4

更に横幅を狭めた状態

↓ 非表示になった広告が再表示されます。

sidebar-adsense-after-2

1. sidebar.php を編集

今回はサイドバーに広告を表示させたいので、編集するファイルは sidebar.php です。
sidebar.php の81行目付近に、

<aside class="sub-conts sidebar">
    <?php
        dynamic_sidebar( 'sidebar' );
    ?>
</aside>

というコードがあるので、これを以下のコードで置き換えます。

(「ここに広告コードをコピペ」という部分に300*250pxの広告コードを入れます)

<aside class="sub-conts sidebar">
    <div class="sidebar-ad">
        ここに広告コードをコピペ
    </div>
    <?php
        dynamic_sidebar( 'sidebar' );
    ?>
</aside>

これでAdSense広告が表示されるようになりました。

ここでは300*250の広告サイズを表示させましたが、横幅が300pxほどのものなら、300*600pxのように縦に長い広告サイズでももちろん大丈夫です。

sidebar-adsense-after

2. サイドバーからはみ出さないようにCSSファイルを編集

賢威7では、サイドバーを固定幅ではなく30%という可変幅で指定しているので、ある横幅のサイズより狭くなってしまうと、AdSenseのような広告はどうしてもはみ出てしまいます。

サイドバーの横幅をレスポンシブのまま固定することも出来なくはないんですが、CSSコードをがっつり編集しないといけないので、ここでは広告がはみ出るサイズで一度非表示にして、、、

その後、2カラム表示から1カラム表示になって、横幅が広くなったらもう一度表示させたいと思います。

ややこしく聞こえるかもしれませんが、必要なコードはこれだけです。
以下のコードを base.css や 子テーマの sytle.css などのCSSファイルに追加します。

.sidebar-ad {
    text-align: center;
    margin-bottom: 40px;
}
@media only screen and ( min-width: 737px ) and ( max-width: 980px ) {
    .sidebar-ad {
        display: none;
    }
}

ブラウザの横幅を狭めてみると、、、

sidebar-adsense-after-1

非表示になりました。

でも更にブラウザの幅を狭めると、

sidebar-adsense-after-2

もう一度表示されるようになりました。
ちゃんと中央配置になっていますね。

これで完成です。