BLOGWordPressの投稿エディタで改行と段落表現を意図したとおりに制御する記事の書き方ブログ技術TwitterFacebookはてブPocketLINEコピー2016.06.02スポンサーリンク2つほどWirdPressの投稿をしてみて気づいたことというか、たぶんイロハのイなんでしょうけど段落表現(Pタグ)と改行(brタグ)をきちんと意図して使い分ける方法をよく解っていなかったので、記事公開したら思ってた通りの表示にならなくて何度か訂正しました。ググってみてわかった段落と改行の使い分けについてメモっておきます。目次2つのモードで異なるテキストの解釈テキストモードビジュアルモードまとめスポンサーリンク2つのモードで異なるテキストの解釈WordPressの投稿エディタには「ビジュアル」と「テキスト」の2つの入力モードがあります。モードの違いによって段落と改行の入れ方(操作方法)が異なるのでそれぞれ説明します。テキストモード基本的に私自身今まで記事を書くときはNotepad++でソースベタ書きしてました。pタグも全部手動で突っ込んで(と言ってもEmmetのラップ機能使ってましたけど)ましたのでWordPressでもできるだけ同じように書きたい...ということでまずはテキストモードの場合から。テキストモードの場合、基本的に記事本文のHTMLソースを直接書いてるのとほぼ同じようです。ツールバーのアイコンからGUI的に入力補助もできますが、入力確定すると結果的にタグが挿入されているのは一目瞭然でしょう。エディタの表示上、タグで囲われていないテキストはどのように扱われるの?ということですがエディタ上の単一の改行:公開時、改行位置にbrタグが自動挿入されるエディタ上の2つ以上連続する改行:段落の区切りと認識され、pの閉じタグが自動挿入される改行の無いテキスト区間:一連の段落と認識されるという仕様のようです。テキスト直前の何らかの閉じタグからテキスト直後の2連続(以上)改行までが一つの段落としてpタグで囲われます。この間に単独の改行があればその位置にbrタグが挿入される、ということになります。明示的にpタグで囲った場合は当然その通りの段落として認識され、上記の「タグで囲われていないテキスト」には該当しませんから、pタグに二重に囲われることはありませんのでご心配なく。文の分割が重要な文章を記述するのに便利な要素です。とあるとおり、「段落以外の意味としての区切り」のために用いるものであって、「HTMLのレンダリング結果として表示上改行しているように見せる」の要素ではありません(もちろん横罫を入れるためのタグでもありませんよ!)。いうのはCSSで制御すべきです。ブログのような一般文章を書いているときは、文言の内容の区切りで適切に段落わけをする(=段落のまとまり毎にpタグで囲う)べきであり、また、大きな区切りでは見出し(h1~h6)を適宜挿入すれば用足りるはずなので、通常はbrタグは用いるべきではないと考えています。ビジュアルモードビジュアルモードの場合はエディタ上にタグが表示されないのでべた書き派にはちょっと厄介かもしれません。結論を先に書くとテキスト文頭またはEnterキー入力位置までを一段落(pタグで囲まれたブロック)とみなすbrタグを挿入したい位置はEnterではなくShift+Enterを入力エディタ上で空白行1行分飛ばされている様に見えるところは、その直前までが一つの段落(pタグで囲われた範囲)で、空行の無い単なる改行に見えるところはbrタグが挿入されている、と考えていいと思います。ビジュアルモードとテキストモードは相互に行き来できるので、不安だったらテキストモードに切り替えてテキストモードでのルールで書いた場合と同じになっているか確認することもひとつの手です。brにするつもりがないのに誤ってbrにしてしまった場合、同じ位置でもう一度Shift+Enterを押すとpタグ閉じに切り替わります。Spaceでいったん改行(と思われる)位置を削除してテキストを連結し、仕切りなおした方がスッキリ易いかもしれません。スポンサーリンクまとめ簡単ですがWordPress投稿エディタでの段落割りと改行についてまとめました。pタグ自動挿入は大変便利な機能だと思います。長文書いたときに何十行分も手動でpタグラップしてた私にとっては神機能です。2連改行だけ若干癖があると感じてしまったのでべた書き派のかたはまずこれを覚えましょう。見出しやリストなどその他のタグを明示的に書いた場合はそっくりそのまま解釈されるので特に問題はないかと思います。プラグインには投稿エディタでEmmetを使えるようになるものもあるようですし、あるいはマークダウンで記述するためのプラグインもあるようなのでテキストオンリーの記事の場合にはそちらの方が重宝するかもしれません。面白そうな機能なのでおいおい使っていきたいと思います。AdSence広告を掲載していまして、掲載に当たっては規約違反の禁止コンテンツを取り扱わないように注意していますが、もしかしたらご存じない方もいるかもしれないのであらためてここで復習しておきましょう。自分自身にと...ブログ技術Amazonで酒類販売始めたからAdsenseユーザーは気を付けてね歳のせいかめっきりお酒が弱くなったごろどくです、どうも。Amazonジャパンで酒類の販売が開始されたようです。日本経済新聞ブログ技術プロブロガーがプロとしてどれくらい稼がなければならないか計算してみたよ週末なのでやる気のないごろどくですどうも。週初めは休み明けなのでやる気がないし週の中は中だるみでやる気がありません。やる気がなくても自動的にチャリンチャリンお金の入ってくるシステムがあったらいいのに。プロブロガー素晴らしいですね。...ブログ技術ブログ収入の実態/アクセス数とAdsence収益とネタ探しと雪が積もってゲレンデ行くのが待ち遠しくて仕事やブログどころではないゴロドクさん(加齢臭薫る38歳)です、どうも。あ、このマクラ久々に書いたな。不定期でときどき公開している当ブログのアクセス状況をさらすアレですが今回は2012年10月分の報...ブログ技術Google先生がウェブスパム排除のための検索アルゴリズム変更を施したそうです普段あんまりSEOとか意識しないでのらりくらりと記事書いてるゴロドクです、どうも。タイトルの通りGoogle先生から検索アルゴリズム変更のお知らせがあったのでお知らせします。藤田晋という人のことを知らない私が藤田晋について調べた結果なんというか、一個人の人生積ませるために有料ブログで呪詛を刻む会社経営者がいるそうで。有料だからもちろん読めないんだけどさ、ほかの記事によると、要するに引き抜...スポンサーリンク抹茶×きなこ×黒蜜。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。