はてなブログの「続きを読む記法」の仕様

はてなブログの「続きを読む記法」の仕様について，「HTML編集」の場合のはてな記法と「要素途中」の「続きを読む記法」はDOMが崩れるの2つについてのメモ．

「HTML編集」の場合のはてな記法

開発ブログの記事長いブログもスッキリと表示。記事を分割する「続きを読む」記法をリリースしました - はてなブログ開発ブログでは，なぜか言及されていないが，以下のように入力できます．入力補助ツールバーにある「続きを読む」ボタンから確認できます．（どうやらmarkdown記法のものが挿入される．）

<p><\!-- more --></p>

また，「見たまま編集」からはてな記法の====を，開発ブログの記事のように，入力しても有効．HTML編集からみると次のように表記されます．

<p>====</p>

どちらにしても，HTML編集の場合，<p>タグが必要になる．

この<p>タグがないと前後のタグが消失する場合がある．

どういうことかというと，はてなブログトップページの「続きを読む記法リンク」のDOMをみるとわかるが，<p>タグが消えています．

つまり，続きを読む記法前後の'

'タグは反映されず，サーバー側で除去処理を行っています．

サーバー側でどのようなパース処理をしているかはわかりませんが，このときに続きを読む記法前後の<p>タグが無いと，代わりに別の前後のタグが消える場合があります．

例えば，HTML編集画面で，以下HTMLコードをプレビューします（投稿しても同じ）．

<article>
  <nav>
  </nav>
  ====
  <section>
  </section>
</article>

すると，DOM構造は，以下のようになる．

<article>
<nav>
<ul>...</ul>
<section>...</section>
</nav>
</article>

section要素が <nav>要素の中に入ってしまい，DOMの入れ子構造が壊れる・どうやら navの閉じタグ</nav>が消失し， Chromeがその閉じタグを補完しているためにこのDOM構造になるようです．

はてなサポートに問い合わせたところ，不具合ではなく，「意図しない使い方による現象」 という回答をもらったので，続きを読む記法前後のpタグは必須であるといえます．

ここでいう「要素途中」とは，例えば，以下のように，続きを読む記法に「親要素（article）がある場合」を指します．

<article>
<nav>
</nav>
<p><\!-- more --></p>
<section></section>
</article>

この場合，sectionタグ以下が無視され，そこに「続きを読むリンク」が挿入されるが，その後にarticleの閉じタグ</article>が挿入されるのかを見てみます．

HTTP Response(ソース)の結果をみると，

<div class="entry-content">
 <article><nav></nav>
 <a class="entry-see-more" href="http://cartman0.hatenablog.com/entry/2017/10/16/">続きを読む</a>
</div>

結果から分かるように，articleの閉じタグ</article>がありません．

ほかのブログサービスやCMSではどのような挙動するのかわかりませんが，はてなブログの「続きを読む」では，サーバ側で自動で親要素の閉じタグを補完するといったことはしてくれないようです．問題なくブラウザで表示されるのは，ブラウザ（Chrome）側が自動で閉じタグを補完してくれているためのようです．

以上から，ブラウザが補完してくれるとはいえDOMが崩れるので要素途中に「続きを読む記法」を入れないほうが良さそうです．