このガイドでは、Discourseの投稿やトピック内の見出しに直接リンクする方法を説明し、ユーザーが長い投稿内を効率的に移動できるようにします。
必要なユーザーレベル: 全ユーザー
長い投稿内に見出しを追加すると、コンテンツの可読性が向上し、ユーザーが特定のセクションに直接リンクできるようになります。これは、広範なディスカッションやドキュメントをナビゲートする際に特に役立ちます。
概要
このガイドでは、以下について説明します。
- Markdownを使用した見出しの作成
- 投稿内の特定の見出しへの直接リンク
Markdownを使用した見出しの作成
Markdownで見出しを作成するには、テキストの行の先頭に1つ以上の # 文字を付けます。# の数は見出しのレベルに対応します。以下に例を示します。
## レベル2の見出しです
その後に短い段落が続きます。
### レベル3の見出しです
ここにもう一つの短い段落があります。
レンダリングされると、次のようになります。
レベル2の見出しです
その後には短い段落が続きます。
レベル3の見出しです
ここにもう一つの短い段落があります。
見出しへの直接リンク
投稿内の見出しへの直接リンクを共有するには、次の手順に従います。
- 見出しの上にマウスカーソルを合わせると、その横にリンクアイコンが表示されます:
。
- リンクアイコンをクリックすると、ブラウザのアドレスバーのURLがその見出しへの直接リンクに更新されます。
- アドレスバーから更新されたURLをコピーして、他のユーザーと共有します。
リンクアイコンは、デスクトップ（非タッチ）デバイスで見出しの上にカーソルを合わせた場合にのみ表示されます。タッチデバイスやモバイルデバイスでは、アンカーリンクはページ内に存在しますが、表示されません。
見出しアンカーURLの理解
見出しのリンクアイコンをクリックすると、アドレスバーのURLが次の形式のフラグメントに更新されます。
#p-{postId}-{slugified-heading}-{number}
たとえば、投稿12345にある「Getting Started」という見出しは、#p-12345-getting-started-1 のようなURLフラグメントを生成します。末尾の番号は、投稿内での見出しの位置に基づいた連番カウンターです。
ベストプラクティス
- コンテンツを明確に要約するために、説明的な見出しを使用します。
- 適切な場合は階層的な見出しを使用して投稿を構成します。
- 可読性を高めるために、見出しの一貫性と論理性を確保します。
- 見出しのテキストを編集したり、見出しの順序を変更したりすると、アンカーURLが変更され、既存のリンクが無効になる可能性があることに注意してください。
よくある質問
投稿の任意の部分にリンクできますか？
Markdownで適切にフォーマットされた見出しにはリンクできますが、引用ブロック内にある見出しは除きます。これらのブロック内の見出しはアンカーリンクを生成しません。
見出しへのリンクは異なる投稿間でも機能しますか？
はい！これらのリンクは、他のトピックで使用したり、どこかで共有したりすると、その見出しがある投稿に直接移動します。
追加リソース
「いいね！」 73
one1
51
このサイトでも自分のサイトでもリンクアイコンが表示されません。FFでもChromeでも。
何か変更があったのでしょうか？
one1
53
マウスオーバーしても何も表示されません。
何かがそこにあるようですが、アイコンは表示されません。
追加の質問です…
見出しのテキストを変更すると、リンクが壊れると想定しています。
追記：タイトルを変更するとアンカーが変わるだけでなく、既存の見出しの前に別の見出しを挿入すると、見出しの数値サフィックスも変わります。これは脆弱で役に立たないように思えます。
唯一の安全な回避策は、見出しをHTMLのaタグで囲み、idを与えることでしょうか？
再度追記：見出しのテキストをaタグで囲む方法と、空のタグを見出しのテキストの前に置く方法の両方を試しました。どちらのidも機能しませんでした。代わりにspanも試しましたが、同じように失敗しました。
one1
54
はい、before として DOM で見つけることができます。
Windows 11 を使用しています。
リンクアイコンが表示される唯一の方法は、リンクをコピーしてから、そのリンク（# と ID を含む）を新しいタブで開き、そこに移動することです。そうすると、リンクアイコンが常に表示されます（ホバーなしで）が、他のリンクアイコンはホバー時に表示されません。
one1
55
これをバンプしてもよろしいでしょうか？投稿内のリンクについて何か明らかなことを見落としているのではないかと思います。
私も同じ問題を抱えています。アイコンはありますが、不透明度がゼロに設定されているため見えません。
.cooked h1 a.anchor, .cooked h2 a.anchor, .cooked h3 a.anchor, .cooked h4 a.anchor, .cooked h5 a.anchor, .cooked h6 a.anchor, .d-editor-preview h1 a.anchor, .d-editor-preview h2 a.anchor, .d-editor-preview h3 a.anchor, .d-editor-preview h4 a.anchor, .d-editor-preview h5 a.anchor, .d-editor-preview h6 a.anchor
Specificity: (0,2,2)
{
opacity: 0;
transition: opacity .25s;
}
OP（元の投稿）のアイコンも見えないので、私のインスタンスでのカスタムスタイリングではないことがわかります。
Chromeを使用しています。
「いいね！」 1
別の問題として、(見えない)アイコンが提供するリンクが同じトピックから機能しないことに気づきました。アイコンが次のように表示する場合：
https://forum.example.com/t/testing-anchors/63647#p-311503-heading-1
完全な URL ではなく、#p-311503-heading-1 のみを使用してリンクを作成する必要があります。ただし、完全な URL をブラウザに貼り付けると機能します。
「いいね！」 1
