個別に リンクの好ましい習慣があるのに気を留めてください。つまり、これらはMDN スタイルガイドについて述べたものです。

ツールバーを使う

最も分かり易いリンク作成法は、ツールバーのリンクボタンをクリックするか、Ctrl-K (MacではCommand-K) を押してリンク作成することです。リンクボタンはこのようなものです: The link button (as of 2015-12-04)。 この機能を使用して、最初からリンクを作成したり、既存の選択したテキストにリンクを追加することができます。

最初からリンクを作成する

リンクボタンをクリックすると、次のようなLink(ハイパーリンク)エディタのダイアログが表示されます:

[Link Info]タブを表示する[Link]ダイアログボックスのスクリーンショット

ここで新規のリンクを作ることができます。ダイアログ内のコントロールは次の通り:

Link Type(リンクタイプ)
作成しているリンクのタイプ。 既定の[URL]は、MDNまたはオフサイトのいずれかのWeb上のURLです。 [ページ内のアンカー]または[E-Mail]を選択することもできます。 [ページ内のアンカー]オプションを使用すると、ツールバーの[アンカー]ボタンを使用して以前に挿入したアンカーにリンクすることができます。 [E-Mail]オプションを使用すると、受信者の電子メールアドレス、件名、およびデフォルトのメッセージ内容を入力してmailto: URLを設定できます。 ほとんどの場合、[URL]オプションを使用します。
Article Title Lookup / Link Text(記事タイトル検索/リンクテキスト)
このフィールドには2つの目的があります。 まず、リンク先として使用される特定のテキストを指定します(または、ダイアログボックスを開く前にドキュメント内のテキストを選択していた場合、そのテキストがリンク先として表示されます)。 ここに入力されたテキストは、入力した内容と一致するMDN上の記事を検索して、可能な宛先ページを見つけるために使用されます。 たとえば、このボックスに "Array" と入力すると、次のように表示されます。

[Link]ダイアログボックスのスクリーンショット。テキスト"Array"のルックアップメニューを表示します。

ここに、入力したテキストがタイトルに含まれるMDNのすべてのページのリストが表示されます。 リストをスクロールしてそれらのページの1つを選択するか、入力を続けてリストを絞り込むことができます。 一覧の項目にはロケールが表示されます(この場合、"[en-US]")。 そのテキストはリンク先のテキストでは使用されませんが、編集中のロケールと同じロケールの記事にリンクしていることを確認するのに役立ちます。
Attachments(添付ファイル)
また、このリストから添付ファイルを選択して、リンクを現在のページに添付されているファイルのいずれかへのリンクにすることもできます。 これはコードサンプルなどをダウンロードするためのリンクを提供する素晴らしい方法です。
URL
最後に、URLフィールドで実際にURLを直接入力できます。 [記事タイトル検索]メニューまたは[添付ファイル]メニューで選択したURLも表示されます。 一般的な方法は、MDNの他の場所で作業しているページにURLを貼り付けることです。 MDNの別の記事にリンクする場合は、URLの先頭からドメイン名("https://developer.mozilla.org")を削除してください。

リンクを設定したら、[OK]ボタンをクリックしてそれを挿入します。

注意を払うと、ハイパーリンクエディタダイアログに2番目のタブ(Advanced、高度な設定)があることがわかります。 少なくとも現時点では、定期的に使用することをお勧めするオプションはありません。 将来はリンクのための代替スタイルが存在する可能性がありますが、新しいツールバーウィジェットを追加して、それらの機能が利用可能になったらそれを使用する可能性があります。

既存テキストのリンク

既存のテキストをリンクにする場合は、プロセスをいくらか簡略化することができます。 ハイパーリンクエディタを開く前に、リンクにするテキストを選択します。 [記事タイトル検索/リンクテキスト]フィールドに選択したテキストがあらかじめ入力されます。 たとえば、次のテキストがあるとします。

You may find it useful to use JavaScript arrays when working on this project.

