【ココログ新システム】改行しても行間が空かない！－改行タグをを<div>から<p>に変更する方法－（3月19日以降）

公開：　2019-03-22 13:01:12　　最終更新：　2019/03/22 18:06　　

※環境：　Winidows8.1／Firefox

2019/03/25 17:29　･･･　改行するとデフォルトで<p>タグが入るよう修正されたが、なぜか、「<p>～</p><br />」のように、後ろに勝手に改行タグ（<br />）が付いてる．．．orz

2019/03/28　午前　･･･　上記トラブル解消。

以下、オリジナル記事。

19日にココログの大規模改修があり、色々と不具合があるようです。

その中でも一番困っているのは「改行」の不具合かと思います。

分かりやすく「改行」と書きましたが、本来は「改段落」と呼ぶべきで、「<p>～</p>」（～の部分は文字列）で囲まれた部分を「段落」と言います。そして、以前は「改段落」をすると、0.5行分くらいの行間が空いた（※）のですが、現在はEnterキー（Returnキー）などで改行すると、「<p>～</p>」タグではなく、「<div>～</div>」で囲まれてしまうのが原因で行間が空かなくなってしまいます。

ちなみに、お使いのブラウザによってキーは異なるのですが、Firefoxだと、Shiftキーを押しながらEnterキーを押すと行間が空かずに改行できます。この時に挿入されるタグは「<br />」というタグで、HTMLタグを見ると、「<p>ああああ<br />いいいい</p>」のように表示されます。これが本来の「改行」タグです。

では、「<div>～</div>」はというと、複数の要素、例えば複数の「段落」などをひとまとめにするためのタグで、「～」の部分に複数の「<p>～</p>」タグ（だけではありませんが）が含まれるというのが通常で、<div>単位にスタイルなどをまとめて指定するためのものです。

divとは恐らく「division」、即ち、「部分, 区分」ということでしょう。

※もう少し厳密に書くと、<p>～</p>タグはあくまでも「段落」を定義するものでしかありません。

<p>～</p>タグの上下に0.5行くらいの余白ができるのは、ブラウザがそのように表示するというルールになっているからです。

余白の大きさは「スタイルシート」（ココログで言うと各ブログの「デザイン」）によって設定でき、スタイルシートで変更することも可能です。

改段落（改行）方法：当面は手打ちでdiv→pに打ち替える

前置きが長くなりましたが、今後、何らかの対応がなされる前に、取り敢えずの対処法を書いておきます。

1．　まず、適当な文字、ここでは「ああああ」と入力して、「ソースコード」ボタンを押します（①）。すると、「<div>ああああ</div>」となっているので、「div」を「p」に打ち替えます（②）。

2．　「ソースコード」ウィンドウの右下にある「OK」ボタンを押して保存（③）します。

この時、多少楽をするなら、先頭の「<div>」だけ「<p>」に変え、後ろの「</div>」は削除して、「<p>ああああ」の形で保存しても、システムが自動的に「</p>」を補ってくれます。

これで、これ以降は「<p>～</p>」が維持されます。

なお、これは以前からもあったのですが、時々何かの拍子に、「<div>～</div>」が挿入されてしまうことがあります。

改行してみて変だな？と思ったら、上の要領で「ソースコード」を確認してみて下さい。

また、記事編集画面の下部（Powered by tinymceと表示されている行）に現在適用されているタグが表示されているので、これも目安になります。下の例では「div」と表示されていますが、<p>タグが維持されている場合は、ここに「P」と表示されます。

スペース行を何行か入れる方法

以前は、行間を何行分か空けたいときに、「Enterキーで改行して→スペースを一つ入れ、再びEnterキーを押す」でスペース行が維持されたのですが、新システムではこれだとこのタグ（「<p>全角1つ分のスペース</p>」）が消えてしまいます。

しかし、スペースを3つくらい入力すると消えないようです。つまり、「<p>全角3つ分のスペース</p>」です。見た目は、「<p>　　　</p>」のような感じです。

「ソースコード」ウィンドウは意外に便利で、時々これを見て、行間を増やしたいときに「<p>　　　</p>」をコピペしてもいいので、ブログ主のように、以前から頻繁にHTMLタグをいじってたユーザには便利な機能です。

もちろん、「ソースコード」ウィンドウの代わりに「通常エディタ」（以前のココログなら「HTMLタグの編集」タブ）に切り替えてもいいのですが、「ソースコード」ウィンドウの方がソース、即ち、HTMLタグがきれいに表示されるのでお薦めです。

---