コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

「Help:外部リンクアイコン」の版間の差分

削除された内容 追加された内容
m編集の要約なし
Cewbot (会話 | 投稿記録)
m Bot作業依頼: sourceタグをsyntaxhighlightタグに置換 (Category:非推奨のsourceタグを使用しているページ) - log
101行目: 101行目:
== カスタム外部リンクアイコン ==
== カスタム外部リンクアイコン ==
[[特別:利用者ページ/skin.css]](設定で選ばれた外装にのみ適用)または[[特別:利用者ページ/common.css]](全ての外装に適用)を編集することで、カスタムの外部リンクアイコンを指定することができます。例えば、[[Microsoft Excel]]のファイルにアイコンを追加したい場合、下記の断片を追加してください。
[[特別:利用者ページ/skin.css]](設定で選ばれた外装にのみ適用)または[[特別:利用者ページ/common.css]](全ての外装に適用)を編集することで、カスタムの外部リンクアイコンを指定することができます。例えば、[[Microsoft Excel]]のファイルにアイコンを追加したい場合、下記の断片を追加してください。
<source lang="css" enclose="div">
<syntaxhighlight lang="css" enclose="div">
#content a[href$=".xls"].external,
#content a[href$=".xls"].external,
#content a[href$=".XLS"].external,
#content a[href$=".XLS"].external,
108行目: 108行目:
background: url("https://upload.wikimedia.org/wikipedia/commons/b/ba/Page_white_excel.png") center right no-repeat; padding-right: 18px;
background: url("https://upload.wikimedia.org/wikipedia/commons/b/ba/Page_white_excel.png") center right no-repeat; padding-right: 18px;
}
}
</syntaxhighlight>
</source>


CSSが編集されたら、下記の外部リンクにアイコンが表示されるようになります。
CSSが編集されたら、下記の外部リンクにアイコンが表示されるようになります。
116行目: 116行目:


既定のアイコンを除去する場合、上記のCSS断片からURLを除去することでできます。例えば、httpsのリンクから南京錠アイコンを除去したい場合は下記のように指定します。
既定のアイコンを除去する場合、上記のCSS断片からURLを除去することでできます。例えば、httpsのリンクから南京錠アイコンを除去したい場合は下記のように指定します。
<source lang="css">
<syntaxhighlight lang="css">
div#content a[href ^="https://"].external {
div#content a[href ^="https://"].external {
background: center right no-repeat; padding-right: 18px;
background: center right no-repeat; padding-right: 18px;
}</source>
}</syntaxhighlight>


既定のアイコンを全て除去する場合、下記のように指定します。
既定のアイコンを全て除去する場合、下記のように指定します。
<source lang="css">
<syntaxhighlight lang="css">
div#content a.external {
div#content a.external {
background:none !important;
background:none !important;
padding: 0px !important;
padding: 0px !important;
}</source>
}</syntaxhighlight>


== 関連項目 ==
== 関連項目 ==

2020年7月6日 (月) 11:41時点における版

外部リンクは一般的にはリンクの最後にアイコンを表示します。ウィキペディアでは外装ごとにCSSを利用して特定の拡張子URIスキームを検出して、それらに基づき特定のアイコンを表示することができます。なお、拡張子の検出はURLに基づいて行われ、リンク先が実際にその拡張子のファイルであるかどうかは検査していません。

このページではアイコンを示すために例示用のURLを提示していますが、いずれも実在のファイルを指していません。

解説

MediaWikiのソフトウェアは拡張子URIスキームを検出してリンクを作成します。そのため、URIのないリンクでは外部リンクが作成されません。また、URLのURIスキーム以外の部分は検出しないため、wwwがあるかどうかは外部リンクの作成を影響しません。

既定の外装であるベクターはPDFアイコンしか表示せず、ケルンブルーも同じである。モバイル用のMinervaNeueでは全て表示しません。一方、モダン、モノブック、Timelessは多くの種類のアイコンを表示します。各外装で表示されるアイコンは外装のCSSで定義されていますが、PDFアイコンのみは{{PDFlink}}が使われる場合に表示されるとCommon.cssでで定義されています。

