【WordPress】アドセンスを中央寄せに配置する方法(センタータグ不使用)

WordPress運営のサイトに設定しているアドセンス広告を、センタータグを使わずに、中央寄せする方法を紹介します。

センタータグは使わないといっても、まったく難しくありません。ほとんどコピペで終わります。

Coco

センタータグの使用は非推奨なので、HTMLとCSSを使います!

アドセンス広告を中央寄せに表示する3つの方法

アドセンス広告を中央に寄せて表示するには、次の3つの方法があります。

3つの方法
  1. プラグインを使う(非推奨)
  2. CSSを設定する(推奨)
  3. センタータグを使う(非推奨)

1:プラグイン「Master Post Advert」を使う

「Master Post Advert」というプラグインを使って、アドセンス広告を中央寄せにする方法もありますが、オススメしません。

というのも、プラグインを入れるほど設置が難しくないからです。素人でも、後述する方法をおこなえば、誰でもアドセンス広告を中央寄せにできます。

また、そもそもWordPressにプラグインを入れすぎると、動作が重くなってしまいます。
今回のような簡単なカスタマイズくらいであれば、プラグインを入れなくても大丈夫です。

Coco

使ったらダメではないのですが、使うまでもありません。

2:CSSを設定する(推奨)

CSSのコードを数行設定するだけで、アドセンス広告を中央寄せにできます。この方法が、私が今回推奨する方法であり、後にわかりやすく解説しています。

3:センタータグは非推奨なので使わない

センタータグとは、「<center></center>」というタグです。

こちらは今後廃止される予定になっており、使わないほうが無難です。

Coco

それでは、CSSを設定してアドセンス広告を中央寄せにしましょう!

style.cssに中央寄せのCSSをコピペ

WordPressの管理画面を開き、【外観】>【テーマの編集】へ移動します。

外観からテーマの編集へ移動する

記事執筆現在、当サイトではWordPressテーマ「SANGO」を使用しています。SANGOの導入方法に従っていれば、子テーマの「style.css」が表示されるはずです。

子テーマが表示される

どのWordPressテーマに限らず、子テーマの設定をしていない方は導入を強くオススメします。SANGOの場合は公式サイトで詳しく解説されています。

WordPressで子テーマを活用して安全にカスタマイズを行う方法 | SANGOカスタマイズガイド

次に、「style.css」に以下のCSSコードをコピペしましょう。

CSS
/* ======================================
カスタマイズ div 中央寄せ
======================================== */
.tac { 
	text-align: center;
}

FillezillaなどのFTPソフトを使用している場合は、そちらからおこなうのが基本です。ただ、今回は簡単なコード追記のため、管理画面からおこないます。

Coco

「/*〜*/」で囲んだ部分はコメントなので、自分がわかりやすいように書いてもOKです。

これで下準備は終了です。はやっ。

アドセンスコードをdivタグで囲む

次に、中央寄せにしたいアドセンスコードを以下のコードで囲みます。

HTML
<div class="tac">ここにアドセンスコードを入れる</div>

ただのdivタグではなく、<div class=”tac”></div>で囲まないと中央寄せにならないので、注意してください。

上記のタグで囲んだ後は、ウィジェットなり、phpファイルにべた書きするなり、今まで貼っていた場所に貼り付けてください。

CSSが適用されず中央寄せにならない場合は、キャッシュクリアをすれば反映されるかと思います。Chromeブラウザを使用しているなら、「Clear Cache」というプラグインがおすすめです。

この書き方はオススメしません

アドセンスコードを、以下の方法で中央寄せにするのは、技術的にオススメしません。

HTML
<div style="text-align:center;">アドセンスコード</div>

これは、CSSに「中央寄せのコード」を書かず、HTML上で中央寄せにしているということです。

なぜダメかというと、<div style=”text-align:center;”></div>を使って複数のアドセンスコードを囲むと、画面上に同じコードがいくつも表示(重複)されることになるからです。

「Googleは重複コードが嫌い」、「表示速度が遅くなる」など、いろいろ理由はあるのですが、とりあえずこの書き方はオススメしません。

Coco

何を言っているかわからない場合、とにかくこの書き方は避けておきましょう。

実際にやってみよう

以下の画像は、今回紹介したCSSを設定していない場合です。サイドバーにあるアドセンスが、左に寄っててちょっと不細工ですよね。

設定する前

CSSを設定した後はこちら。アドセンスが中央寄せになり、バランスが良くなりましたね。

アドセンスが中央寄せになった

もちろん、PCだけではなく、スマホ画面でも中央寄せにすることができます。

Coco

参考になれば幸いです!