ブログのバナー広告を横に並べる方法について

こんにちは、みよし之です。

今回は、ブログのバナー広告を横に並べる方法について記事を書きました。

何がダメなのかよくわからないのですが、とあることをしたら横並びのように見せることができました。

ですが、最初の並び方と違って見た目は横並びになっているように見えます。

ここでは、アフィリエイト広告とアドセンス広告を横並びにする方法とそれぞれを並べてみた時についてを説明しています。

なお、テーマによって違いがあるかもしれません。

当サイトではXWRITEをテーマにしています。

広告を横並びにする方法について

広告を横並びする方法は、カラムを使って行います。

そして、広告を貼り付ける上で注意しておくことは、メインコンテンツの横幅になります。

当サイトが使っているXWRITEではメインコンテンツ幅は約850になります。Cocoonも同じくらいです。

コンテンツ幅に関して気になる人はこちらの記事をご覧ください。

コンテンツ幅を調べてみよう

ブログに画像をアップロードする際の横幅・縦幅について

こんにちは、みよし之です。 今回は、ブログに画像をアップロードする時、横幅や縦幅についてを記事にしてみました。 メインコ…

2023年10月22日 2024年4月20日

そのため、メインコンテンツ幅以上の横幅はおすすめできません。

試しにアフィリエイト広告を貼ってみたのですが、縮小して表示されていたのであまり意味がなさそうです。

ですから、２カラムの場合は425未満、3カラムの場合は282未満の広告を貼り付けることになります。

広告の貼り方について

広告の貼り方については、ワードプレス管理画面の左上にある+ブロック挿入ツールを開いて行います。

ツールを開くとカスタムHTMLのブロックがありますので、それをクリックします。

ワードプレス管理画面の上にあるブロックツールをHTML プレビューにすると広告が表示されていることを確認できます。

念のため、保存してプレビュー画面を見て確認しておきましょう。

• アフィリエイト広告+アフィリエイト広告
• アドセンス広告+アドセンス広告

サイズ違いを貼り付けなければ、きれいに横並びで表示されます。

ずれた広告を横並びにする方法について

ところで、目次上にある広告がおかしいことに気がついたでしょうか。

これも上記で説明したように、同じサイズのものを横に並べただけなのです。

なお、スマホでご覧の人はバナー広告が横並びになっていないのでご了承ください。

この組み合わせで表示させたものなのです。

これをきれいに横並びみたいにさせる方法について説明します。

私の場合は、アフィリエイト広告側のカラムに文字を入力して2回改行をしています。

最後に、アフィリエイト広告側に入力した文字を消去します。

このようにすると、並べて表示しているように見えるのです。

どのような感じになっているかは、記事の最後に表示させている広告のようになります。

改行による並び方の応用について

ここでは、改行を使っての応用をお伝えします。

上記の2カラムをご覧ください。2つともタイトル付きボックスを並べています。

実は、アドセンス広告側のボックス内にある空白部分は5回も改行しているのです。

それでも、微妙に高さにずれが生じています。

このように、改行もしくはShiftキー+改行を使うことによって、同じような高さに近づけることができます。

もし、バランスが悪いと思った時にはこのような手法を使ってみてください。

ちなみに、改行していない状態で表示させたらこのようになります。

このように、見た目の印象が大きく違ってきます。

まとめ

ワードプレス管理画面上では横並びになっているのですが、プレビューで確認してみるとおかしく表示されることもあります。

もし、見た目のバランスが悪いことがあれば、改行をうまく使うことによって違和感を緩和させることができます。

私の場合は、カラムでタイトル付きボックスをよく使うので、高さを意識しての改行を利用することも多いです。

この記事が皆さんのお役に立てれば幸いです。

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