「Help:外部リンクアイコン」の版間の差分
m編集の要約なし |
|||
101行目: | 101行目: | ||
== カスタム外部リンクアイコン == |
== カスタム外部リンクアイコン == |
||
[[特別:利用者ページ/skin.css]](設定で選ばれた外装にのみ適用)または[[特別:利用者ページ/common.css]](全ての外装に適用)を編集することで、カスタムの外部リンクアイコンを指定することができます。例えば、[[Microsoft Excel]]のファイルにアイコンを追加したい場合、下記の断片を追加してください。 |
[[特別:利用者ページ/skin.css]](設定で選ばれた外装にのみ適用)または[[特別:利用者ページ/common.css]](全ての外装に適用)を編集することで、カスタムの外部リンクアイコンを指定することができます。例えば、[[Microsoft Excel]]のファイルにアイコンを追加したい場合、下記の断片を追加してください。 |
||
< |
<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のリンクから南京錠アイコンを除去したい場合は下記のように指定します。 |
||
< |
<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; |
||
}</ |
}</syntaxhighlight> |
||
既定のアイコンを全て除去する場合、下記のように指定します。 |
既定のアイコンを全て除去する場合、下記のように指定します。 |
||
< |
<syntaxhighlight lang="css"> |
||
div#content a.external { |
div#content a.external { |
||
background:none !important; |
background:none !important; |
||
padding: 0px !important; |
padding: 0px !important; |
||
}</ |
}</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で不具合が生じることがあります。外部リンクアイコンは代替テキストを指定できないため、アクセシビリティの基準に適合しません。
例
外部リンクアイコンを隠す
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が編集されたら、下記の外部リンクにアイコンが表示されるようになります。
上記の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;
}
関連項目