アフィリエイトのバナーを中央寄せにする方法？divタグを書くだけ

こんにちは、アキです。

アフィリエイトのバナーをコピペしたときに、本文の左寄せで表示されるの気になってる人いませんか？

だけどアフィリエイトのリンクコードを変更するのは禁止です。そんなときはどうすればいいの?という疑問を解決します！

WordPressのカスタムHTMLボックスを利用してアフィリエイト用のリンクコードを貼り付けるという前提で紹介していきます。

前提：カスタムHTMLボックス利用

↓普通にアフィリエイトのコードを貼るとこんな風に左側に寄ってしまいます。

悪くはないんだけど、画像は中央に表示したいな…というときありますよね。

下の画像は一部加工しています。汚くてすみません。

通常通り貼り付けたコード

ASPで取得したアフィリエイト用のコードは、WordPressブログのカスタムHTMLボックスで貼り付けることが多いと思います。

このままだと左に寄ったままになってしまいますが、カスタムHTMLボックスは通常のブロックと違い、中央寄せのボタンがありません。

中央寄せのためのdivタグを入力

そこで、バナーごと中央に表示させるためのタグを追記します。

この方法であれば禁止されているリンクコードを変更することにはならないので、画像が寄っているのが気になる場合は試してみてください。

上のタグを追記するだけで、こんな風に画面の中央に表示されます。

ややこしく追加CSSなどをいじらなくても記事単体で設定できますし、規約違反の心配もなくて安心です。

コピペして使える中央寄せのタグ

下のdivタグをカスタムHTML内で使えば、アフィリエイトのバナー広告を記事カラムの中央に表示できます。
左寄りになっているのが気になっている方はよかったらコピペして使ってみてください。

<div style="text-align: center">
ここにアフィリエイトのリンクコード
</div>

真ん中の「ここにアフィリエイトのリンクコード」という文字を消して、あなた専用のコードを貼り付けてdivタグで囲ってくださいね。

divタグとは？

端的に言うと装飾用のタグです。見出しや段落を構成する要素で、ブロック（かたまり）で扱われます。

divタグで囲った部分をひとかたまりとしてお好みの位置にレイアウトできます。

<div style=”text-align: center”> 文章 </div>　←これで文章が中央表示できます。

centerの部分をrightにすれば右寄りに、leftにすれば左寄りにできます。

まとめ

今回はアフィリエイトのバナー広告をページ中央に表示させる方法とそのタグをご紹介しました。

WordPressで記事を書いているとそこまでCSSやHTMLの知識は必要になりませんが、知っているとちょっといじりたいときに役立ちますよ。

手元に一冊あると、いちいち検索しなくてもすぐにチェックできるのでブログのちょっとした修正も便利です。