マークダウンでリンクを別タブで開く方法！純粋なMarkdownからHTML併用まで完全解説

Web

「外部リンクは別タブで開きたい…」 「GitHubのREADMEで別タブリンクを作りたい…」 「target=”_blank”を使えないの？」 「MarkdownとHTMLを混ぜても大丈夫？」

Markdownでドキュメントを書いていて、リンクを別タブで開きたいと思ったことはありませんか？

実は、純粋なMarkdownには別タブでリンクを開く機能がないんです。これはMarkdownが「シンプルさ」を重視して設計されているからです。

でも諦める必要はありません！HTMLを併用したり、各プラットフォーム特有の拡張機能を使えば、別タブリンクを実現できます。

この記事では、様々な環境でマークダウンのリンクを別タブで開く方法を、完全解説していきます。

プラットフォームごとの違いも理解して、適切な方法を選べるようになりましょう！

スポンサーリンク

Markdownの基本的なリンク記法 – まずはおさらい

インラインリンク

基本構文：

[表示テキスト](URL)

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

タイトル付きリンク：

[表示テキスト](URL "タイトル")

例：
[Google検索](https://www.google.com "世界最大の検索エンジン")

マウスホバーでタイトルが表示されます。

参照リンク

分離型の記法：

本文中：
[表示テキスト][参照名]

文書の最後：
[参照名]: URL "オプションのタイトル"

例：
こちらは[GitHub][1]のリンクです。

[1]: https://github.com "ソースコード管理サービス"

自動リンク

URLをそのまま記述：

<https://www.example.com>

または（多くの環境で自動認識）：
https://www.example.com

なぜ純粋なMarkdownで別タブ指定ができないのか

Markdownの設計思想

Markdownの原則：

  1. 可読性重視 – プレーンテキストでも読みやすい
  2. シンプルさ – 覚えることを最小限に
  3. HTMLへの変換 – 最終的にHTMLになることを前提
  4. プラットフォーム中立 – どこでも同じように動作

target="_blank"のような詳細な制御は、これらの原則に反するため、意図的に含まれていません。

セキュリティの観点

target=”_blank”の問題点：

  • リンク先ページから元ページを操作できる脆弱性
  • rel="noopener noreferrer"の指定が必要
  • フィッシング攻撃のリスク

Markdownはこれらの複雑な問題を避けるため、シンプルな仕様を維持しています。

HTMLを使った解決方法 – 最も確実な方法

基本的なHTML記法

HTMLタグを直接記述：

<a href="https://www.google.com" target="_blank">Googleを新しいタブで開く</a>

セキュリティ対策付き：

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">安全なリンク</a>

rel="noopener noreferrer"を付けることで、セキュリティリスクを軽減できます。

MarkdownとHTMLの混在

実例：

## 通常のMarkdownテキスト

ここは普通のMarkdownです。でも、
<a href="https://example.com" target="_blank">このリンク</a>
は別タブで開きます。

- リスト項目1
- <a href="https://example.com" target="_blank">リスト内のリンク</a>
- リスト項目3

多くのMarkdownパーサーは、HTMLタグをそのまま通します。

プラットフォーム別の対応方法

GitHub / GitLab

GitHubの制限：

<!-- これは動作しません -->
<a href="https://example.com" target="_blank">リンク</a>

<!-- target属性は自動的に削除されます -->

GitHubはセキュリティ上の理由でtarget="_blank"を削除します。

代替案：

  • READMEに「Ctrl/Cmd + クリックで別タブ」と明記
  • 外部リンクには🔗アイコンを付ける

Obsidian

Obsidianでの設定：

<!-- 設定で外部リンクを別タブで開くよう変更可能 -->
[外部リンク](https://example.com)

設定 → エディター → 「外部リンクを新しいタブで開く」をオン

Notion

Notionの挙動：

  • 外部リンクは自動的に別タブで開く
  • 内部リンクは同じタブで開く
  • ユーザーが制御する必要なし

Visual Studio Code + Markdown Preview

拡張機能での対応：

// settings.json
{
  "markdown.preview.openMarkdownLinks": "inEditor"
}

プレビューの設定で挙動を変更できます。

JavaScript/CSSを使った解決策

すべての外部リンクを別タブで開く

JavaScriptソリューション：

<script>
// すべての外部リンクにtarget="_blank"を追加
document.addEventListener('DOMContentLoaded', function() {
    var links = document.querySelectorAll('a[href^="http"]');
    links.forEach(function(link) {
        if (link.hostname !== window.location.hostname) {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener noreferrer');
        }
    });
});
</script>

CSSで外部リンクを視覚的に区別

外部リンクにアイコンを追加：

/* 外部リンクの後にアイコンを表示 */
a[href^="http"]:not([href*="yourdomain.com"])::after {
    content: " 🔗";
    font-size: 0.8em;
}

/* またはFontAwesomeを使用 */
a[href^="http"]:not([href*="yourdomain.com"])::after {
    content: "\f08e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 0.2em;
}

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

Jekyll

_config.ymlでの設定：

# Kramdownの設定
kramdown:
  input: GFM
  syntax_highlighter: rouge

プラグインを使用：

# _plugins/external_links.rb
Jekyll::Hooks.register :posts, :post_render do |post|
  post.output.gsub!(/(<a\s+href="https?:\/\/[^"]+")/, '\1 target="_blank" rel="noopener"')
end

Hugo

config.tomlでの設定：

[markup]

[markup.goldmark]

[markup.goldmark.renderer] unsafe = true # HTMLタグを許可

[markup.goldmark.parser]

[markup.goldmark.parser.attribute] block = true # ブロック要素に属性を追加可能

ショートコードの作成：

<!-- layouts/shortcodes/external-link.html -->
<a href="{{ .Get "href" }}" target="_blank" rel="noopener noreferrer">
  {{ .Get "text" }}
</a>

使用例：

{{< external-link href="https://example.com" text="外部サイト" >}}

Gatsby

gatsby-remark-external-linksプラグイン：

// gatsby-config.js
{
  resolve: `gatsby-remark-external-links`,
  options: {
    target: `_blank`,
    rel: `noopener noreferrer`
  }
}

ベストプラクティスと注意点

セキュリティ上の推奨事項

必ず含めるべき属性：

target="_blank" rel="noopener noreferrer"

各属性の意味：

  • target="_blank" – 新しいタブ/ウィンドウで開く
  • rel="noopener" – 新しいページからwindow.openerへのアクセスを防ぐ
  • rel="noreferrer" – リファラー情報を送信しない

ユーザビリティの考慮

良い実践：

  1. 視覚的な区別
    • 外部リンクにはアイコンを付ける
    • 別タブで開くことを明示
  2. 一貫性
    • サイト内で統一した動作
    • 予測可能な挙動
  3. 説明の追加 [外部サイト ↗](https://example.com) [ダウンロード (PDF, 2MB)](file.pdf)

アクセシビリティ

スクリーンリーダー対応：

<a href="https://example.com" 
   target="_blank" 
   rel="noopener noreferrer"
   aria-label="外部サイトを新しいタブで開く">
  リンクテキスト
</a>

よくある質問と回答

Q1：なぜGitHubでtarget=”_blank”が使えないの？

**A：**XSS攻撃などのセキュリティリスクを防ぐため、GitHubは多くのHTML属性を自動的にサニタイズします。

Q2：Markdownエディタでプレビューする方法は？

**A：**多くのエディタは設定で外部リンクの挙動を変更できます。

  • VSCode：拡張機能の設定
  • Typora：設定 → イメージ&リンク
  • Mark Text：Preferences → Links

Q3：SEO的に問題はない？

A：rel="noreferrer"を使用するとリファラー情報が送信されませんが、SEOへの直接的な悪影響はありません。

Q4：モバイルでの挙動は？

**A：**モバイルブラウザでは、新しいタブとして開く場合と、アプリが起動する場合があります。

実装例とテンプレート

汎用的なMarkdownテンプレート

# ドキュメントタイトル

## 内部リンク
- [同じタブで開く内部リンク](#section)
- [別ページ](/other-page)

## 外部リンク（HTML使用）
- <a href="https://google.com" target="_blank" rel="noopener noreferrer">Google 🔗</a>
- <a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub 🔗</a>

## 注記
※ 🔗マークの付いたリンクは新しいタブで開きます
※ Ctrl（Cmd）+ クリックでも新しいタブで開けます

まとめ – 環境に応じた最適な方法を選ぼう

マークダウンで別タブリンクを実現する方法、実は色々ありましたね！

今日学んだポイント：

✅ 純粋なMarkdownでは別タブ指定不可
✅ HTMLタグを使えば確実に実装可能
✅ GitHubなど一部環境では制限あり
✅ セキュリティ対策（rel属性）が重要
✅ プラットフォームごとに最適解が異なる

選択指針：

  • 個人ブログ・サイト → HTML直書きまたはJavaScript
  • GitHub → アイコンで視覚的に示す
  • 社内ドキュメント → プラットフォームの機能を活用
  • 静的サイト → ジェネレーターのプラグイン使用

環境と目的に応じて、適切な方法を選択してください。

セキュリティとユーザビリティのバランスを取りながら、使いやすいドキュメントを作成しましょう！📝

Youtube

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

スポンサーリンク

コメント

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