moshimore Knowledge

アプリ開発・紹介とメモ書き、日々の日記。

はてなブログで記事を「はてな記法」モードで作成した場合のUL・OL・LIタグの動作について

f:id:moshimore:20180917234121j:plain
はてなブログで記事を「はてな記法」モードで作成した場合にUL・OL・LIタグの中でpre記法を使うと不要なタグが挿入されることが分かりました。
具体的には、1度でもpre記法を使ってしまうと、その後のLIタグの後にBRタグが挿入されます。

※はてなの問い合わせ窓口からの回答が届く前に別の動作も見つかりました。

リスト記法

まずはリスト記法で普通のリストを作成してみます。
はてな記法で以下のように記載すると、自動的にOL・LIタグでリストを作ってくれます。

コード

+ テスト1
+ テスト2
+ テスト3

結果

  1. テスト1
  2. テスト2
  3. テスト3

リスト記法の中でpre記法

先ほどのリストの中にpre記法でメッセージを追加してみます。
「テスト3」が「テスト1」と「テスト2」から外されていますが、これはリスト記法の仕様として仕方がないことだとしましょう。

コード

+ テスト1
+ テスト2
>|
メッセージ
|<
+ テスト3

結果

  1. テスト1
  2. テスト2
メッセージ
  1. テスト3

OL・LIタグをHTMLで記載

リスト記法を使用するのを諦めて、HTMLを記載してリストにしてみました。
すると、期待通りにpre記法でメッセージの追加ができたものの、なぜだか後ろに続く「テスト3」と「テスト4」と「テスト5」の前にBRタグが挿入されています。

コード

<ol>
<li>テスト1</li>
<li>テスト2
>|
メッセージ
|<
</li>
<li>テスト3</li>
<li>テスト4</li>
<li>テスト5</li>
</ol>

結果

  1. テスト1
  2. テスト2

    メッセージ
    


  3. テスト3

  4. テスト4

  5. テスト5

出力された実際のHTML

よくよく見ると、BRタグだけでなく、閉じPREタグの後に不要なPタグが追加されているのも分かります。

<ol>
<li>テスト1</li>
<li>テスト2<p></p>

<pre>メッセージ
</pre><p></p></li><br>
<li>テスト3</li><br>
<li>テスト4</li><br>
<li>テスト5</li><br>
</ol>

まとめ

pre記法の後にPタグが挿入されるのは何かの仕様かも知れませんが、手動で追加したLIタグの後にBRタグが追加されるのは、はてなブログのバグのような気がします。
エントリーのタイトルに「「はてな記法」モード」と記載しましたが、他のモードの動作は確認していないので、どうなるか分かりません。

また、この記事の内容で、はてなの問い合わせ窓口まで連絡してみました。

追記(2018/12/3)

はてなより返答がありました!
時間が掛かるものの、修正対応して頂けるそうです。
ありがとうございます。

以上、はてなブログで記事を「はてな記法」モードで作成した場合のUL・OL・LIタグの動作についてでした。