バナー広告を中央に配置する方法｜初心者でもコピペでできる簡単な調整方法を解説！

• コピーしました

「記事の中にバナー広告を貼ったのに、なぜか左に寄ってしまってカッコ悪い…」

この記事にたどり着いたあなたは、きっとこんなモヤモヤを抱えているのではないでしょうか。

私自身も、ブログを始めたばかりの頃、ASPから貼り付けたバナーが左端に寄ったままの状態を見て「どうすれば中央に寄せれるのか」分からなくて、あきらめていた時期があります。

スマホでは気になりませんが、パソコンで見るとカッコ悪！って思ってしまいます。

でも、ご安心ください。

バナー広告の中央配置は、CSSをちょっと追加するだけです。

CSSが苦手でも、コピペで簡単に中央へ寄せることができますので、ぜひ参考にしてください。

バナー広告を中央に配置する方法

ASPから発行されたバナーコードをそのまま記事に貼り付けると、次のように画像は左端にピタッと寄って表示されます。

特に、パソコンのように横幅が広い画面だと違和感がありますよね。

これは、CSSコードを調整することで解決することができます。

方法はとても簡単！

<div style="text-align: center;">と</div>の間にASPバナーコードをそのまま貼り付けるだけです。

↓こんな感じです↓

HTMLやCSSが苦手でも、これさえ覚えれば今すぐ中央に寄せることができますよ。

詳しく解説していきますね。

はじめに、記事の編集画面の「+」をクリックします。

次に「カスタムHTML」を選択してください。

「カスタムHTML」が出てこない場合は、検索窓に「カスタム」と入力すれば出てきます。

すると、「カスタムHTMLブロック」が表示されます。

表示されたカスタムHTMLブロックの中に、次のCSSをコピーして貼り付けてください。

こんな感じです！

最後に、

<div style="text-align: center;">と</div>の間にバナーコードを貼り付ければ完成です！

これだけの作業でバナー広告が中央に寄りました！

「インラインスタイル（style属性）はあまり推奨されない」という意見もありますが、記事内の1か所だけの調整なら実用上まったく問題ありません。

一番簡単でストレスなく中央へ配置できる方法なので、ぜひお試しください。

まとめ：バナー広告を中央に配置する方法

バナー広告を中央に配置する方法をご紹介しました。

やり方はとても簡単！

<div style="text-align: center;">と</div>の間にASPバナーコードを貼り付けるだけです。

実際、このほかにも、次のようなやり方があります。

でも、いずれもHTMLやCSSコードに関する知識がないと、不具合が起こったときの対応が大変！

私のようなHTMLやCSSの知識がない、あるいは苦手な方は、まずは今回紹介した方法を試してみてください。

• コピーしました