【ブログ】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社徹底比較【受注者向け】

最後まで読んでいただき
ありがとうございました

Twitterでも有益な情報を発信しているのでフォローをしてもらえると嬉しいです!

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

シェアやフォローよろしくお願いします!

ブログ運営者

●大学病院の看護師
●専門
脳神経外科、救急医療
コロナ専門病棟
急変対応、蘇生教育
●資格
看護師
保健師
第一種衛生管理者
日本救急医学会 
ICLSインストラクター
ISLS認定インストラクター
JPTECプレインストラクター
●Age:29
●趣味:読書、音楽・映画鑑賞
●資産運用:米国株/高配当株/インデックス投資/FX/仮想通貨

コメント

コメントする

目次
閉じる