Wordpress 記事内のバナー広告やテキスト広告の配置を中央に合わせる

WordPressでブログを運営していると商品紹介のアフィリエイトバナーを記事内に貼る機会があります。

さばさばちゃん

そのままバナーや広告などを貼り付けると、左に寄って表示されてしまいますね。

Webページの表示幅と同じくらい幅の広いバナーであれば、気にならない場合もあるかもしれません。

様々なデバイスで表示するなら中央に寄せておきたいですね。

この記事では頻繁に使うバナー広告やテキスト広告を中央寄せで表示する方法を解説します。

Contents

記事内のバナー広告やテキスト広告の配置を中央に
アフェリエイトバナーを中央寄せする方法
例 : バナーにCSSプロパティを追加してみた
WordPress 記事内のバナー広告やテキスト広告の配置を中央に合わせるのまとめ

記事内のバナー広告やテキスト広告の配置を中央に

WordPressの記事内にバナーや広告などを貼り付けしようとすると、左に寄って表示されてしまいます。

A8.netやバリューコマースなどのASFのアフィリエイトバナー自体は配置については関知していません。

したがってリンクを記事に貼り付けた状態のままでは左寄せで表示されます。

またカスタムHTMLブロックを探しても、中央寄せに関しての設定がありません。

配置したい広告やバナーを中央寄せで表示させるには、貼り付けしたいバナーや広告のHTMLソースと一緒にCSSをコードのタグに追記します。

アフェリエイトバナーを中央寄せする方法

CSSやコードと聞くと難しく感じるかもしれません。

アフィリエイトのHTMLコードを記事に貼り付けたことがあれば、要領は同じです。

以下のコードを貼り付けたいHTMLコードの前後に記述します。

それほど複雑なコードではありませんので以下にならってそのまま打ち込んでください。

貼り付けしたい広告バナーなどのHTMLコードをここに貼り付け

</div>

例 : バナーにCSSプロパティを追加してみた

以下のようにCSSを追記してバナーがどうなるのかを見てみましょう。

<div style=”text-align:center;”>ここに広告用コードを貼り付け</div>

あじまる

まずCSSを何も追記していない状態です。

なおこのバナー広告にはリンクが貼ってあります。

バナーリンクはそのまま表示されますので左寄せで表示されています。

ひらひらちゃん

HTMLコードのみコードのタグに貼り付けると左に寄っていますね

あじまる

次にこのCSSに沿ってコードのタグにHTMLコードを記載

<div style=”text-align:center;”>ここに広告用コードを貼り付け</div>

ひらひらちゃん

「text-align: center;」プロパティを使用して中央揃えになっています。

あじまる

次にちょっとした応用です。

「text-align: center;」の”center”を”right”に書き換えてみました。

ひらひらちゃん

右寄せになりましたね。

あじまる

「text-align: center;」の”center”を”left”に書き換えてみました。

ひらひらちゃん

左寄席になりました。見た目は何も追記していない状態と同じですね。