Qiita Markdown ページ内リンク（見出しリンク）のアンカーを何も考えずにコピペする方法

3193 ワード
Qiita qiita-markdown Markdown Qiita テキストリンク

対象者

  • 見出しへのページ内リンクがうまく行かない人
  • Qiita の編集画面で記事を書く人
  • 手動でコピペすることに抵抗がない人
  • スクリプト作成の際の調査をしたい人

やり方

Qiita ではプレビュー画面にもページ内リンクが（見出し部分に）付いているので、それを利用します。

  1. リンクしたい見出しの HTML id（アンカー）をコピーします。
    なお、id のコピー方法はいくつか考えられるため、具体例は 次の項 に示します。

  2. Markdown リンク記号の () 内にコピペし、必要に応じて # を付けます。
    なお一度 Markdown の見出し記号と混同してハマりましたが、通常の HTML と同様ページ内リンクを表すもの（アンカー）として # ひとつで OK です。

    [表示テキスト](#コピーしたid)

HTML タグの id コピー方法

id のコピー方法は、主に以下の 2 通りが考えられます。（細かいやり方は色々あると思いますが、一例だと思って下さい）

いずれも、編集画面でプレビューを表示しておきます。
※ 一応下書き保存後のプレビュー画面からでも確認は可能です。

1. ブラウザの開発者ツールからコピペ

  1. F12（Chromebook なら[検索ボタン] + [=]）を押し、ブラウザの開発者ツールを開きます。

  2. [ctrl] + [shift] + [c] を押し、リンクしたい見出しをクリックします。

  3. そのまま 右矢印キー を押して見出しタグを開き、span タグの id をダブルクリックしてコピーします。

2. アドレスバーからコピペ

  1. リンクしたい見出しの左にあるリンクマークをクリックします。

    ※ 画像に印を入れるつもりでしたがアップロードしてしまいました。画像の削除が出来ないようなので、少し見辛いですがそのままにしています。

  2. ブラウザのアドレスバーから # 以下をコピーします。

参考