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

2016-05-04Web制作

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

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

その横並びをするには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つ以上の広告掲載が禁止されていますので、こちらの記事と合わせて表示の切り替えを行ってくださいね。

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます