WordPress運営のサイトに設定しているアドセンス広告を、センタータグを使わずに、中央寄せする方法を紹介します。
センタータグは使わないといっても、まったく難しくありません。ほとんどコピペで終わります。
Coco
目次
アドセンス広告を中央寄せに表示する3つの方法
アドセンス広告を中央に寄せて表示するには、次の3つの方法があります。
- プラグインを使う（非推奨）
- CSSを設定する（推奨）
- センタータグを使う（非推奨）
1：プラグイン「Master Post Advert」を使う
「Master Post Advert」というプラグインを使って、アドセンス広告を中央寄せにする方法もありますが、オススメしません。
というのも、プラグインを入れるほど設置が難しくないからです。素人でも、後述する方法をおこなえば、誰でもアドセンス広告を中央寄せにできます。
また、そもそもWordPressにプラグインを入れすぎると、動作が重くなってしまいます。
今回のような簡単なカスタマイズくらいであれば、プラグインを入れなくても大丈夫です。
Coco
2：CSSを設定する（推奨）
CSSのコードを数行設定するだけで、アドセンス広告を中央寄せにできます。この方法が、私が今回推奨する方法であり、後にわかりやすく解説しています。
3：センタータグは非推奨なので使わない
センタータグとは、「<center></center>」というタグです。
こちらは今後廃止される予定になっており、使わないほうが無難です。
Coco
style.cssに中央寄せのCSSをコピペ
WordPressの管理画面を開き、【外観】＞【テーマの編集】へ移動します。
記事執筆現在、当サイトではWordPressテーマ「SANGO」を使用しています。SANGOの導入方法に従っていれば、子テーマの「style.css」が表示されるはずです。
どのWordPressテーマに限らず、子テーマの設定をしていない方は導入を強くオススメします。SANGOの場合は公式サイトで詳しく解説されています。
WordPressで子テーマを活用して安全にカスタマイズを行う方法 | SANGOカスタマイズガイド
次に、「style.css」に以下のCSSコードをコピペしましょう。
/* ======================================
カスタマイズ div 中央寄せ
======================================== */
.tac {
text-align: center;
}
FillezillaなどのFTPソフトを使用している場合は、そちらからおこなうのが基本です。ただ、今回は簡単なコード追記のため、管理画面からおこないます。
Coco
これで下準備は終了です。はやっ。
アドセンスコードをdivタグで囲む
次に、中央寄せにしたいアドセンスコードを以下のコードで囲みます。
<div class="tac">ここにアドセンスコードを入れる</div>ただのdivタグではなく、<div class=”tac”></div>で囲まないと中央寄せにならないので、注意してください。
上記のタグで囲んだ後は、ウィジェットなり、phpファイルにべた書きするなり、今まで貼っていた場所に貼り付けてください。
CSSが適用されず中央寄せにならない場合は、キャッシュクリアをすれば反映されるかと思います。Chromeブラウザを使用しているなら、「Clear Cache」というプラグインがおすすめです。
この書き方はオススメしません
アドセンスコードを、以下の方法で中央寄せにするのは、技術的にオススメしません。
<div style="text-align:center;">アドセンスコード</div>これは、CSSに「中央寄せのコード」を書かず、HTML上で中央寄せにしているということです。
なぜダメかというと、<div style=”text-align:center;”></div>を使って複数のアドセンスコードを囲むと、画面上に同じコードがいくつも表示（重複）されることになるからです。
「Googleは重複コードが嫌い」、「表示速度が遅くなる」など、いろいろ理由はあるのですが、とりあえずこの書き方はオススメしません。
Coco
実際にやってみよう
以下の画像は、今回紹介したCSSを設定していない場合です。サイドバーにあるアドセンスが、左に寄っててちょっと不細工ですよね。
CSSを設定した後はこちら。アドセンスが中央寄せになり、バランスが良くなりましたね。
もちろん、PCだけではなく、スマホ画面でも中央寄せにすることができます。
Coco
