本文先頭の#タイトルが二重表示されるときはCRLFを疑う

記事ページを開くと、ヘッダー部分の H1 タイトルの下に、本文でも同じ見出しがもう一度出てしまう。Markdown で記事を書いていると、たまに遭遇する表示崩れです。

多くのブログシステムでは、記事本文の先頭に # タイトル があっても、ヘッダー側で別途タイトルを表示する都合上、本文側の先頭見出しは自動的に取り除く処理を挟みます。この除去処理さえ正しく動いていれば、本文とヘッダーでタイトルが重なることはありません。逆に言えば、二重表示が起きているときは、この除去処理のどこかが素通りしている、ということです。

今日の結論

• タイトルが二重表示されるとき、Markdown 本文側ではなく先頭見出しの除去処理を疑う
• 原因になりやすいのは Windows の CRLF。\n だけを想定した正規表現だと \r\n にマッチせず、先頭行が除去されない
• 対処は \r?\n のように、CR（\r）の有無を許容する正規表現に変える
• 修正後は localhost で、本文冒頭・カード表示など複数箇所を実際に確認する

症状：ヘッダーのH1の下に、本文でも同じ見出しが出る

現象としては単純です。ページを開くと、記事タイトル（H1）のすぐ下、本文の一番上にもう一度同じ文字列が見出しとして表示されます。Markdown ファイル自体を見ても、先頭行に # タイトル が1つあるだけで、二重に書かれているわけではありません。

こうなると、「本文側のMarkdownが誤って重複している」と勘違いしやすいのですが、実際にファイルの中身を確認しても原因は見つかりません。疑うべきは除去処理側です。

原因：先頭行除去の正規表現がLF専用でCRLFに対応していなかった

先頭見出しを取り除く処理は、多くの場合「本文の一番最初にある # 〜 の行を、改行文字までまとめて削除する」という正規表現で実装されます。この正規表現が \n だけを行末として想定していると、Windows で保存された CRLF（\r\n）のファイルでは動作が変わる。

行末に \r が挟まると、\n だけを終端と見ている正規表現は先頭行の境界を認識できず、除去処理そのものが素通りします。結果として、本文側に # タイトル の行がそのまま残り、ヘッダーのタイトルと本文の見出しが両方表示される二重表示になります。

原因は改行コードの不一致。筆者はこの現象を、サイトデザイン改善の作業中（stripTitleHeading 関数、2026年7月21日確認）に踏みました。正規表現を \r?\n に変更したところ、二重表示が解消しています。

対処：\r?\n などCRの有無を許容する正規表現に変える

1. 先頭見出しを除去している関数（stripTitleHeading など）の正規表現を確認する
2. \n のみになっていれば \r?\n に変更する（Markdown読み込み時に改行コードをLFへ正規化する方法でも対応可能）
3. Windows環境で保存したMDファイルで、修正後の動作を確認する。Mac/LinuxのLF環境で作成したファイルでは元々再現しないため注意
4. localhost で本文冒頭・カード表示など、タイトルが表示される複数箇所を実際に確認する

確認しておきたいチェックリスト

まとめ・次に読む

タイトルの二重表示は見た目の不具合ですが、原因が Markdown 本文ではなく除去処理側の正規表現、というケースがあります。改行コード起因の不具合は OS やエディタによって再現有無が変わるため、Windows/Mac 双方の環境で確認するのが早道です。

同日公開の前後記事として、sticky TOC のレイアウト切り分けと、AI文章のリズム直しも整理しています。

• sticky TOCが効かないときは親グリッドのitems-startを疑う
• AIっぽい文章は語彙よりリズムで見抜かれる｜文末3連続と段落の均質さを直す

---

Markdown のレンダリング処理やエディタの改行コード仕様は、環境や今後のアップデートによって挙動が変わる可能性があります。本記事は執筆時点（2026-07-22）で確認した内容です。重要な実装判断は、使用しているツール・ライブラリの公式ドキュメントで確認してください。