カスタムHTMLで広告バナーを中央に表示する方法(コピペで使える)

商品コードをコピペするだけですとバナーは左に寄ってしまいます。
「どうしてもバナー広告を中央に表示したい！」私と同じように悩んでいる方に、解決策を共有します。

この記事では、パソコン超初心者の方でもコピペするだけで簡単にバナーを中央に表示する方法をお伝え致します。

SWELLでアフェリエイトリンクを貼る方法

こちらにアフェリエイト広告の貼り方をくわしく解説しています。

そして人気のWordPressテーマSWELLアフェリエイトのやり方をくわしく解説しています。

広告バナーを中央に表示する方法

そのまま貼り付けると広告バナーは「左寄り」になります

紹介したい商品のHTMLコードを、そのままカスタムHTMLに貼り付けますと、

広告バナーは、左寄りになります。

広告バナーを「中央」に表示させるには

中央に配置するためのコードを追加するだけです。

商品のHTMLコードの前に<div style=”text-align: center;”>
商品のHTMLコードの後ろに</div>
を追記しています。

広告バナーが中央に表示されました。

HTMLの豆知識

HTMLの基本とタグについて

この記事では、<div style=”text-align: center;”>商品のHTMLコード</div>をコピペして使って下さいとお伝えしました。
折角コードを使うのですから、少しでも興味をもっていただけたら嬉しいです。

こちらで使われている<div></div>は、タグと呼ばれるものです。
最初に書かれている<div>を、開始タグ。そして</div>のように「/」が加えられた、後ろに書かれた方を終了タグと呼びます。

この<開始タグ>と</終了タグ>は基本的にセットで使われます。
タグの種類によって、終了タグがないものもあります。

HTML&CSSの勉強に、おすすめの一冊です

タグに情報を書き加える

<div style=”text-align: center;”>商品のHTMLコード</div>
のstyle=”text-align: center;”の部分は、divタグにstyleという付属情報を加えています。
タグ名のあとにスペースを開けて入力します。

“text-align: center;”の部分は、「真ん中に表示する」という情報内容になります。
「”(ダブルクォーテーション”」で囲んで記述します。

まとめ

バナーを中央に寄せるのは、<div style=”text-align: center;”></div>を商品コードを包み込むように追加するだけです。
コードをコピペして、商品コードを貼り付けるだけ。簡単に見栄えがよくなりますのでぜひお試し下さい。