フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

2ステップでアドセンスをセンタリング(中央寄せ)する方法

2020 5/02
2ステップでアドセンスをセンタリング(中央寄せ)する方法

読了目安時間は約 5 分です。

アドセンス広告をそのまま普通に貼ると、デフォルトでは右揃えになってしまい不格好です。そこで、非推奨のセンタータグを使わずに、中央寄せする方法を紹介します。

コピペによる2ステップで終わりますので、3分もかからず完了です。とっても簡単です。

デザイナーのサイトなのに見栄えが悪いと「デザインの基本もできていないのかよ」と言われてしまいますし(汗)、そんなサイトではクリック率にも影響しそうですからね。

目次

アドセンス広告をセンタリングする方法は3つ

アドセンス広告を中央寄せにする方法には、実は3つあります。

  1. センタータグを使う(非推奨)
  2. プラグインを使う(こちらも推奨できません)
  3. CSSを設定する(当サイト推奨!)

センタータグを使う(非推奨)

よく見かけるのは「<center>※ここにアドセンスコードを入れます</center>」というタグを使用する方法です。

しかしなぜ【非推奨】かというと…なんとこのタグは今後廃止される予定になっているのです。

他の方法で簡単に代用できるので、<center>タグは不要といえば不要なんですよね…

というわけで、今後は使わないようにしましょう。

プラグインを使う(こちらも推奨できません)

WordPressでアドセンスを配置するプラグインには

  • WP QUADS
  • Advanced Ads
  • Master Post Advert

などがあり、これらには中央寄せしてくれる機能がついています。これを用いてセンタリングしてもよいのですが、あまりオススメできません

理由は後述します。

そもそもプラグインを使うよりも簡単に設定できますので、下記の方法をオススメします!

CSSを設定する(当サイト推奨!)

「CSSかよ」と難色を示す方もおられるかと思いますが、コピペによる2アクションで完了なので簡単ですそれでは早速見ていきましょう。

センタリングさせるCSSコードをコピペする

まずWordPressの管理画面を開き、[外観]>[カスタマイズ]>[追加CSS]へ移動します。

[追加CSS]に、下記のコードを貼り付けてみてください。

.adcenter{
text-align:center;
}

これでまず1ステップ。

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

次にアドセンスコードを以下のHTMLで囲みます。

<div class="adcenter">
※ここにアドセンスコードを入れます
</div>

こうしてアドセンスコードを<div>で囲まないと、中央寄せにならないのでご注意を。
記事の任意の場所に貼り付けて保存。

これをウィジェットなどで任意の場所に配置してみてください。(自信があればphpに直書きでもOKです。)

これで2ステップ。完了です。

あっという間です。

オススメできない書き方

下記の方法でも、一応アドセンス広告を中央寄せにすることは可能です。

<div style="text-align:center;">
※ここにアドセンスコードをを入れます
</div>

この方法を推奨するサイトもありますが…これはあまり良い書き方ではありません。

なぜオススメできないかというと…これはHTML上で中央寄せにしているのですが、この方法で複数のアドセンスコードを囲むと、同じコードが重複することになるためです。

Googleは重複コードを嫌います。また、同じコードを何度も読み込むため表示速度が若干遅くなります。他にも理由はあるのですが、なるべくCSSを書いてスッキリさせたほうが良いです。

前述のプラグインでセンタリングする方法がオススメできない理由もこれです。自動的にこのようなコードが入ってしまうので、プラグインをインストールして設定する時間があればCSSが書けますので、ぜひこの方法でやってみてください。

まとめ

というわけでアドセンス広告のセンタリング(中央寄せ)は

  • [追加CSS]にコードを追記する
  • <div>タグでアドセンスコードを囲む

以上。これが当サイトが推奨する方法です。

できるだけ、コードは簡潔に書いたほうがいいですよ。という話でした。

この記事が気に入ったら
フォローしてね!

目次
閉じる