カテゴリー
WordPress

【WordPress】【CSS】広告を2つ横並びで表示させる！スマホの場合は縦に表示させる！

広告を2つ横並びで表示させたいですの！スマホの場合は縦に表示させたいですの！

WordPress テーマを弄るのは面倒ですし、広告表示プラグインと別の場所に変更を加えますとプラグイン変更時やテーマを変えたいときに忘れる元となりますのでプラグインに設定した広告コード入力欄への変更でのみ実現いたしました。

具体的には CSS の回り込み（float）を駆使する内容となっておりますの♪

WordPress プラグイン

広告コード修正にあたっての準備

Quick Adsense の設定で次を変更いたします。

  • Appearance : Hide Ads when user is logged in to WordPress のチェックを外す。

この設定変更は一時的なもので、すべて完了後もとに戻します。目的は、広告部分のソースの変更をすぐに確認できるようにすることですの♪

実現したいこと

  • Google Adsense の広告の右側のスペースに Amazon アソシエイトの広告を表示させる。
  • ウェブブラウザの幅が広い時は横並び、狭い時は縦並びに、ページのリロード無しで動的に配置を変更させる。
  • PCでの表示時は横並び、スマホでの表示時は縦並び、となることを念頭に置いている。

ブログ、広告のサイズについて

  • ブログ　max-width: 474px;
    （テーマ Twenty Fourteen の子テーマ）
  • 広告ブロック
    • Google Adsense　300×250 – レクタングル（中）
    • Amazon アソシエイト　120x250
  • 本当は、Amazon アソシエイトのサイズを「300×250」としたかった。しかし、このようにすると2つの広告を足しあわせた幅 600px > ブログ幅 474px となり、常に縦並びとなるため広告サイズを横幅が 120px と小さなものに変更した。

Google Adsense の広告フォームに入力するソース

Adsense Codes の Ads1 などに次のように入力いたします。

<style type="text/css">
<!--
.ads {
    clear: both;
}
.ads #adleft {
    float: left;
    margin: 5px;
}
.ads #adright {
    float: left;
    margin: 5px;
}
.ads:after {
     content: '';
     display: block;
     clear: both;
}
//-->
</style>

<div class="ads">
    <div id="adleft">
        <!-- Google Adsense 300× 250 - レクタングル（中） -->
    </div>
    <div id="adright">
        <!-- Amazon アソシエイト Amazonおまかせリンク（R) 120x240 -->
    </div>
</div>
<hr>

広告コードのポイント

主に CSS の回り込み（float）に関する解説となっております。

  • 最初に <div class=”ads”> の clear: both; によって、この前にどんな回り込み設定があったとしても解除する
  • .ads #adleft、.ads #adright に float: left; を設定することで、ページの幅によって広い場合は広告が横に並ばせ、幅が狭い場合は縦に並ばせる
  • .ads #adright にも float: left; を設定する。設定しなくとも目的は達成できるが、.ads #adright に .ads #adleft が含まれてしまうし、その影響で位置が若干ずれてしまう。
  • .ads:after を設定することで、<div class=”ads”> の直後に設定した内容を適用させる
  • .ads:after の目的は、最後の clear: both; で回り込みを解除させること。それによって以降のコンテンツに影響を与えないようにしている。 content: ‘’; が無いと ::after が有効にならなかったし、display: block; が無いと回り込みの解除が有効ならなかった（Chrome 調べ）。

.ads #adright にも float: left; を設定することは、地味ですが重要と存じます。

設定を忘れますと .ads #adright に .ads #adleft が含まれてしまいますが、これによって入れ子状態が複雑となり、今後のメンテナンスが混乱する元となってしまうと存じます＞＜。

おわりに。参考ページ

参考ページや箇所をご紹介いたします。構造のみなど部分部分参考にさせていただいて作り上げました。感謝申し上げます！

以上です。

コメントを残す