広告や画像を横並び(画面幅が狭い時は縦並び)で中央に配置する方法

WordPress

こんにちは、とみーです。

ブロガーの中では記事下の広告を横並びにすると収益がアップするという話で、わたしも実践してはいるのですが効果のほどはよくわかりません。人が少ないからそもそも広告がクリックされないという・・・。

その横並びをするにはCSSで指定するのですが、とあるワードで検索すると最初に出てくるページがテーブルタグを使う方法を紹介している始末。それ、よろしくないよ・・・!
(テーブルタグをレイアウトに使うのは本来の目的から外れているので避けたいのです。WEB界の常識。シンプルなタグで便利なんですけどね)

んで、単純な横並びならすぐ他の方法が見つかるのですが、横並びでも縦並びでも中央に配置するという方法がなかなか見つからなかったので、忘備録として残しておきます。

広告はもちろんブログランキングのバナー等で使えます。

スポンサーリンク

画面幅によって横並び・縦並びを自動的に切り替えて中央揃えする方法

スクリーンショット

画面幅が広いとき

20160504_01

画面幅が狭いとき

20160504_02

HTMLのみの場合

HTMLとCSSに分ける場合

HTML

CSS

解説

左側広告の閉じタグと右側広告の開始タグの間を改行せずに書いてあるのは意図的です。
改行すると微妙なスペースが入り、縦並びの際にほんのちょっとだけズレてしまうため、回避措置です。

横並びのポイントはdisplay:inline-blockです。
divタグは前後に必ず改行が入る仕様となっています。これを解消するのがdisplay:inline-blockです。

これについては説明するのが大変なので、こちらのサイトがおすすめです。(丸投げ)

CSSの display: inline、display: block、display: inline-block をマスターしよう! | たねっぱ!

CSS の display プロパティについて紹介します! display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け!

あとがき

わざわざwidthで広告の幅を指定する必要がありません。本当にコピペのみでOKです。

Google Adsenseはスマホ表示で画面内に2つ以上の広告掲載が禁止されていますので、こちらの記事と合わせて表示の切り替えを行ってくださいね。

WordPressで1・2・3番目のH2見出し前に広告を挿入する方法(モバイル表示対応版)

こんにちは、とみーです。こちらの寝ログさんの記事を参考に、更にスマホ or PC&タブレットで広告の表示を分け…