(日本語) WordPress備忘録 行間を空ける

Sorry, this entry is only available in 日本語. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.

主に自分のためのWordpressカスタマイズ情報。

htmlで文章を書くときは、テキストエディタ上で直接改行しない。<p>は文の段落分けする時、<br/>は意図的に行を分けたい時のみ。特に<br/>はその文がサーチエンジン検索結果などで参照された時、意図しないレイアウトになってしまう。

空白の行

WordPressのビジュアルエディタでリターンを押すと、

<p>&nbsp;</p>

と言う形で、空白の行が作られるので、見た目的には行間を空けたようになる。が、これは「文章の情報」として正しくないので、使うのは避ける。

Margin

意図的に行間を広げたい場合はタグで指定する。

margin-top、margin-bottom

Sytle指定

刹那的、変則的に指定する場合はタグ内に”sytle”で直接指定。

<p>マージンなしの行。</p>
<p style="margin-top: 50px; margin-bottom: 50px;">マージンで前後50px行間を開ける</p>
<p>マージンなしの行。</p>

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>