読者です 読者をやめる 読者になる 読者になる

はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

はてな記法モードで改行の自動挿入を見直し、付加すべきでない箇所ではbr要素を挿入しないようにしました

機能修正・改善

本日、はてなブログで「はてな記法」モードを利用している場合、改行(br要素)を自動挿入する挙動を変更し、tableタグやscriptタグ、styleタグなどHTMLのブロック要素を直接記述している場合に、本来ならbr要素を付加すべきではない箇所では、br要素を挿入しないようにしました。

これにより、はてな記法モードでテーブルやリストをHTMLで直接書いたり、スクリプトをそのまま貼り付ける場合などに、意図しない改行が挿入されて記述が崩れる事態が解消されます。例えば、次のような表組のHTMLを編集画面に記述すると、

<table>
<tr>
<td>あかねさす紫野行き標野行き
野守は見ずや君が袖振る</td>
</tr>
</table>

これまでは、次のように意図しない改行が発生していました。





あかねさす紫野行き標野行き
野守は見ずや君が袖振る

今回の変更により、次のように意図した通り表示されるようになりました。

あかねさす紫野行き標野行き
野守は見ずや君が袖振る

どうぞご利用ください。

はてなブログのはてな記法モードにおける改行の扱いに関する解説

はてな記法では、HTMLを記述しなくても文章が適切にマークアップされるよう、改行で適切なHTMLタグを挿入します。はてなブログのはてな記法モードでは、空行を段落の区切りとしてp要素でマークアップし、ただ改行されてすぐ次の行に続く場合にはbr要素を自動で挿入します*1

はてな記法モードでは、はてな記法と同時にHTMLもそのまま記述できるため、このルールによって、予期しない改行(br要素)が追加されてしまうことがあります。例えば、表を組もうとして上記のHTMLを記述した場合、これまでは <br /> を改行ごとに付加しており、これが予期しない改行の原因になっていました。

<table><br />
<tr><br />
<td>あかねさす紫野行き標野行き<br />
野守は見ずや君が袖振る</td><br />
</tr><br />
</table>

今回の変更による改善

今回の変更により、上記と同様のtableタグを編集画面に記入した場合、table要素やtr要素の内側で改行してもbrタグは挿入されず、br要素があってもかまわないtd要素の内側でのみ自動挿入します。

<table>
<tr>
<td>あかねさす紫野行き標野行き<br />
野守は見ずや君が袖振る</td>
</tr>
</table>

改行が自動挿入されない要素

改行が自動挿入されない要素は以下の通りです。表組みのほか、文中にstyle要素やscript要素を記述する場合にも便利にご利用いただけます。

  • script
  • style
  • フォーム関連
    • datalist
    • optgroup
    • option
    • select
    • textarea
  • 表関連
    • table
    • tbody
    • tfoot
    • thead
    • tr
  • リスト関連
    • dir
    • dl
    • ol
    • ul

関連:pタグ停止記法

はてな記法モードでは、br要素やp要素を一切自動で挿入させない pタグ停止記法 も利用できます。完成されたHTMLをそのまま編集画面に記述したり貼り付けたりするときには、そのHTML全体を >< で囲って記述してください。

><table>
<tr>
<td>あかねさす紫野行き標野行き
野守は見ずや君が袖振る</td>
</tr>
</table><

このように記述すると、pタグ停止記法では例にある上の句と下の句のあいだの改行(td要素の内部)でbrが自動挿入されないため、次のように同一の行に表示されます。

あかねさす紫野行き標野行き 野守は見ずや君が袖振る

改行させたい場合には、明示的にbrタグを記述してください。はてなダイアリーのヘルプも参考になります。

pタグの挿入を止める(pタグ停止記法) - はてなダイアリーのヘルプ

*1:ちなみに、はてなダイアリーには段落モードと改行モードがあり、はてなブログはこの折衷的な動作になっています。