バナーをページの中央に表示したい!カスタムHTMLを中央寄せする方法

カスタムHTMLで中央寄せ

こんにちは。IT系ワーママのりょうこです。

ブロガーさん

アフェリエイトのバナーをページの真ん中に貼りたいけど、どうやっても表示が左寄せになっちゃう…どうすればいいの??

りょうこ

アフェリエイトのバナーをWordPressの記事に追加する際、カスタムHTMLブロックを使用すると中央寄せ(センタリング)が出来ずに困りますよね。

実は、カスタムHTMLブロック内にちょこっとCSSコードを追加すれば大丈夫です。

この記事の内容のコピー&ペーストでいけますので、コードの意味がわからなくても問題ありません。

私はIT系の仕事に20年以上従事しており始めたばかりのブロガーさんからWordPressの質問を受けることも多いですが、アフェリエイトバナーの貼り方については「こんな簡単にできるなんて!」と喜んでいただけます。

アフェリエイトバナーを貼るさいは本記事を思い出して、クリックしたくなるバナー作成にチャレンジしてみてくださいね。

この記事を読むとこんなことがわかります。

この記事でわかること
  • WordPressでアフェリエイトバナーを中央寄せする方法
  • WordPressのカスタムHTMLブロックで中央寄せする方法

\ConoHaWINGなら2つの独自ドメインが無料♪/

目次

アフェリエイトバナーを中央寄せする方法

WordPressでブログを運営していると、商品紹介の際にアフェリエイトバナーを貼る機会があります。

アフェリエイトバナーを貼るときはA8.netバリューコマースなどのASPと契約し、商品の広告バナーを取得して記事に貼りますが、カスタムHTMLブロックを使用すると中央寄せが選べなくて困ることがあります。

カスタムHTMLは中央寄せが選べない

段落ブロックの場合は、下図のように「テキスト中央寄せ」を選択することで文字列をページの中央に表示させることができますね。

段落ブロックの場合

しかしながら、アフェリエイトの広告バナーを表示させるために使用するカスタムHTMLブロックでは、中央寄せを選択することができません

カスタムHTMLの場合

例として、A8.netのバナーを本記事に貼り付けてみます。

そのままだと上図のように左寄せの表示になります。

カスタムHTML内にdivタグを追加しよう

カスタムHTMLブロックで中央寄せにする場合はCSSを使います。

ブロガーさん

え、CSSとかコードとか無理です…

りょうこ

大丈夫!難しいことはありません。コピー&ペーストだけでいけます。CSSデビューにぴったりのコードです。

アフェリエイトサイトでコピーしてきたコードを、カスタムHTMLブロック内で

<div style="text-align:center;">

</div>

で挟んであげてください

以上、それだけです。

補足:
div は DIVision(区分)の略です。
上記はdivで囲まれた部分のstyleを、中央寄せ(center)にして下さいという指示になります。
※もう少し正確に言うと<div>はHTML、text-align:center; の部分はスタイルシート(CSS)にあたります。

具体例(a8.netの場合):

中央寄せの例

アフェリエイトサイトでコピーしてきたコードを<div style=”text-align:center;”>と</div>で挟んだことにより、バナーが無事中央寄せになりました。

そのまま貼ると左寄せになります

↓↓↓  <div style=”text-align:center;”>と</div> で挟むと ↓↓↓

中央寄せになりました

まとめ:カスタムHTML内でdivタグを使えば中央寄せできる

バナーの上にマイクロコピーをつけるときなど、中央寄せしたくなることありますよね。

\バナーにはマイクロコピーをつけよう!/

カスタムHTMLでは中央寄せボタンが表示されませんが、HTMLのなかに<div>タグを入れることで簡単に中央寄せすることができます。

CSSに苦手意識のあるあなたこそ、始めの一歩としてぜひ挑戦して下さい!

\この記事が役に立ったと思われたら、ぽちっとクリックお願いします/
にほんブログ村 子育てブログへ

コメント

コメントする

CAPTCHA


目次
閉じる