"arrays" を適切なコンテンツへのリンクにする必要があります。 その単語を選択してリンクエディタを起動するだけです。 前のケースと同様の事前入力済みのダイアログが表示されます。 提案された記事の上にマウスを「ホバーする」と、相対スラグ(developer.mozilla.orgを基準にした相対URL)が表示され、その場所と記事の種類をより正確に把握できます。

ルックアップメニューとURLのツールチップを表示する[Link]ダイアログボックスのスクリーンショット

ここでは、一致候補として提案された記事のうち、"Arrays" は良い選択のように見えるので、それを選択することができます。 これは自動的に[URL]フィールドに入力されるので、[OK]をクリックすれば、テキストは次のようなリンクに変わります。

You may find it useful to use JavaScript arrays when working on this project.

リンクマクロを使う

MDNは、与えられた用語に適切なコンテンツへのリンクを自動的に作成し、スタイルガイドに従ってスタイルを設定するマクロを大量に使用します。 これを考えてみましょう: 私たちのスタイルガイドは、APIの用語名、HTMLの要素と属性、CSSのプロパティ、関数名などは<code> 要素でスタイリングする必要があることを示しています。 それらはまた、通常は、MDNの適切なページへのリンクにする必要があります。

マクロを使用してこれらのリンクを作成するには少し慣れが必要ですが、多くの利点があります。

  • 適切なスタイルがあなたのために適用されます。
  • リンクがあなたのために作成されます — 将来MDNがどのように構成されていくかを将来的に見直すことができます。
  • 適切なツールチップをあなたのために作成することもできます。

これらのマクロはたくさんありますが、ここではそれらをすべて見ないようにします。 代わりに、最も一般的なもののいくつかの特定の例を見ていきます。 詳細なリストについては、MDNのカスタムマクロガイドのハイパーリンクの作成を参照してください。 これらのマクロのいずれかのKumaScriptソースコードをいつでも見ることができます。 ほとんどは、どのように動作するのか、もしあれば、さまざまなパラメータが何であるかを説明するコメントを先頭に付けています。

API文書へのリンク

APIへのスタイル付きリンクを作成するために非常に役立つマクロが多数あります。 ここには最も有用なものがいくつかあります。 いずれの場合も、(<code>スタイリングの自動追加を抑制するなど)出力をより詳細に制御できるようにパラメータを追加することができます。 下の各マクロ名をクリックすると、マクロコード自体を読むことができます。 それらはすべて、どのように動作するのか、すべてのパラメータが何であるかを説明するコメントを先頭に付けています。

HTMLElement
適切にスタイル付けされ、リンクされたHTML要素の名前を挿入します。 たとえば、{{HTMLElement("table")}}<table>を生成します。
cssxref
CSSリファレンスのCSSプロパティ、@-規則、セレクタのドキュメントを挿入します。 たとえば、{{cssxref("background-color")}}background-colorになります。
domxref
指定されたAPI用語のWeb APIリファレンスへのリンクを挿入します。 たとえば、{{domxref("window")}}windowを生成し、{{domxref("window.scrollBy()")}}window.scrollBy()を挿入します。 テキストをオーバーライドする追加のパラメータを指定することもでき、{{domxref("window.scrollBy", "scrollBy()")}}scrollBy()になります。
SVGElement
SVG要素の名前を適切にスタイル付けしてリンクしたものを挿入します。 たとえば、{{SVGElement("circle")}}<circle>を生成します。

同じ記事のセクションにリンクする

同じ記事内のセクションにリンクするには、anch マクロを使用できます。 構文は簡単です: {{anch("宛先セクション名")}}。 デフォルトでは、表示されているリンクテキストはそのセクションのタイトルですが、代わりに使用する代替テキストを示す2番目のオプションのパラメータを追加できます。 いくつかの例:

バグにリンクする

bugマクロを使って、MozillaのBugzillaデータベースのバグにリンクすることができます。 このマクロは、リンクするバグ番号という単一のパラメータを受け入れます。 たとえば、{{bug(765642)}}は次のようになります: バグ 765642

同様に、他のブラウザやWebエンジンのバグへのリンクを作成することもできます。

Google Chrome
ChromeBug: {{chromebug(31277)}}Chromium bug 31277を生成します。
WebKit (Safari, etc.)
WebkitBug: {{webkitbug(31277)}}WebKit bug 31277を生成します。

 

