当サイトで使っているWordPressテーマ「4536」では、PC表示時、記事下や記事中のアドセンス（レクタングル大）を2つ横並びで表示できるんですが、1つしか表示しない場合は左寄せになっていました。
「まぁ、2つ横並びの方がキレイだし…」と、1つだけ表示したいニーズは特になかったんですが、1つだけ表示した方が視認性が高いことに気づいたので、下記のように修正を加えました。
- 要素が1つだけの時は中央寄せ
- 要素が2つ以上の時は横並び
今回はそのCSSを、サンプルを交えてご紹介するので、ぜひ参考にしていただければと思います。
インラインブロックで横並び
今回のポイントは、floatではなく、inline-block（インラインブロック）で横並びさせることです。
インラインブロック要素は、横に並ぶインライン要素と、縦に並ぶブロック要素の性質を併せ持つからです。
例えば、通常のブロック要素ならmargin:auto;を使って中央寄せしますが、インラインブロック要素ならtext-align:center;で中央寄せできます。
では、要素が1つの時と、2つ以上の時とで、どのようなデザインになるのか、サンプルを見ながら確認してみましょう。
要素が1つの時
要素が1つの時は、このように中央寄せになります。
See the Pen inline-block-center by Chef (@chef-aomori) on CodePen.
要素が2つ以上の時
そして、要素が2つ以上の時は、それぞれの要素が中央寄せのまま横並びになります。これがfloatとの大きな違いでしょうか。
See the Pen inline-block-center-float-1 by Chef (@chef-aomori) on CodePen.
余白を設定してキレイに横並び
後は、余白を設定することでキレイに横並びさせることができます。
See the Pen inline-block-center-float-2 by Chef (@chef-aomori) on CodePen.
追加するCSS
では、コピペ用に重要なコードをご紹介します。
親要素に追加するCSS
#box-wrapperはサンプルの親要素の名前なので、適宜変更してください。
#box-wrapper {
letter-spacing:-4px; /* やや重要 */
text-align:center; /* 重要 */
}解説
インラインブロック要素特有の隙間を埋めるために、letter-spacingにマイナスの値を指定。
text-align:centerで子要素を含めてすべて中央寄せにします。
子要素に追加するCSS
.boxはサンプルの子要素の名前なので、適宜変更してください。
.box {
display:inline-block; /* 重要 */
letter-spacing:normal; /* やや重要 */
}解説
親要素に指定したマイナスのletter-spacingの値を元に戻します。inline-blockの説明は割愛。
余白の設定
アドセンス、もしくは、バナーをキレイに表示させるためには余白が必要ですが、今回の方法では、要素が1つの時には余白が必要ないので、2つ目の要素から余白を設定すればいいでしょう。
また、中に画像がある場合ですが、画像は基本的にブロック要素だと思うので、中央寄せする場合は、margin:0 auto;を指定すればOKです。
サンプルコード
.box {
width:48%;
display:inline-block; /* 重要 */
letter-spacing:normal; /* やや重要 */
}
.box:nth-child(even) {
margin-left:4%;
}
.box-image {
margin: 0 auto;
}まとめ
条件分岐でゴニョゴニョしなくても、今回ご紹介したシンプルなCSSを追加するだけで、中央寄せ・横並びが可能です。
応用すれば、他にも色々と使い道があるので、覚えておいて損はないと思いますよ:D
以上、ご参考までに！(｀･ω･´)ゞ
