Markdownでtarget="_blank"付きのリンクを作成する方法

2024-04-02

Markdownでtarget="_blank"付きのリンクを作成する

方法1：HTMLタグを使用する

リンクしたいテキストを選択します。
Ctrl+Shift+Iキーを押して、HTML編集モードを開きます。
以下のコードを入力します。

<a href="リンク先URL" target="_blank">リンクテキスト</a>

例：

<a href="https://www.google.com" target="_blank">Google検索</a>

プレビュー画面で確認し、問題なければ保存します。

方法2：拡張機能を使用する

いくつかのMarkdownエディタには、target="_blank"属性を簡単に設定できる拡張機能があります。

Markdown Preview Plus (Visual Studio Code)
Markdown Links (Atom)

これらの拡張機能をインストールすると、リンク設定画面にtarget="_blank"オプションが表示されます。

方法3：Pandocを使用する

Pandocは、Markdownファイルを他の形式に変換するためのツールです。

コマンドラインから以下のコマンドを実行することで、target="_blank"付きのリンクを含むHTMLファイルを作成できます。

pandoc -f markdown -t html -o output.html input.md --link-attributes "target=_blank"

注意点

一部のMarkdownレンダラーでは、target="_blank"属性がサポートされていない場合があります。
セキュリティ上の理由から、target="_blank"属性の使用を制限しているサイトもあります。

上記の方法のいずれかを使用して、Markdownでtarget="_blank"付きのリンクを作成することができます。

どの方法を使用するかは、使用しているエディタや環境によって異なります。

補足

HTML

HTMLは、Webページを作成するための言語です。
<a>タグは、リンクを作成するために使用されます。
href属性は、リンク先のURLを指定します。
_blankは、リンクを新しいタブで開くことを意味します。

Markdown

Markdownは、プレーンテキスト形式で文書を作成するための言語です。
Markdown記法を使用して、リンク、画像、見出しなどの書式を記述することができます。

Hyperlink

ハイパーリンクは、Webページ上の別の場所または別のWebページへのリンクです。
クリックすると、リンク先へ移動することができます。

target="_blank"

target="_blank"属性は、リンクを新しいタブまたはウィンドウで開くことを指定します。
複数のページを開いたまま比較したい場合などに便利です。

拡張機能

拡張機能は、エディタやブラウザの機能を拡張するためのプログラムです。

Pandoc

コマンドラインから使用することができます。

[Google検索](https://www.google.com "Google検索" target="_blank")

拡張機能を使用する場合は、拡張機能の設定画面でtarget="_blank"オプションを有効にする必要があります。

pandoc -f markdown -t html -o output.html input.md --link-attributes "target=_blank"

input.md

[Google検索](https://www.google.com)

output.html

<a href="https://www.google.com" target="_blank">Google検索</a>

出力結果

上記のコードを実行すると、以下の出力が得られます。

拡張機能を使用する場合は、拡張機能によって出力が異なる場合があります。

補足

上記は基本的な例です。

リンクテキストやリンク先URLは、自由に設定することができます。
target="_blank"属性は、複数のリンクに設定することができます。

Markdownでtarget="_blank"付きのリンクを作成する他の方法

方法4：JavaScriptを使用する

JavaScriptを使用して、リンクをクリックしたときに新しいタブを開くことができます。

<a href="https://www.google.com" onclick="window.open(this.href, '_blank'); return false;">Google検索</a>

方法5：CSSを使用する

a[target="_blank"] {
  cursor: pointer;
}

a[target="_blank"]:hover {
  background-color: #ccc;
}

方法6：HTML属性を使用する

HTML5には、rel="noopener"属性とrel="noreferrer"属性があります。これらの属性は、セキュリティを向上させるために使用されます。

rel="noopener"属性は、リンク先のページが現在のページを操作できないようにします。

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google検索</a>

補足

JavaScriptを使用する方法は、最も柔軟な方法ですが、JavaScriptの知識が必要となります。
CSSを使用する方法は、比較的簡単な方法ですが、すべてのブラウザでサポートされているわけではありません。
HTML属性を使用する方法は、最も安全な方法ですが、すべてのリンクに適用する必要があります。

上記の情報は参考用であり、予告なく変更される場合があります。

html hyperlink markdown

Markdownでtarget="_blank"付きのリンクを作成する方法