目次 [ Contents ]
主に自分のためのWordpressカスタマイズ情報。
htmlで文章を書くときは、テキストエディタ上で直接改行しない。<p>は文の段落分けする時、<br/>は意図的に行を分けたい時のみ。特に<br/>はその文がサーチエンジン検索結果などで参照された時、意図しないレイアウトになってしまう。
空白の行
WordPressのビジュアルエディタでリターンを押すと、
<p> </p>
と言う形で、空白の行が作られるので、見た目的には行間を空けたようになる。が、これは「文章の情報」として正しくないので、使うのは避ける。
Margin
意図的に行間を広げたい場合はタグで指定する。
margin-top、margin-bottom
Sytle指定
刹那的、変則的に指定する場合はタグ内に”sytle”で直接指定。
<p>マージンなしの行。</p> <p style="margin-top: 50px; margin-bottom: 50px;">マージンで前後50px行間を開ける</p> <p>マージンなしの行。</p>
マージンなしの行。
マージンで前後50px行間を開ける
マージンなしの行。
px | 具体的なピクセル数 |
em | 文字、1行分単位(相対的) |
rem | 文字、1行分単位(デフォルト比) |
Class指定
運用上、手軽に済ますために”class”を使って行間を指定できるようにする。
WordPressのCSSに段落前、段落後用としていくつか設定。
/*margin*/ .mts{ margin-top: 2em !important; } .mtm{ margin-top: 5em !important; } .mtl{ margin-top: 9em !important; } .mbs{ margin-bottom: 1em !important; } .mbm{ margin-bottom: 2em !important; } .mbl{ margin-bottom: 5em !important; }
後は、使いたい時にタグで指定する。
<p>マージンなし</p> <p class="mtm">トップマージン mtm</p> <p>マージンなし</p> <p class="mbl">ボトムマージン mbl</p> <p>マージンなし</p> <p class="mtl mbl">トップマージンmtl ボトムマージン mbl</p> <p>マージンなし</p>
マージンなし
トップマージン mtm
マージンなし
ボトムマージン mbl
マージンなし
トップマージンmtl ボトムマージン mbl
マージンなし