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

2016-05-04Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

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

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

その横並びをするにはCSSで指定するのですが、とあるワードで検索すると最初に出てくるページがテーブルタグを使う方法を紹介している始末。それ、よろしくないよ・・・!

テーブルタグをレイアウトに使うのは本来の目的から外れているので避けたいのです。WEB界の常識。
シンプルなタグで使いやすいのですが、表機能として使うのが一般的です。

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

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

スポンサーリンク

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

スクリーンショット

画面幅が広いとき

20160504_01

画面幅が狭いとき

20160504_02

HTMLのみの場合

<div style="margin:auto; text-align:center; width:100%;">
	スポンサーリンク<br/>
	<div style="display:inline-block; padding:10px;">
		左側広告
	</div><div style="display:inline-block; padding:10px;">
		右側広告
	</div>
</div>

HTMLとCSSに分ける場合

<div id="double-rectangle">
	スポンサーリンク<br/>
	<div id="left-rectangle">
		左側広告
	</div><div id="right-rectangle">
		右側広告
	</div>
</div>

div#double-rectangle {
	margin: auto;
	text-align: center;
	width: 100%;
}
div#left-rectangle {
	display: inline-block;
	padding: 10px;
}
div#right-rectangle {
	display: inline-block;
	padding: 10px;
}

解説

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

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

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

あとがき

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

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

こちらの記事もおすすめです