当サイトではワードプレスのテーマ THE THOR ザ・トール を使用中です。 THE THOR には広告を表示する機能がいくつか備わっています。 個人的に【 背景スタイル 】を適用した広告表示がお気に入りです。
【 背景スタイル 】自体は気に入っているのですが、なぜか広告がずれて表示されてしまいます。
みなさんの広告はこうなっていませんか↓
僕はここに多少の違和感を感じました。本来は上下均一にスペースがあるべきではないかと。
僕が考える正しい状態↓
では修正していきましょう！
※正しく中央に表示されている場合は必要ありません。
※背景スタイルを無効にしている場合も必要ありません。
広告設定について
今回取り扱うのは特に多くの人が活用しているであろう広告設定[THE]での広告表示についてです。
広告設定について基本的な部分は以下の通り。
外観 → カスタマイズ → 広告設定[THE] → 個別ページ用広告設定
広告設定には、記事内広告の設定と記事下用ダブルレクタングル広告の2つがあります。ともに背景スタイルを設定することが可能です。
背景スタイルを設定するには「背景スタイルを無効にする」にチェックをしなければOK
※背景スタイルを使用しなければ広告のずれなどを気にする必要はありません。個人的には背景スタイルがあったほうがページデザイン上のアクセントになるので背景スタイルを採用しています。
記事内広告は、記事内の任意の場所に広告を表示したり最初のh2見出しの前に広告を表示したりの設定ができます。
記事下用ダブルレクタングル広告は、記事下に広告を表示します。PCでは広告を横並びで表示、スマホでは左側に設定した広告のみを表示します。スマホと相性の良い正方形に近い広告（レクタングル広告）をPCでは横並びにすることで無駄な隙間をなくし見た目もキレイに表示します。
THE THOR ザ・トール 広告設定 背景スタイル の中央に広告を表示させる
前置きが長くなりましたが修正していきましょう。
背景スタイルの中央に広告を表示するのが目的となります。
背景スタイルと広告が上揃えになっている状態なので広告に余白を設定して下側にずらします。
10pxほどずらすと背景スタイルの中央に広告が表示されるようになります。
広告に余白をつけるには、広告コードにpadding-top:10px;を追加します。
padding-top:10px;を追加するには広告コードをdivで挟むのが簡単です。
または、広告コードの中にpadding-top:10px;を組み込んでもOK
例（AdSense）
<ins class=”adsbygoogle” style=”display: block; padding-top: 10px;” data-ad-format=”autorelaxed” data-ad-client=”ca-pub-1234567890″ data-ad-slot=”1234567890″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
これで完成です。
※カスタマイズは自己責任でお願いします。
出来上がりサンプル↓
広告の配置に関しては以下の記事もあります。
【 AdSense広告 】をキレイに表示 ” センター揃え 編”
【 AdSense広告 】をキレイに表示 ”ちょっと横スクロール編”
あとがき
このカスタマイズはテーマのバージョンアップで必要がなくなる可能性が高いです。
なぜなら THE THOR の標準で背景スタイルの中に上下に10pxの余白つけるコードがありました。しかしそれが機能していませんでした。
用意されていた上下10pxのコード
<span class=”adPost__title”></span>
<span class=”rectangle__title”></span>
<span>の間に広告コードが挿入されるようになれば上下センターで広告が配置されるはずです。
ところが設定した広告コードはspanの間に挿入されていません。仕様なのか、ちょっとしたミスなのかわかりません。いずれバージョンアップで修正されるのではないかと思っています。
次回のカスタマイズは関連コンテンツの設置場所を予定しています。
次の記事は↓のほうから移動可能です。
