リモートワーク環境のデスクツアー

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

本サイトのコンテンツには、プロモーションが含まれている場合があります。

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

SWELLでバナー広告を中央に貼れない!と悩んでいる人が多いみたいなので、解決策を共有します。

カスタムHTMLブロックを使って、バナーを中央に揃える方法を紹介していきます。

前書きはこの辺にして、早速解決策を紹介していきます!

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

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

HTML
<div style="text-align: center;">
~ここにHTMLのコード~
</div>

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

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

使用するバナーは私も使用しているサーバーのConoHa WINGのものです。

普通に貼るとこんな感じ

カスタムHTMLブロックを使って普通に貼ると、左に寄ります。

コードとしては、以下の通り。(そのままコピペしただけ)

HTML
<a href="https://px.a8.net/svt/ejp?a8mat=●●●●●" rel="nofollow">
<img border="0" width="200" height="120" alt="" src="https://www21.a8.net/svt/bgt?aidxxxxxxxx&wid=001&eno=01&mid=sxxxxxxxxxxxxx&mc=1"></a>
<img border="0" width="1" height="1" src="https://www15.a8.net/0.gif?a8mat=●●●●●" alt="">

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

はい、中央に配置できました。

HTMLコードは以下の通り。(ASPからコピペしたものを指定のコードで挟み込む)

HTML
<div style="text-align: center;">
<a href="https://px.a8.net/svt/ejp?a8mat=●●●●●" rel="nofollow">
<img border="0" width="200" height="120" alt="" src="https://www21.a8.net/svt/bgt?aidxxxxxxxx&wid=001&eno=01&mid=sxxxxxxxxxxxxx&mc=1"></a>
<img border="0" width="1" height="1" src="https://www15.a8.net/0.gif?a8mat=●●●●●" alt="">
</div>

最初と最後に追記しているだけです。

SWELLじゃなくても、どんなテーマを使っていてもできます

SWELLで困っている人が多いみたいだったのでSWELLで書きましたが、この方法はどんなテーマを使っていても活用できます。

HTML
<div style="text-align: center;">
~ここにHTMLのコード~
</div>

ちょっと手間はかかりますが、見栄えが良くなるので是非使ってみてください。

ブログのカスタマイズで役立つ記事が他にもあるので、色々見てもらえると嬉しいです!

【コピペでOK】WordPressのカスタマイズ集18選【ほぼ必須のカスタマイズあり】 【コピペでOK】WordPressのカスタマイズ集18選【ほぼ必須のカスタマイズあり】 今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。