【CSS の 基本】記事の見やすさを決める marginとは!?
ひとつの記事の中で 見出し・文章・画像 など
それぞれの項目( ブロック )を使用すると思いますが
隣り合わせる ブロック に適度な空白を作ることによって
見やすいサイトになります。
margin (余白)のきほん
余白は 見出しタイトルの場合 見出しの上下
記事( 段落P )では 記事と記事の間
画像や囲み枠の場合、隣り合わせる画像 や 記事の境界線などです。
もちろん、左右も margin は存在しますが 主に サイト全体を見やすくするためには
上下の余白のカスタマイズが重要だと考えます。
レイアウトのプロパティ
CSSに必要なプロパティを簡単にまとめてみました。
図に表すとイメージがとってもわかりやすくなりますね。^^
さまざまなカスタマイズの場面で出てくるプロパティですので
覚えておいてくださいね。
content(コンテンツ)
文章 や 画像などのひとつの 要素(内容)を指しています。
padding(パディング)
画像や囲み枠などの内側の余白に使用します。
border(ボーダー)
ラインに関する指示を出すプロパティです。
margin(マージン)
外側の余白。隣接する 要素 との間隔を指定する時に使用します。
padding border margin は 上下左右
top bottom left right この 4方向の指定をすることで
どの位置の余白を調整したいかをコードで指定していきます。
隣接するブロックの余白の相殺
図のように、どの場面でも 隣接するブロック が存在します。
文章同士の場合、二重に余白ができるのではなくマージンは相殺(そうさい)され
大きいサイズを指定した方を優先して設定されるようになっています。
WordPressの 外観カスタマイズからでしたら
バランスをみながら調整していけるので色々試してみてください。^^
【margin】基本のCSSコード
CSSのコードは セレクタ{プロパティ:値} で構成されています。
セレクタは変更を加えたいブロックごとに選びます。
margin-top と margin-bottom それぞれにコードを記述するパターンと
一度に記述してしまうパターンがあります。
一度に記述することでソースコードはかなりスッキリしますね。^^
WordPressテーマによって CSSのコードが 変更されない場合があります。
今回の margin も まとめて記述できない場合などがあり
その際は margin-top・margin-bottom と
個別で記述すると指定したCSSが表示されたりしますので
色々と試してみてください。
見出しの上下の余白
見出しには h1からh6 までサイズが分かれていて
それぞれに指定してあげたい場合もあるかと思いますが
すべて、または数か所 同じ指定をしたい場合、一度に記述することができます。
.post h2, .post h3, というように ,(コンマ)をつけるだけです。
それぞれに調整したい場合は個別の記述で構いませんが
HTMLやCSSではできるだけ無駄な記述も避ける方がいいので
まとめられるものはできるだけまとめて記述しましょう。
1 2 3 4 5 |
/* 見出しの上下の幅調整*/ .post h2, .post h3, .post h4, .post h5, .post h6 { margin:50px 0px 30px ; } |
.post とは記事のことを指しています。
h2 { で始まる記述で設定できるものもありますが
私の使っているこの Luxeritas のテーマでは、
サイドバーにまで影響が出てしまい うまく反映されませんでした。
そしてこの .post というワードを使うことで設定することができました。
セレクタごとの記述のしかた
囲み枠などを使用する場合、CSSで枠のスタイルを作成 しておいて
記事の作成中に HTMLコードで呼び出すことで
サイト上に枠を設定することができます。
HTMLの記述のしかたはこちら ↓
【囲み枠】 基本のきほんから の CSSとHTML
囲み枠のセレクタ ー box ー
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つのコードの間には
半角のスペースを空けないと正確に表示されません。
焦らずに 確かめてみてくださいね。^^
CSSやHTMLについての関連記事はこちらです。↓
【WordPress】 CSS カスタマイズ ~行間を調整する ~
【記事作成の基本】知っておきたい段落Pの正しい使い方