【ブログ】SWELLのカスタムHTMLのバナーを中央に配置する方法

～こんな方へおすすめの記事です～
①有料テーマのSWELLを使用中
②アフィリエイトバナーが中央に配置できなくて困っている

SWELLにテーマを変更してから、カスタムHTMLバナーをうまく使うことができずに悩みました。

そこでcocoonを使っていた頃にクラシックエディタを使っていたことを思い出して、試しにコードを入力してみたところ、カスタムHTMLで作成したバナーを中央に揃えることができました。

本記事は自分用の保存用記事＋皆さんへの情報共有です。

もしかすると、僕がSWELLを使いこなせていないだけで、もしかしたら他に良い方法があるのかもしれません。

もし知っている方がいたら、こっそりTwitterのDMで教えてください。

それでは、よろしくお願いします。

SWELLのカスタムHTMLのバナーを中央に配置する方法

結論はHTMLの中に中央に配置するためのコードを追加するだけ。

<div style=”text-align:center;” >
～ここはHTMLのコード～
</div>

赤太文字の部分はコピーしてメモ帳などのファイルで皆さんのPCのデスクトップに貼り付けておきましょう！

実際にバナーを貼って実践してみますね。

使用するバナーは僕が副業で利用しているクラウドワークスのものです。

普通に貼ります

左に寄っているのがわかりますよね？

HTMLコードはこのようになっています。

<a href=”https://px.a8.net/svt/ejp?a8mat=3H9U89+B1PKVM+2OM2+TUVZL” rel=”nofollow”>
<img border=”0″ width=”600″ height=”100″ alt=”” src=”https://www20.a8.net/svt/bgt?aid=210411081668&wid=001&eno=01&mid=s00000012521005015000&mc=1″></a>
<img border=”0″ width=”1″ height=”1″ src=”https://www15.a8.net/0.gif?a8mat=3H9U89+B1PKVM+2OM2+TUVZL” alt=””>

中央に配置するコードを追加します

中央に配置できました。

HTMLコードはこのようになっています。

<div style=”text-align:center;” >
<a href=”https://px.a8.net/svt/ejp?a8mat=3H9U89+B1PKVM+2OM2+TUVZL” rel=”nofollow”>
<img border=”0″ width=”600″ height=”100″ alt=”” src=”https://www20.a8.net/svt/bgt?aid=210411081668&wid=001&eno=01&mid=s00000012521005015000&mc=1″></a>
<img border=”0″ width=”1″ height=”1″ src=”https://www15.a8.net/0.gif?a8mat=3H9U89+B1PKVM+2OM2+TUVZL” alt=””>
</div>

まとめ

なるべくシンプルに書いてみましたが、ご理解いただけましたでしょうか？

<div style=”text-align:center;” >
～ここはHTMLのコード～
</div>

現状、僕が利用している方法です。

一手間かかりますが、ブログの見栄えが確実に良くなりますよ！

ぜひ、使ってみてください。

そして、もっと良い方法があったらご教授ください…！

例で使ったクラウドワークスに興味を持って下さった方はこちら

⇒【副業】大手クラウドソーシング3社徹底比較【受注者向け】