ファイル拡張子に基づくアイコンは拡張子が一致する場合にのみ表示されます。また、ファイル拡張子とURIスキームの両方にアイコンが指定されている場合、ファイル拡張子のアイコンが優先して表示されます。リンクテキストが2行以上にわたる場合、Internet Explorerで不具合が生じることがあります。外部リンクアイコンは代替テキストを指定できないため、アクセシビリティの基準に適合しません。

下記のリンクでこのページを別の外装で表示することができます。
種類 拡張子
Portable Document Format .pdf .PDF, .pdf# .PDF# .pdf? .PDF? http://example.org/test.pdf
Audio Video Interleave .avi .AVI http://example.org/test.avi
MPEG-1 .mpg .MPG .mpeg .MPEG http://example.org/test.mpg
Ogg .ogm .OGM http://example.org/test.ogm
MIDI .MID .midi .MID http://example.org/test.mid
MP3 .MP3 http://example.org/test.mp3
Ogg Vorbis .OGG http://example.org/test.ogg
Waveform Audio File Format .WAV* http://example.org/test.wav
Windows Media Audio .wma .WMA http://example.org/test.wma
種類 URIスキーム
Internet Relay Chat irc:// ircs:// irc://example.org
File Transfer Protocol ftp:// ftp://example.org
Network News Transfer Protocol news: news:example.org
mailto mailto: mailto:example@example.org
HTTPS https:// https://example.org/test.html
Apache Subversion svn:// svn://example.org/
ビットコイン bitcoin:// bitcoin://example.org/
FTPS ftps:// ftps://example.org/
Geo URI英語版 geo: geo:37.786971,-122.399677
Git git:// git://example.org/
Gopher gopher:// gopher://example.org
Hypertext Transfer Protocol http:// http://example.org
Magnet URI scheme英語版 magnet:// magnet://example.org/
Multimedia Messaging Service mms:// mms://example.org/
NASA World Wind worldwind:// worldwind://example.org/
Network News Transfer Protocol nntp:// nntp://example.org/
Secure Shell ssh:// ssh://example.org/
Secure Session Initiation Protocol sips:// sips://example.org/
Session Initiation Protocol sip:// sip://example.org/
Short Message Service sms:// sms://example.org/
SSH File Transfer Protocol sftp:// sftp://example.org/
電話 tel:// tel://example.org/
Telnet telnet:// telnet://example.org/
Uniform Resource Name urn: urn:isbn:0451450523
Extensible Messaging and Presence Protocol xmpp:// xmpp://example.org/

外部リンクアイコンを隠す

plainlinksクラスを使用することで外部リンクアイコンを隠すことができますが、非推奨となっています。

<span class="plainlinks">http://example.org/test.pdf</span>

カスタム外部リンクアイコン

特別:利用者ページ/skin.css(設定で選ばれた外装にのみ適用)または特別:利用者ページ/common.css(全ての外装に適用)を編集することで、カスタムの外部リンクアイコンを指定することができます。例えば、Microsoft Excelのファイルにアイコンを追加したい場合、下記の断片を追加してください。

#content a[href$=".xls"].external,
#content a[href$=".XLS"].external,
#content a[href$=".xlsx"].external,
#content a[href$=".XLSX"].external {
    background: url("https://upload.wikimedia.org/wikipedia/commons/b/ba/Page_white_excel.png") center right no-repeat; padding-right: 18px;
}

CSSが編集されたら、下記の外部リンクにアイコンが表示されるようになります。

http://example.org/test.xls

上記のCSS断片は.xls、.xlsxおよびそれらを2文字にした拡張子を検出します。カスタム外部リンクアイコンは必ず横幅16pxでなければならず、SVGを使用することができません。また、必ず https://upload.wikimedia.org にあるファイルでなければなりません。ファイルのリンクを生成するにはファイルページで画像を開いた後、URLをコピーしてください。

既定のアイコンを除去する場合、上記のCSS断片からURLを除去することでできます。例えば、httpsのリンクから南京錠アイコンを除去したい場合は下記のように指定します。

div#content a[href ^="https://"].external {
    background: center right no-repeat; padding-right: 18px;
}

既定のアイコンを全て除去する場合、下記のように指定します。

div#content a.external {
    background:none !important;
    padding: 0px !important;
}

関連項目