マークダウンでリンクを無効化する方法！エスケープから装飾まで完全解説

Web

「URLは見せたいけどクリックできなくしたい…」 「マークダウンの記法を説明文として表示したい…」 「一時的にリンクを無効化したい…」 「リンクっぽく見えるけど動作しないテキストを作りたい…」

マークダウンでドキュメントを書いていて、リンクを無効化したい場面はありませんか？

技術ドキュメントでマークダウンの記法を説明したり、URLを例として示したり、工事中のリンクを一時的に無効にしたりと、様々なケースでリンクの無効化が必要になります。

この記事では、マークダウンでリンクを無効化する様々な方法を、用途別に完全解説します。

エスケープの基本から、プラットフォーム別の特殊な方法まで、すべてマスターしていきましょう！

スポンサーリンク

リンクを無効化する5つの基本方法

方法1：バックスラッシュでエスケープ

最も基本的な方法：

\[これはリンクではありません\](https://example.com)

結果：[これはリンクではありません](https://example.com)
（上記のテキストがそのまま表示される）

部分的なエスケープ：

\[リンクテキスト](https://example.com)  ← [だけエスケープ
[リンクテキスト\](https://example.com)  ← ]だけエスケープ

方法2：インラインコードで囲む

バッククォートを使用：

`[リンクテキスト](https://example.com)`

`https://example.com`

これで、マークダウン記法やURLがコードとして表示されます。

方法3：コードブロックを使用

フェンスドコードブロック：

```
[リンクテキスト](https://example.com)
https://example.com
```

インデントによるコードブロック：

    [リンクテキスト](https://example.com)
    https://example.com

4つ以上のスペースでインデントすると、コードブロックになります。

方法4：HTMLエンティティを使用

特殊文字をHTMLエンティティに置換：

[リンクテキスト](https://example.com)

または

[リンクテキスト](https://example.com)
  • [ → [ または [
  • ] → ] または ]

方法5：生のHTMLを使用

spanタグで囲む：

<span>[リンクテキスト](https://example.com)</span>

<span>https://example.com</span>

HTMLタグ内では、マークダウン記法が無効になります。

URLの自動リンク化を防ぐ方法

自動リンクの無効化

多くのマークダウンパーサーは、URLを自動的にリンクに変換します。これを防ぐ方法：

方法1：途中にゼロ幅スペースを挿入

https://​example.com
（URLの途中に見えないゼロ幅スペース U+200B を挿入）

方法2：バックスラッシュでエスケープ

https\://example.com

方法3：インラインコードで囲む

`https://example.com`

方法4：尖括弧を使わない

<!-- 自動リンクになる -->
<https://example.com>

<!-- 自動リンクにならない -->


Example Domain
example.com
 （環境による）

マークダウン記法を説明文として表示

ドキュメント内でマークダウンを説明する

記法の説明例：

マークダウンでリンクを作るには、以下の記法を使います：

`[表示テキスト](URL)`

例：
`[Googleへのリンク](https://www.google.com)`

より複雑な例の表示：

```markdown
# 見出し1
## 見出し2

[リンク](https://example.com)
![画像](image.jpg)

- リスト項目1
- リスト項目2
```

4つのバッククォートを使うと、3つのバッククォートを含むコードブロックも表示できます。

一時的にリンクを無効化する方法

コメントアウトを使った無効化

HTMLコメントで囲む：

<!-- [一時的に無効なリンク](https://example.com) -->

通常のテキスト <!-- [ここだけ無効](https://example.com) --> 続きのテキスト

コメント化の活用例：

## 関連リンク

- [公開済みページ](https://example.com/page1)
<!-- - [準備中のページ](https://example.com/page2) -->
- [別の公開済みページ](https://example.com/page3)

取り消し線でビジュアル的に無効化

視覚的に無効であることを示す：

~~[廃止されたリンク](https://old.example.com)~~

<s>[利用できないリンク](https://example.com)</s>

これは実際にはリンクは有効ですが、視覚的に「使えない」ことを示せます。

プラットフォーム別の特殊な方法

GitHub/GitLab

GitHubでの特殊な記法：

# プレーンテキストとして表示
`[text](url)` のように書きます

# 実際のリンクを無効化
\[text\]\(url\)

# URLの自動リンク化を防ぐ
`https://example.com`

Obsidian

Obsidianの内部リンクを無効化：

# 通常の内部リンク
[[ページ名]]

# 無効化
\[\[ページ名\]\]
`[[ページ名]]`

Notion

Notionでの無効化：

  • /code ブロックを使用
  • インラインコード ` で囲む
  • プレーンテキストブロックを使用

Discord

Discordでのリンク無効化：

# 埋め込みを防ぐ
<https://example.com>

# 完全に無効化
`https://example.com`
\https://example.com

JavaScript/CSSでの無効化（HTML出力時）

CSSでクリックを無効化

ポインターイベントを無効に：

.disabled-link {
    pointer-events: none;
    cursor: default;
    color: #999;
    text-decoration: line-through;
}

HTMLでの使用：

<a href="https://example.com" class="disabled-link">無効なリンク</a>

JavaScriptで動的に無効化

特定の条件でリンクを無効化：

// すべてのリンクを無効化
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        return false;
    });
});

// 特定のクラスを持つリンクのみ無効化
document.querySelectorAll('a.disabled').forEach(link => {
    link.removeAttribute('href');
    link.style.cursor = 'default';
});

用途別ベストプラクティス

ケース1：マークダウンの記法を説明

推奨方法：インラインコード

リンクを作るには `[テキスト](URL)` と書きます。

ケース2：URLを文字列として表示

推奨方法：インラインコード

APIのエンドポイント: `https://api.example.com/v1/users`

ケース3：工事中のリンク

推奨方法：コメントアウト + 説明

- [機能A](/feature-a)
- 機能B（準備中）<!-- [機能B](/feature-b) -->
- [機能C](/feature-c)

ケース4：無効であることを明示

推奨方法：取り消し線 + 注記

~~[旧ドキュメント](https://old.example.com)~~ ※現在は利用できません

新しいドキュメントは[こちら](https://new.example.com)

よくある問題と解決方法

問題1：エスケープが効かない

原因と対策：

# 効かない例
\[text](url)  ← 片方だけのエスケープ

# 正しい例
\[text\](url)  ← 両方エスケープ
\\[text\\](url)  ← 二重エスケープ（環境による）

問題2：プレビューと実際の表示が異なる

確認ポイント：

  1. マークダウンパーサーの種類（CommonMark、GFMなど）
  2. プラットフォーム固有の拡張機能
  3. HTMLサニタイズの設定

問題3：コピペ時にリンクが有効になる

対策：

  • プレーンテキストとしてコピー
  • リッチテキストエディタの設定確認
  • 受け取り側でプレーンテキストとして貼り付け

静的サイトジェネレーターでの設定

Jekyll

_config.ymlでの設定：

kramdown:
  auto_ids: false
  parse_block_html: true
  parse_span_html: true

Hugo

リンクのレンダリングをカスタマイズ：

// layouts/_default/_markup/render-link.html
{{ if .Page.Params.disableLinks }}
    {{ .Text }}
{{ else }}
    <a href="{{ .Destination | safeURL }}">{{ .Text }}</a>
{{ end }}

Gatsby

remarkプラグインでカスタマイズ：

// gatsby-config.js
{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-disable-links`,
        options: {
          // カスタム設定
        }
      }
    ]
  }
}

実用的な例とテンプレート

技術ドキュメントのテンプレート

# APIリファレンス

## エンドポイント
基本URL: `https://api.example.com/v1`

## 認証
Authorizationヘッダーに `Bearer {token}` を設定

## リクエスト例

GET https://api.example.com/v1/users Authorization: Bearer your-token-here


## 非推奨のエンドポイント
~~`/old/endpoint`~~ → 代わりに `/new/endpoint` を使用してください

マークダウンチュートリアル

# マークダウン入門

## リンクの作り方

基本的な記法:
`[表示テキスト](URL)`

実例:
```markdown
[Googleへのリンク](https://www.google.com)
```

これは [Googleへのリンク](https://www.google.com) のように表示されます。

まとめ – 状況に応じた最適な無効化方法を選ぼう！

マークダウンでリンクを無効化する方法、用途によって様々でしたね！

今日学んだポイント：

✅ バックスラッシュ（\）でエスケープが基本
✅ インラインコードで記法を表示
✅ コメントアウトで一時的に無効化
✅ HTMLエンティティで特殊文字を回避
✅ プラットフォームごとに挙動が異なる

用途別の推奨方法：

  • 記法の説明 → インラインコード
  • URLの表示 → バッククォート
  • 一時無効 → コメントアウト
  • 視覚的無効 → 取り消し線
  • 完全無効 → エスケープ

目的に応じて適切な方法を選択し、読みやすいドキュメントを作成しましょう！

これで、マークダウンでのリンク制御を完全にマスターできました！📝

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました