Release 2017.11.11

WordPress備忘録 行間を空ける

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

スポンサーリンク

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

空白の行

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

<p>&nbsp;</p>

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

Margin

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

margin-top、margin-bottom

Sytle指定

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

マージンなしの行。

マージンで前後50px行間を開ける

マージンなしの行。

px 具体的なピクセル数
em 文字、1行分単位(相対的)
rem 文字、1行分単位(デフォルト比)

Class指定

運用上、手軽に済ますために”class”を使って行間を指定できるようにする。

WordPressのCSSに段落前、段落後用としていくつか設定。

後は、使いたい時にタグで指定する。

マージンなし

トップマージン mtm

マージンなし

ボトムマージン mbl

マージンなし

トップマージンmtl ボトムマージン mbl

マージンなし

コメントを残す

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

CAPTCHA