2つほどWirdPressの投稿をしてみて気づいたことというか、たぶんイロハのイなんでしょうけど段落表現(Pタグ)と改行(brタグ)をきちんと意図して使い分ける方法をよく解っていなかったので、記事公開したら思ってた通りの表示にならなくて何度か訂正しました。ちょっとググってみてわかった段落と改行の使い分けについてメモっておきます。
2つのモードで異なるテキストの解釈
WordPressの投稿エディタには「ビジュアル」と「テキスト」の2つの入力モードがあります。モードの違いによって段落と改行の入れ方(操作方法)が異なるのでそれぞれ説明します。
テキストモード
基本的に私自身今まで記事を書くときはNotepad++でソースベタ書きしてました。
pタグも全部手動で突っ込んで(と言ってもEmmetのラップ機能使ってましたけど)ましたのでWordPressでもできるだけ同じように書きたい…ということでまずはテキストモードの場合から。
テキストモードの場合、基本的に記事本文のHTMLソースを直接書いてるのとほぼ同じようです。ツールバーのアイコンからGUI的に入力補助もできますが、入力確定すると結果的にタグが挿入されているのは一目瞭然でしょう。
ではエディタの表示上、タグで囲われていないテキストはどのように扱われるの?ということですが
- エディタ上の単一の改行：公開時、改行位置にbrタグが自動挿入される
- エディタ上の2つ以上連続する改行：段落の区切りと認識され、pの閉じタグが自動挿入される
- 改行の無いテキスト区間：一連の段落と認識される
という仕様のようです。つまりテキスト直前の何らかの閉じタグからテキスト直後の2連続(以上)改行までが一つの段落としてpタグで囲われます。この間に単独の改行があればその位置にbrタグが挿入される、ということになります。
なお直接明示的にpタグで囲った場合は当然その通りの段落として認識され、上記の「タグで囲われていないテキスト」には該当しませんから、pタグに二重に囲われることはありませんのでご心配なく。
なお、本来的にbrタグというのは
HTML
要素 (HTML 改行要素) は、文中に改行 (キャリッジ・リターン) を生成します。これは、詩や散文、住所など、(段落として以外の) 文の分割が重要な文章を記述するのに便利な要素です。
とあるとおり、「段落以外の意味としての区切り」のために用いるものであって、「HTMLのレンダリング結果として表示上改行しているように見せる」の要素ではありません(もちろん横罫を入れるためのタグでもありませんよ！)。そういうのはCSSで制御すべきです。
ですからブログのような一般文章を書いているときは、文言の内容の区切りで適切に段落わけをする(=段落のまとまり毎にpタグで囲う)べきであり、また、大きな区切りでは見出し(ｈ1～h6)を適宜挿入すれば用足りるはずなので、通常はbrタグは用いるべきではないと考えています。
ビジュアルモード
ビジュアルモードの場合はエディタ上にタグが表示されないのでべた書き派にはちょっと厄介かもしれません。結論を先に書くと
- テキスト文頭またはEnterキー入力位置までを一段落(pタグで囲まれたブロック)とみなす
- brタグを挿入したい位置はEnterではなくShift+Enterを入力
エディタ上で空白行1行分飛ばされている様に見えるところは、その直前までが一つの段落(pタグで囲われた範囲)で、空行の無い単なる改行に見えるところはbrタグが挿入されている、と考えていいと思います。
ビジュアルモードとテキストモードは相互に行き来できるので、不安だったらテキストモードに切り替えてテキストモードでのルールで書いた場合と同じになっているか確認することもひとつの手です。
brにするつもりがないのに誤ってbrにしてしまった場合、同じ位置でもう一度Shift+Enterを押すとpタグ閉じに切り替わります。なんだか分らなくなったらBack Spaceでいったん改行(と思われる)位置を削除してテキストを連結し、仕切りなおした方がスッキリ易いかもしれません。
まとめ
簡単ですがWordPress投稿エディタでの段落割りと改行についてまとめました。
pタグ自動挿入は大変便利な機能だと思います。特に長文書いたときに何十行分も手動でpタグラップしてた私にとっては神機能です。2連改行だけ若干癖があると感じてしまったのでべた書き派のかたはまずこれを覚えましょう。
見出しやリストなどその他のタグを明示的に書いた場合はそっくりそのまま解釈されるので特に問題はないかと思います。
プラグインには投稿エディタでEmmetを使えるようになるものもあるようですし、あるいはマークダウンで記述するためのプラグインもあるようなのでテキストオンリーの記事の場合にはそちらの方が重宝するかもしれません。面白そうな機能なのでおいおい使っていきたいと思います。んじゃまたー。
コメント