RFCにリンクする

インターネットがコアレベルで動作する方法の多くは、RFCに文書化されています。 RFCマクロを使用して簡単にRFCを参照できます。 たとえば、{{RFC(2616)}}RFC 2616になります。 オプションで、記事の選択されたテキスト部分、および/またはリンク先の仕様内のセクション番号の代わりに、使用する代替リンクテキストを提供することもできます。

XPCOM インターフェイスに関する情報へリンクする

MDNスタッフはもはやXPCOMの文書を積極的に管理していませんが、ボランティアの貢献は歓迎します。

Mozillaの内部を文書化している場合は、XPCOMのインタフェース文書へのリンクを簡単に作成できることが役立ちます。 これにはいくつかのマクロが使われています。

XPCOMインターフェイスの文書全体にリンクするための構文は、{{interface("interfacename")}}です。 たとえば、次のように書くことができます。

When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.

結果は次のようになります。

When you need to parse or create URIs, the nsIIOService interface can help.

XPCOMインターフェイス上の特定のメソッドまたは属性に関する情報にリンクする必要がある場合は、ifmethodおよびifattributeマクロが必要です。 これらは、インターフェースの名前と、参照したいメソッドまたは属性の名前をパラメーターとして受け入れます。 ifmethod マクロは、メソッドの名前の後にスタイルガイドに必須のカッコを追加することによって特別なフォーマットを行うので、特に興味深いです。 たとえば、{{ifmethod("nsIIOService", "newURI")}}の結果はnsIIOService.newURI()になります。 それは、あなたが将来的にスタイルガイドの変更の可能性から保護されているケースです!

Mozilla設定文書へリンクする

Mozillaプリファレンスの名前を挿入し、プリファレンスリファレンスの対応するページにリンクするには、prefマクロを使用します。 これには1つのパラメータ、つまりリンク先のプリファレンスのフルネームが指定されています。 たとえば、{{pref("javascript.options.showInConsole")}}を使用すると、javascript.options.showInConsoleを作成できます。

Mozilla ソースファイルへリンクする

sourceマクロを使用して、Mozillaのソースツリー内のファイルにリンクすることができます(おそらくこれは頻繁ではありません)。 ファイルの完全なURLを指定する代わりに、単に/source/ディレクトリを基準にしたパスを指定することができます。 例: {{source("browser/Makefile.in")}}はこのリンクを作成します: browser/Makefile.in

オプションで、リンクに使用する代替テキストを指定することもできます。 たとえば、{{source("browser/Makefile.in", "ブラウザのmakefile")}}を使用して結果を得ることができます: ブラウザのmakefile

マクロの使用方法について詳しく知りたい場合は、Using macrosのドキュメントを参照してください。また、マクロシステムの詳細については、KumaScriptのドキュメントを参照してください。

推奨コンテンツへリンクする

関連ページやその他のお勧め資料のリストを作成する場合は、サイドバーにクイックリンクボックスを作成してください。 このメカニズムは、記事の最後にある "関連項目" の見出しを置き換えています。 クイックリンクボックスの作成方法の詳細については、クイックリンクを参照してください。

 

URLスキーム

セキュリティ上の理由から、次のスキームを使用するリンクのみを作成してください。

  • http://
  • https://
  • ftp://
  • mailto:

他のものは動作するかもしれないし、動作しないかもしれないが、サポートされておらず、おそらく編集スタッフによって削除されるだろう。

about:chrome: のような特別なURLスキームは、Firefox、Google Chrome、その他のブラウザで、設定、デバッグ情報などの特別なコンテンツへのアクセスを提供するために使用されます。 これらのリンクは記事のコンテンツからは機能しませんので、MDNの記事内でこれらのスキームを使用してリンクを作成しないでください。 同様のことが javascript:jar: スキームにも適用されます。これらのスキームは、最新のブラウザでセキュリティの予防策としてブロックされています。

 

ドキュメントのタグと貢献者

このページの貢献者: fscholz, Wind1808, wbamberg, Uemmra3
最終更新者: fscholz,