【WordPress】「改行が消える」問題を、CSSで解決する

こんにちは、マルユメ@ブロガーです。

本記事では、

[chat face=”chara1.png” align=”left” border=”gray” bg=”gray” style=”maru”]WordPressで、「改行が消える」問題を解決したい![/chat]

[chat face=”chara2.png” align=”left” border=”red” bg=”red” style=”maru”]WordPressで、行間の幅を自分で調整したい![/chat]

[chat face=”chara3.png” align=”left” border=”blue” bg=”blue” style=”maru”]WordPressの自動整形機能を無効化したい![/chat]

このような人に向けて下記の内容を解説します。

[box03 title=”目次【記事の内容】”]

  1. 「改行が消える」問題を、CSSで解決する

[/box03]

実際にプログラミングを独学で1年以上勉強してきた経験をもとに、「改行が消える」問題をCSSで解決する方法を解説します。

この記事を読めば、改行が消える問題を解決する方法がわかり、自分で行間を調整することができるようになります。

1. 【WordPress】「改行が消える」問題を、CSSで解決する

【WordPress】「改行が消える」問題を、CSSで解決する

「改行が消える」問題とは、

WordPressのエディタで、改行を二つ以上入れると、自動的に一つになってしまう現象のこと

【WordPress】「改行が消える」問題を、CSSで解決する

【WordPress】「改行が消える」問題を、CSSで解決する

WordPressには「自動整形機能」というものがデフォルトで動作しており、これのせいで改行が勝手に変更されます。

では、さっそく解決方法を見ていきましょう。

CSSによる解決方法

方法は以下の通りで、

CSSで、pタグの下のマージン(余白)を変更する

これだけです。

改行が消えることによる問題は、自分で行間を調整できないところにありますよね。

行間が狭すぎると文字が詰まりすぎて読みづらくなるし、逆に開きすぎていると不自然になってしまうため、ちょうどいい行間を設定する必要があります。

ところが、改行を二つ以上連続で入れることができないので、このままでは行間の調整ができません。

そこで出てくるのが、「CSS」です。

CSSでpタグのマージンを変更する

改行で行間を調整するのではなく、CSSで余白を指定することによって行間を調整します。

具体的には、以下のCSSコードを、style.cssに追加します。

p {
 margin-bottom: 50px;
}

【WordPress】「改行が消える」問題を、CSSで解決する

【WordPress】「改行が消える」問題を、CSSで解決する

これなら、連続で改行ができなくても、行間を広げたり狭めたりできます。

なので、wordpressのエディタで改行が消えても、この方法なら問題ありません。

このブログでは余白は50pxにしていますが、もっと広げたい場合は50px以上の値を書けばいいし、狭めたいのなら50pxより小さい値を記入すればいいだけです。

「自動整形機能の無効化」、「プラグインの追加」 → やらなくてオーケー

CSSをいじる方法以外にも、
[jin-iconbox12]

  • functions.phpに、自動整形機能を無効化するコードを追加する
  • プラグイン「TinyMCE Advanced」を追加する

[/jin-iconbox12]
この二つの方法がありますが、
[jin-iconbox12]

  • 自動整形機能の無効化 → brタグを書かないと改行されなくなる
  • プラグインの追加 → 重くなる、バグの原因になる

[/jin-iconbox12]
このように、どちらにも無視できないデメリットがついてくるので、上記二つの方法はあまり健全ではありません。

一方、CSSを変更する方法なら、デメリットはなく、phpをいじる必要もないしプラグインを新たに入れる必要もないので、とても健全です。

エディタ上でbrタグやpタグが消える → 気にしなくてオーケー

WordPressのエディタ上で、pタグやbrタグを書くと、改行と同じように勝手に消えてしまいます。

【WordPress】「改行が消える」問題を、CSSで解決する

【WordPress】「改行が消える」問題を、CSSで解決する

しかし、Google Chromeのデベロッパーツールで公開済みの記事のコードを見ると、エディタ上でpタグやbrタグが消えていてもちゃんとタグが出力されているのが分かります。

【WordPress】「改行が消える」問題を、CSSで解決する

なので、brタグやpタグは、編集時にわざわざ書かなくても大丈夫だということです。

ただ、それ以外のタグ(見出し、リストなど)は、ちゃんと書きましょう。

RELATED POSTS

COMMENT FORM

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