コンテンツの余白を設定 = CSSカスタマイズ【margin】の基礎知識
文章の読みやすいWebサイトとは 文章の行間や コンテンツごとの余白が
適度な幅に設定されている記事ではないでしょうか?
文字が小さく 文章ばかりの記事は 一目見ただけで読むことに躊躇してしまいがちですよね。
記事作成の基本的な知識として 適度な余白を設定するということは
読みやすい記事作りのポイントになりますので 余白の設定【 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-top と margin-bottom それぞれにコードを記述するパターンと
一度に記述してしまうパターンがあります。
一度に記述することで ソースコードはかなりスッキリします。
WordPressテーマや コンテンツによって まとめての記述で変更されない場合があり
margin-top・margin-bottom と 個別で記述すると正常に表示されたりします。
見出しの上下の余白
見出しには h1からh6 までサイズが分かれています。
それぞれに分けての記述もできますが 同じ指定の場合、一度に記述することができます。
一度に指定する場合、.post h2, .post h3, というように ,(コンマ)をつけるだけです。
1 2 3 4 5 |
/* 見出しの上下の幅調整*/ .post h2, .post h3, .post h4, .post h5, .post h6 { margin:50px 0px 30px ; } |
カスタマイズコードは 多く存在し、h2 { で始まるものもありますが
私の使っているこの Luxeritas のテーマでは うまく反映されず
この .post で設定することが出来ました。
囲み枠のセレクタ ー box ー
文章のセレクタの他に 記事内で使用するセレクタには BOX・img などがあります。
囲み枠(Box) などを使用する場合、文章の時と違い 使用するときに呼び出す。
というスタイルになるので 事前にBOXの style.CSSを作成しておいて
必要な時に HTMLコードを使用し 呼び出すことで サイト上に BOXを設定することができます。
HTMLの記述とつかいかたはこちら ↓
【囲み枠】 基本のきほんから の CSSとHTML
1 2 3 4 5 6 7 |
/*基本枠-CSS*/ .normal-box1{ border: 4px solid #a7d28d; margin: 1em 0; padding: 1em; } |
画像のセレクタ ー img ー
1 2 3 4 5 |
/* 画像の余白のカスタマイズ*/ .post img { margin: 1.5em 0em; } |
キャプションを付けた画像のセレクタ ー caption ー
キャプションとは画像の下に画像についての説明分のことです。
画像自体に margin-bottom を付けていない場合
キャプションが近すぎて見にくくなることがあります。
画像の margin-top か キャプションの margin-bottom のどちらかを調整します。
1 2 3 4 5 |
/*キャプション付き画像*/ .wp-caption{ margin:1.5em 0em; } |
上手く表示されない場合
WordPressの カスタマイズ画面や 直接スタイルシートに書き込む際も
記述が間違っていて上手く表示されない場合、エラーとして知らせてくれます。
上の図の場合、 }この囲いで閉じられていないことで 2か所がエラーになっています。
コードの記述は スペースが開いていないだけだったり、
ひらがなモードからの変換 などもエラーになったりします。
基本的なポイントは 英数半角モード になっているか?
:(コロン);(セミコロン)が打たれているか?{}で閉じられているか?
コードとコードの間にスペースが取られているか?
例えば border: 4px solid #a7d28d;
この場合、この3つのコードの間には 半角のスペースを空けないと正確に表示されません。
焦らずに 確かめてみてくださいね。