Markdownでリンクを作る方法：外部リンクや内部リンク、ページ内リンクはどうやって作る？

2023-10-182024-03-30

Markdownで書いているドキュメントの中にリンクを作成したいときってありますよね。

リンクをクリックしたら外部のページに飛んだり、あるいはページの内部で該当箇所まで自動で移動してくれような仕組みは、Markdownで記述可能です。

この記事では、Markdownを使って書くことができる、様々なリンクの作成方法を紹介していきます。

冒頭で「リンク」と書きましたが、リンクには種類がいくつかあり、それをなんと呼んでいるかが人によって違います。読者のみなさんとの認識をすり合わせておくために、今回の記事では以下のような認識であることを先に記しておきます。

• ハイパーリンク：全てのリンクの総称
  • リンク(URL)：URLがむき出しの状態のリンク
    • 外部リンク(発リンク)：閲覧サイトのドメイン外のサイトに遷移するリンク
    • 内部リンク：閲覧サイトと同じドメインの別ページに遷移するリンク
  • アンカー(テキスト)リンク：文字にURLを埋め込んだ形のリンク
    • 外部リンク(発リンク)
    • 内部リンク
    • ページ内リンク：ページ内の特定の箇所にジャンプするリンク(目次とか)

リンク(URL)の作成方法

このセクションでのリンク(URL)とは、URLがむき出しの状態のリンクのことです。

作り方は簡単で、コピーしたURLをそのまま貼り付ければ完了です。

表示結果は↓のようになります。

外部リンク/内部リンクの作成方法

外部リンク/内部リンクとは？

外部リンクと内部リンクが何なのかを改めて最初に確認しておくと、

• 外部リンク：閲覧しているサイトとは別のサイトに遷移するリンク
• 内部リンク：閲覧しているサイトの中の別のページに遷移するリンク

要は、遷移先のドメインが異なっていれば外部リンク、同じであれば内部リンクというわけです。

作り方

HTMLで書こうとすると、外部リンクと内部リンクは書き方が変わってきますが、Markdownで書く場合はどちらも同じです。

書き方は簡単で、

[タイトル](URL)　

で終わりです。

実際にMarkdownエディタで実演してみると、

表示結果は

ページ内リンクの作成方法

ページ内リンクとは？

内部リンクと混同してしまいがちなので、ここでも念のために認識を確認しておくと、ページ内リンクとは、クリックしたら閲覧ページ内の該当箇所に移動(ジャンプ)してくれるリンクのことです。一番身近な例でいうと、目次がわかりやすいと思います。

書き方

ページ内リンクの作成には、HTMLを用います。

1.まず、クリックしたら移動する位置にidを付けます。

書き方は、<a id="タイトル”></a>

上の例だと、"GROWIの使い方"という部分がidになっており、クリックしたら19行目に移動する用に設定しています。

2.次に、どこをクリックしたら19行目に移動するかを設定します。

書き方は、[タイトル](#移動したい場所のid)

上の例では、さきほど設定した19行目に移動したいので、#GROWIの使い方　とし、クリックする文字、つまり[]内の文字としては「GROWIの使い方がわからない方はこちら」としました。

エディタ全体としては、↓のような表示になっています。

挙動としては、7行目の「GROWIの使い方がわからない方はこちら」をクリックすると、19行目に移動するといった感じです。

知っておくともっと便利なティップス

画像の中にリンクを埋め込む方法

画像をクリックしたらリンクが開くという仕様にしたいときに使える方法です。

書き方といては、[](URL)　

上の例では、alt属性を GROWI.cloud、遷移先のURLを https://growi.cloud/ として書いています。

エディタ全体としては、

このようになりました。

まとめ

ここまで、Markdownでリンクを作成する方法を紹介してきました。

そのままURLを貼り付けるだけのリンクは簡単ですが、ページ内リンクは少し覚えることがあるので、人によっては習得するに時間がかかるかもしれませんね。

でも一旦覚えてしまったら、今後、Markdownをより有効に活用することができるでしょう。

弊社が運営している GROWI.cloudはMarkdownで書くことができる情報共有ツールです。

よければぜひ、公式HPをのぞいてみてくださいね。

また、知っておくと便利なこととして、Markdownで表を書く方法 や Webブラウザで使えるMarkdownエディタ もあります。

Markdownの書き方についてもっと知りたいという方に向けて、Markdown記法一覧表も作成してあるので、よければそちらも参考にしてみてくださいね。