1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
title: リンク
slug: MDN/Editor/Links
tags:
- Guide
- MDN Meta
- editor
- ガイド
- 編集者
translation_of: MDN/Editor/Links
---
<div>{{MDNSidebar}}</div>
<p id="Creating_and_editing_links"><span class="seoSummary">多くの文書間だけでなく、単一の文書内でも、リンクは wiki において重大な構成要素であり、 MDN はそれにかなり依存しています。運の良いことに、リンクは作成が簡単でもありますが、更にたくさんの作り方があります!</span></p>
<div class="blockIndicator note">
<p><strong>メモ:</strong> 特に<a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide#Links">リンクの推奨される方法</a>があります。これらは<a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide"> MDN 書式ガイド</a>で説明されています。</p>
</div>
<h2 id="Using_the_toolbar" name="Using_the_toolbar">ツールバーの使用</h2>
<p>リンクを作成するのに最も分かりやすい方法は、ツールバーの「リンク」ボタンをクリックするか、 <kbd>Ctl</kbd>+<kbd>K</kbd> (Mac では <kbd>Command</kbd>-<kbd>K</kbd>) を押してリンク作成することです。リンクボタンは <img alt="The link button (as of 2015-12-04)" src="https://mdn.mozillademos.org/files/12003/link-button.png" style="height: 16px; width: 16px;"> のような外見です。この機能を使用して、最初からリンクを作成したり、既存の選択したテキストにリンクを追加したりすることができます。</p>
<h3 id="Creating_a_link_from_scratch" name="Creating_a_link_from_scratch">最初からリンクを作成する</h3>
<p>リンクボタンをクリックすると、次のようなハイパーリンクエディターのダイアログが表示されます。</p>
<p><img alt="Screenshot of the Link dialog box, showing the Link Info tab" src="https://mdn.mozillademos.org/files/15289/link-info.png" style="border-style: solid; border-width: 1px; height: 320px; width: 335px;"></p>
<p>ここで新規のリンクを作ることができます。ダイアログ内のコントロールは次の通りです。</p>
<dl>
<dt>リンクタイプ</dt>
<dd>作成しているリンクのタイプ。既定は「URL」で、 MDN またはサイト外のウェブ上のどこかの URL です。「ページ内のアンカー」または「E-Mail」を選択することもできます。「ページ内のアンカー」を使用すると、ツールバーの<strong>アンカー</strong>ボタンを使用して以前に挿入したアンカーにリンクすることができます。「E-Mail」を使用すると、受信者の電子メールアドレス、件名、および既定のメッセージ内容を入力して <code>mailto:</code> URL を設定できます。ほとんどの場合は「URL」を使用します。</dd>
<dt>記事タイトル検索/リンクテキスト</dt>
<dd>このフィールドには2つの目的があります。まず、リンク先として使用される特定のテキストを指定します (または、ダイアログボックスを開く前にドキュメント内のテキストを選択していた場合、そのテキストがリンク先として表示されます)。ここに入力されたテキストは、入力した内容と一致する MDN 上の記事を検索して、可能な宛先ページを見つけるために使用されます。たとえば、このボックスに "Array" と入力すると、次のように表示されます。<br>
<img alt='Screenshot of the Link dialog box, showing a lookup menu for the text "Array"' src="https://mdn.mozillademos.org/files/15291/link%20dialog%20with%20lookup%20menu.png" style="border-style: solid; border-width: 1px; height: 388px; width: 496px;"></dd>
</dl>
<dl>
<dd>ここに、入力したテキストがタイトルに含まれる MDN のすべてのページのリストが表示されます。リストをスクロールしてそれらのページの1つを選択するか、入力を続けてリストを絞り込むことができます。一覧の項目にはロケールが表示されます(この場合、"[en-US]")。そのテキストはリンク先のテキストでは使用されませんが、編集中のロケールと同じロケールの記事にリンクしていることを確認するのに役立ちます。</dd>
<dt>添付ファイル</dt>
<dd>また、このリストから添付ファイルを選択して、リンクを現在のページに添付されているファイルのいずれかへのリンクにすることもできます。これはコードサンプルなどをダウンロードするためのリンクを提供する素晴らしい方法です。</dd>
<dt>URL</dt>
<dd>最後に、 URL フィールドで実際に URL を直接入力できます。「<strong>記事タイトル検索</strong>」または「<strong>添付ファイル</strong>」メニューで選択した URL も表示されます。一般的な方法は、 MDN の他の場所で作業しているページに URL を貼り付けることです。 MDN の別の記事にリンクする場合は、 URL の先頭からドメイン名 ("https://developer.mozilla.org") を削除してください。</dd>
</dl>
<p>リンクを設定したら、 <strong>OK</strong> ボタンをクリックしてそれを挿入します。</p>
<div class="note">
<p>注意していると、ハイパーリンクエディターダイアログに2番目のタブ (<strong>Advanced</strong>、高度な設定) があることがわかります。少なくとも現時点では、定期的に使用することをお勧めするオプションはありません。将来はリンクのための代替スタイルが存在する可能性がありますが、新しいツールバーウィジェットを追加して、それらの機能が利用可能になったらそれを使用する可能性があります。</p>
</div>
<h3 id="Linking_existing_text" name="Linking_existing_text">既存テキストのリンク</h3>
<p>既存のテキストをリンクにする場合は、プロセスをいくらか簡略化することができます。ハイパーリンクエディタを開く前に、リンクにするテキストを選択します。<strong>記事タイトル検索/リンクテキスト</strong>フィールドに選択したテキストがあらかじめ入力されます。たとえば、次のテキストがあるとします。</p>
<blockquote>
<p>このプロジェクトの作業中に JavaScript 配列を使用すると便利です。</p>
</blockquote>
<p>"arrays" を適切なコンテンツへのリンクにする必要があります。その単語を選択してリンクエディタを起動するだけです。前のケースと同様の事前入力済みのダイアログが表示されます。提案された記事の上にマウスを「ホバーする」と、相対スラグ (<code>developer.mozilla.org</code>を基準にした相対 URL) が表示され、その場所と記事の種類をより正確に把握できます。</p>
<p><img alt="ルックアップメニューとURLのツールチップを表示する[Link]ダイアログボックスのスクリーンショット" src="/files/15293/Rollover%20of%20lookup%20menu.png" style="height: 387px; width: 493px;"></p>
<p>ここでは一致候補として提案された記事のうち、"Arrays" は良い選択のように見えるので、それを選択することができます。これは自動的に URL フィールドに入力されるので、 <strong>OK</strong> をクリックすれば、テキストは次のようなリンクに変わります。</p>
<blockquote>
<p>このプロジェクトの作業中に JavaScript の<a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a>を使用すると便利です。</p>
</blockquote>
<h2 id="Using_link_macros" name="Using_link_macros">リンクマクロを使う</h2>
<p>MDN は<a href="/ja/docs/Project:MDN/Contributing/Editor_guide#Using_macros">マクロ</a>を大量に使用しており、与えられた用語に適切なコンテンツへのリンクを自動的に作成したり、スタイルガイドに従ってスタイルを設定したりしています。これを考えてみましょう。私たちのスタイルガイドは、API の用語名、HTML の要素と属性、 CSS のプロパティ、関数名などは {{HTMLElement("code")}} 要素でスタイリングする必要があることを示しています。それらはまた、通常は、 MDN の適切なページへのリンクにする必要があります。</p>
<p>マクロを使用してこれらのリンクを作成するには少し慣れが必要ですが、多くの利点があります。</p>
<ul>
<li>適切なスタイルがあなたのために適用されます</li>
<li>リンクがあなたのために作成されます — 将来 MDN がどのように構成されていくかを将来的に見直すことができます</li>
<li>適切なツールチップをあなたのために作成することもできます</li>
</ul>
<p>これらのマクロはたくさんありますが、ここではそれらをすべて見ないようにします。代わりに、最も一般的なもののいくつかの特定の例を見ていきます。詳細なリストについては、 <a href="/ja/docs/Project:MDN/Contributing/Custom_macros">MDN のカスタムマクロ</a>ガイドの<a href="/ja/docs/Project:MDN/Contributing/Custom_macros#Creating_hyperlinks">ハイパーリンクの作成</a>を参照してください。これらのマクロのいずれかの <a href="/ja/docs/Project:Introduction_to_KumaScript">KumaScript</a> ソースコードをいつでも見ることができます。ほとんどは、どのように動作するのか、もしあれば、さまざまなパラメータが何であるかを説明するコメントを先頭に付けています。</p>
<h3 id="Linking_to_documentation_for_APIs" name="Linking_to_documentation_for_APIs">API 文書へのリンク</h3>
<p>API へのスタイル付きリンクを作成するために非常に役立つマクロが多数あります。ここには最も有用なものがいくつかあります。いずれの場合も、 (<code><code></code> スタイリングの自動追加を抑制するなど) 出力をより詳細に制御できるようにパラメータを追加することができます。下の各マクロ名をクリックすると、マクロコード自体を読むことができます。それらはすべて、どのように動作するのか、すべてのパラメータが何であるかを説明するコメントを先頭に付けています。</p>
<dl>
<dt>{{TemplateLink("HTMLElement")}}</dt>
<dd>適切にスタイル付けされ、リンクされた HTML 要素の名前を挿入します。たとえば、 <code>\{{HTMLElement("table")}}</code> は {{HTMLElement("table")}} を生成します。</dd>
<dt>{{TemplateLink("cssxref")}}</dt>
<dd>CSS リファレンスの CSS プロパティ、 @-規則、セレクターの文書を挿入します。たとえば、 <code>\{{cssxref("background-color")}}</code> は {{cssxref("background-color")}} になります。</dd>
<dt>{{TemplateLink("domxref")}}</dt>
<dd>指定された API 用語の Web API リファレンスへのリンクを挿入します。たとえば、 <code>\{{domxref("window")}}</code> は {{domxref("window")}} を生成し、 <code>\{{domxref("window.scrollBy()")}}</code> は {{domxref("window.scrollBy()")}} を挿入します。テキストをオーバーライドする追加のパラメータを指定することもでき、 <code>\{{domxref("window.scrollBy", "scrollBy()")}}</code> は {{domxref("window.scrollBy", "scrollBy()")}} になります。</dd>
<dt>{{TemplateLink("SVGElement")}}</dt>
<dd>SVG 要素の名前を適切にスタイル付けしてリンクしたものを挿入します。たとえば、 <code>\{{SVGElement("circle")}}</code> は {{SVGElement("circle")}} を生成します。</dd>
</dl>
<h3 id="同じ記事のセクションにリンクする">同じ記事のセクションにリンクする</h3>
<p>同じ記事内のセクションにリンクするには、anch マクロを使用できます。構文は簡単です: <code>\{{anch("宛先セクション名")}}</code>。デフォルトでは、表示されているリンクテキストはそのセクションのタイトルですが、代わりに使用する代替テキストを示す2番目のオプションのパラメータを追加できます。いくつかの例を示します。</p>
<ul>
<li><code>\{{anch("Using the toolbar")}}</code> は {{anch("Using the toolbar")}} のようになります。</li>
<li><code>\{{anch("Using the toolbar", "この記事の前半")}}</code> は {{anch("Using the toolbar", "この記事の前半")}} のようになります。</li>
</ul>
<h3 id="バグにリンクする">バグにリンクする</h3>
<p>{{TemplateLink("bug")}} マクロを使って、Mozilla の Bugzilla データベースのバグにリンクすることができます。このマクロは、リンクするバグ番号という単一のパラメータを受け入れます。たとえば、<code>\{{bug(765642)}}</code> は {{bug(765642)}} のようになります。</p>
<p>同様に、他のブラウザーやウェブエンジンのバグへのリンクを作成することもできます。</p>
<dl>
<dt>WebKit (Safari, etc.)</dt>
<dd>{{TemplateLink("WebkitBug")}}: <code>\{{webkitbug(31277)}}</code> は {{webkitbug(31277)}} を生成します。</dd>
</dl>
<h3 id="Linking_to_RFCs" name="Linking_to_RFCs">RFCにリンクする</h3>
<p>インターネットがコアレベルで動作する方法の多くは、 RFC に文書化されています。 {{TemplateLink("RFC")}} マクロを使用して簡単に RFC を参照できます。たとえば、 <code>\{{RFC(2616)}}</code> は {{RFC(2616)}} になります。オプションで、記事の選択されたテキスト部分、および/またはリンク先の仕様内のセクション番号の代わりに、使用する代替リンクテキストを提供することもできます。</p>
<h3 id="Linking_to_information_about_XPCOM_interfaces" name="Linking_to_information_about_XPCOM_interfaces">XPCOM インターフェイスに関する情報へリンクする</h3>
<div class="note">
<p>MDN スタッフはもはや XPCOM の文書を積極的に管理していませんが、ボランティアの貢献は歓迎します。</p>
</div>
<p>Mozilla の内部を文書化している場合は、 XPCOM のインタフェース文書へのリンクを簡単に作成できることが役立ちます。これにはいくつかのマクロが使われています。</p>
<p>XPCOM インターフェイスの文書全体にリンクするための構文は、 <code>\{{interface("interfacename")}}</code> です。たとえば、次のように書くことができます。</p>
<blockquote>
<p>When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.</p>
</blockquote>
<p>結果は次のようになります。</p>
<blockquote>
<p>When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.</p>
</blockquote>
<p>XPCOM インターフェイス上の特定のメソッドまたは属性に関する情報にリンクする必要がある場合は、 {{TemplateLink("ifmethod")}} および {{TemplateLink("ifattribute")}} マクロが必要です。これらは、インターフェイスの名前と、参照したいメソッドまたは属性の名前を引数として受け入れます。 {{TemplateLink("ifmethod")}} マクロは、メソッドの名前の後にスタイルガイドに必須のカッコを追加することによって特別なフォーマットを行うので、特に興味深いです。たとえば、 <code>\{{ifmethod("nsIIOService", "newURI")}}</code> の結果は {{ifmethod("nsIIOService", "newURI")}} になります。それは、あなたが将来的にスタイルガイドの変更の可能性から保護されているケースです！</p>
<h3 id="Linking_to_Mozilla_preference_documentation" name="Linking_to_Mozilla_preference_documentation">Mozilla 設定文書へのリンク</h3>
<p>Mozilla プリファレンスの名前を挿入し、<a href="/ja/docs/Mozilla/Preferences/Preference_reference">プリファレンスリファレンス</a>の対応するページにリンクするには、 {{TemplateLink("pref")}} マクロを使用します。これには1つのパラメータ、つまりリンク先のプリファレンスのフルネームが指定されています。たとえば、 <code>\{{pref("javascript.options.showInConsole")}}</code> を使用すると、 {{pref("javascript.options.showInConsole")}} を作成できます。</p>
<h3 id="Linking_to_a_Mozilla_source_file" name="Linking_to_a_Mozilla_source_file">Mozilla ソースファイルへリンクする</h3>
<p>source マクロを使用して、 Mozilla のソースツリー内のファイルにリンクすることができます (おそらくこれは頻繁ではありません)。ファイルの完全な URL を指定する代わりに、単に <code>/source/</code> ディレクトリを基準にしたパスを指定することができます。例: <code>\{{source("browser/Makefile.in")}}</code> は {{source("browser/Makefile.in")}} というリンクを生成します。</p>
<p>オプションで、リンクに使用する代替テキストを指定することもできます。たとえば、 <code>\{{source("browser/Makefile.in", "ブラウザーの makefile")}}</code> を使用すると、 {{source("browser/Makefile.in", "ブラウザーの makefile")}} のような結果になります。</p>
<div class="note">
<p>マクロの使用方法について詳しく知りたい場合は、 {{anch("Using macros")}} のドキュメントを参照してください。また、マクロシステムの詳細については、 <a href="/ja/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a> のドキュメントを参照してください。</p>
</div>
<h2 id="Linking_to_recommended_content" name="Linking_to_recommended_content">推奨コンテンツのリンク</h2>
<p>関連ページやその他のお勧め資料のリストを作成する場合は、サイドバーにクイックリンクボックスを作成してください。このメカニズムは、記事の末尾にある古い「関連情報」の見出しを置き換えるものです。クイックリンクボックスの作成方法の詳細については、<a href="/ja/docs/MDN/Contribute/Structures/Quicklinks">クイックリンク</a>を参照してください。</p>
<h2 id="URL_schemes" name="URL_schemes">URL スキーム</h2>
<p>セキュリティ上の理由から、作成するのは以下のスキームを使用するリンクのみにしてください。</p>
<ul>
<li><code>http://</code></li>
<li><code>https://</code></li>
<li><code>ftp://</code></li>
<li><code>mailto:</code></li>
</ul>
<p>他のものは動作するかもしれないし、動作しないかもしれませんが、対応しておらず、おそらく編集スタッフによって削除されます。</p>
<div class="note">
<p><code>about:</code> や <code>chrome:</code> のような特別な URL スキームは、 Firefox、 Google Chrome、その他のブラウザーで、設定、デバッグ情報などの特別なコンテンツへのアクセスを提供するために使用されます。これらのリンクは記事のコンテンツからは機能しませんので、 MDN の記事内でこれらのスキームを使用してリンクを作成しないでください。同様のことは <code>javascript:</code> と <code>jar:</code> スキームにも適用され、これらはセキュリティ上の予防策から、最新のブラウザーではブロックされています。</p>
</div>
<p>{{EditorGuideQuicklinks}}</p>
|
