コンテンツの余白を設定 = CSSカスタマイズ【margin】の基礎知識
文章の読みやすいWebサイトとは 文章の行間や コンテンツごとの余白が
適度な幅に設定されている記事ではないでしょうか?
文字が小さく 文章ばかりの記事は 一目見ただけで読むことに躊躇してしまいがちですよね。
記事作成の基本的な知識として 適度な余白を設定するということは
読みやすい記事作りのポイントになりますので 余白の設定 margin についてまとめてみました。
margin (余白)のきほん
余白は「隣り合わせるブロック」に 適度な余白を作ることによって
サイト画面全体の見やすさを決める項目になります。
余白 (margin) は 見出し・文章・画像 などのコンテンツのブロックごとに設定するもので
例えば 見出しタイトルの上下・画像や囲み枠の場合、隣り合わせる画像 や 記事の境界線などです。
ひとつの文章の 行間の設定は margin (余白) ではなく line-height を使ったコード指定になります。
line-height の関連記事はこちら
CSS カスタマイズ line-height ~行間を調整する ~【 WordPress 】
レイアウトのプロパティ
余白 “margin" の設定は CSSカスタマイズを使用して設定していきます。
コンテンツのイメージとCSSに必要なプロパティを簡単にまとめてみました。
図に表すとイメージがとても わかりやすくなります。
さまざまな カスタマイズの場面で出てくるプロパティですので 覚えておいてくださいね。
content(コンテンツ)文章 や 画像などのひとつの 要素(内容)を指しています。
padding(パディング)画像や囲み枠などの内側の余白に使用します。
border(ボーダー)ラインに関する指示を出すプロパティです。
margin(マージン)外側の余白。隣接する 要素 との間隔を指定する時に使用します。
padding・border・margin は 上下左右「top bottom left right」
この 4方向の指定をすることでどの位置の余白を調整したいかをコードで指定していきます。
隣接するブロックの 余白の相殺
相殺(そうさい)とは 簡単に言うと「差し引きして帳消しにすること。」で
例えば 図のように どの場面でも「隣接するブロック」 が存在します。
margin-top にも margin-bottom にも余白を設定していますが
余白は 二重に設定されるのではなく 大きいサイズを指定した方が優先 (相殺)される形になります。
marginの 基本CSSコード
CSSのコードは セレクタ{プロパティ:値} で構成されていてセレクタには
指定したいコンテンツの場所、今回の場合 " margin “のどの部分をカスタマイズするのかを指定します。
また この " margin " の指定のしかたには top・bottom それぞれのコードを
① 個別に記述するパターンと ② 一度にまとめて記述してしまうパターンがあります。
WordPressテーマや コンテンツによって まとめての記述が可能な場合と
個別でなければ指定したコードが機能しない場合があります。
まとめての場合、上下、左右の場所が分からなくなりがちですが
CSSコードはできるだけシンプルにしておく方がいいので
まとめられるコードはできるだけ一度に記述することをお勧めします。
見出しの上下の余白
見出しの出しの余白 (プロパティ)を すべて もしくはいくつかの見出しを同じ指定にする場合、
隣り合うプロパティの間に ( , ) コンマをつけることで 一度に記述することができます。
1 2 3 4 |
.post h2,
.post h3,
.post h4,
.post h5,
.post h6
{
margin:50px
0px
30px
; } |
セレクタ部分ですが私の使っているこの Luxeritas のテーマでは h2 では反映されず
この「.post 」を使用しましたが WordPressのテーマなどによって h2 { で記述するものもあります。
囲み枠 (box) や 画像 (img) の余白
文章に関するセレクタの他に 記事内で使用するセレクタには BOX・img などがあり
囲み枠 (Box) や 画像 (img) なども文章と隣り合う場合に 余白部分が広すぎたり
狭すぎたりといったケースがありますので調整が必要になります。
それぞれのセレクタは 囲み枠 .normal-box{margin~
・画像 img{margin~
といった感じです。
キャプションを付けた画像のセレクタ ー caption ー
キャプションとは画像の下に画像についての説明分のことです。
画像自体に margin-bottom を付けていない場合、キャプションが近すぎて見にくくなることがありますので
画像の margin-top か キャプションの margin-bottom のどちらかを調整します。
1 2 3 4 |
.wp-caption{
margin:1.5em
0em; } |
反映されない場合のチェック項目
当たり前ですがコードは 一か所でも間違えると反映されませんので
初歩的な見落としがないか まずは焦らずにチェックしてみましょう。
スペースを空けるか空けないか?
テーマのバージョンによっては コードの記述に使用する:(コロン)の前後に スペースが空いている方がいい場合と
空いていない方が表示できる場合など 微妙な違いで表示されないというケースがあります。
英数半角モードになっているか?
ひらがなモードからの変換 などもエラーになったりしますので
この場合は ひらがなモードを使用してしまった部分のコードすべてを一度削除し
英数半角モードで入力し直しますとカスタマイズが反映されるようになります。
{}で正しく閉じられているか?
:(コロン);(セミコロン)が打たれているか?{}で閉じられているか? などです。
これらのチェックで記述間違いがない場合は 先ほどにもあった セレクタのコード名が違うといった場合です。