Release 2017.11.11

WordPress備忘録 行間を空ける

目次 [ Contents ]

主に自分のための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>

マージンなしの行。

マージンで前後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

マージンなし

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください