「Help:色の使用」の版間の差分

履歴の双方向閲覧

← 古い編集新しい編集 →

削除された内容追加された内容

ビジュアルウィキテキスト

インライン

2017年4月4日 (火) 04:47時点における版

この文書は手引き書です。ウィキペディア日本語版での活動の参考にされていますが、方針やガイドラインではありません。

ショートカット:

リンクは読者がはっきりと識別できるようにすべきです。
通常の文と区別がつきにくい色を使用したり、審美的な理由だけでリンクの色を変えないでください。詳しくは色のコントラスト、Wikipedia:アクセシビリティ#色、ナビボックスの色を参照してください。

テンプレートや表の色を変えるには16進トリプレット（例：黒は#000000) かHTML色名（例：赤はred）を指定してください。

文字色の変更

文字色を変えるには： 文字

なお、イギリス英語の colour は使えません。

例

赤文字は赤文字と表示される
緑文字は緑文字と表示される
青文字は青文字と表示される

テンプレートの文字色

{{Font color}}も使えます。

{{Font colour|文字色|背景色|文字の内容}}

例	結果
`{{font color\|red\|色違いの文字}}`	色違いの文字文字色だけ変える（普通の文字をリンクと同じような色にしないでください）
`{{font color\|red\|yellow\|色違いの文字}}`	色違いの文字文字色と背景色の両方を変える
`{{font color\|\|yellow\|色違いの文字}}`	色違いの文字背景色だけ変える注：文字色変更との違いは、こちらはパイプを2つ使います`\|\|`

色の生成法

ウィキメディア英語版において、メインページ、コミュニティ・ポータル、Portal:目次（英語版）、Help:目次など玄関的な役目を果たすページの配色は配色の方法に従って選ばれています。その配色の方法はHSV色空間で色を生成してからRGBに変換したものです。

色相	彩度4% 明度100% 主な背景色	彩度10% 明度100% <smallレベル2の見出しのアクセントカラー	彩度15% 明度95% 主な枠線色見出しの背景色	彩度15% 明度75% 見出しの枠線色
		枠線の間に空白がない場合は暗いほうの枠線色を使います。
色相: 0	#FFF5F5	#FFE6E6	#F2CECE	#BFA3A3
色相: 10	#FFF7F5	#FFEAE6	#F2D4CE	#BFA7A3
色相: 20	#FFF8F5	#FFEEE6	#F2DACE	#BFACA3
色相: 30	#FFFAF5	#FFF2E6	#F2E0CE	#BFB1A3
色相: 40	#FFFCF5	#FFF7E6	#F2E6CE	#BFB6A3
色相: 50	#FFFDF5	#FFFBE6	#F2ECCE	#BFBAA3
色相: 60	#FFFFF5	#FFFFE6	#F2F2CE	#BFBFA3
色相: 70	#FDFFF5	#FBFFE6	#ECF2CE	#BABFA3
色相: 80	#FCFFF5	#F7FFE6	#E6F2CE	#B6BFA3
色相: 90	#FAFFF5	#F2FFE6	#E0F2CE	#B1BFA3
色相: 100	#F8FFF5	#EEFFE6	#DAF2CE	#ACBFA3
色相: 110	#F7FFF5	#EAFFE6	#D4F2CE	#A7BFA3
色相: 120	#F5FFF5	#E6FFE6	#CEF2CE	#A3BFA3
色相: 130	#F5FFF7	#E6FFEA	#CEF2D4	#A3BFA7
色相: 140	#F5FFF8	#E6FFEE	#CEF2DA	#A3BFAC
色相: 150	#F5FFFA	#E6FFF2	#CEF2E0	#A3BFB1
色相: 160	#F5FFFC	#E6FFF7	#CEF2E6	#A3BFB6
色相: 170	#F5FFFD	#E6FFFB	#CEF2EC	#A3BFBA
色相: 180	#F5FFFF	#E6FFFF	#CEF2F2	#A3BFBF
色相: 190	#F5FDFF	#E6FBFF	#CEECF2	#A3BABF
色相: 200	#F5FCFF	#E6F7FF	#CEE6F2	#A3B6BF
色相: 210	#F5FAFF	#E6F2FF	#CEE0F2	#A3B1BF
色相: 220	#F5F8FF	#E6EEFF	#CEDAF2	#A3ACBF
色相: 230	#F5F7FF	#E6EAFF	#CED4F2	#A3A7BF
色相: 240	#F5F5FF	#E6E6FF	#CECEF2	#A3A3BF
色相: 250	#F7F5FF	#EAE6FF	#D4CEF2	#A7A3BF
色相: 260	#F8F5FF	#EEE6FF	#DACEF2	#ACA3BF
色相: 270	#FAF5FF	#F2E6FF	#E0CEF2	#B1A3BF
色相: 280	#FCF5FF	#F7E6FF	#E6CEF2	#B6A3BF
色相: 290	#FDF5FF	#FBE6FF	#ECCEF2	#BAA3BF
色相: 300	#FFF5FF	#FFE6FF	#F2CEF2	#BFA3BF
色相: 310	#FFF5FD	#FFE6FB	#F2CEEC	#BFA3BA
色相: 320	#FFF5FC	#FFE6F7	#F2CEE6	#BFA3B6
色相: 330	#FFF5FA	#FFE6F2	#F2CEE0	#BFA3B1
色相: 340	#FFF5F8	#FFE6EE	#F2CEDA	#BFA3AC
色相: 350	#FFF5F7	#FFE6EA	#F2CED4	#BFA3A7
色相・彩度0	#FFFFFF	#F9F9F9	#F2F2F2	#BFBFBF

ほかの色相でのカラーパレットは、colorblender.comで簡単に生成することができます。

ウィキメディアにおけるカラースキーム

ウィキペディア英語版

ウィキペディア英語版のメインページでは下記の配色を使用しています。

なお、浅い背景色のボックスの枠線色は暗い背景色のボックスの背景色と同じ色です。

色相: 150	背景:`#F5FFFA` 枠線:`#CEF2E0`	背景:`#CEF2E0` 枠線:`#A3BFB1`
色相: 210	背景:`#F5FAFF` 枠線:`#CEE0F2`	背景:`#CEE0F2` 枠線:`#A3B1BF`
色相: 270	背景:`#FAF5FF` 枠線:`#E0CEF2`	背景:`#E0CEF2` 枠線:`#B1A3BF`
色相: 330	背景:`#FFF5FA` 枠線:`#F2CEE0`	背景:`#F2CEE0` 枠線:`#BFA3B1`

また英語版のコミュニティ・ポータルでは下記を使用しています。

色相: 030 背景:#FFFAF5 枠線:#F2E0CE 背景:#F2E0CE 枠線:#BFB1A3

ベクター外装でのデフォルト背景色は#FFFFFFで、モノブック外装でのデフォルト背景色は#F8FCFFです。

ウィキメディア・コモンズ

ウィキメディア・コモンズ英語版ではメインページとHelp:目次に下記のカラースキームを使用しています。ウィキペディア英語版と違い、コモンズでは見出しの枠線と表全体の枠線が同じ色です。またウィキペディア英語版と違い、この配色は色相によって定義されたものではありません。

背景色: #D0E5F5

背景色: #F1F5FC
枠線色: #ABD5F5

背景色: #FAECC8

背景色: #FAF6ED
枠線色: #FAD67D

@@ 1行目: / 1行目: @@
-{{about|記事内の色の使用|色に関する私論|:Wikipedia:テンプレートの色で編集合戦をしない|色の使用に関する草案|:Wikipedia:アクセシビリティ#色}}
+{{about|色の使用方法|色の使用について指針|Wikipedia:色の使用}}
-{{How-to}}
+{{How-to|H:COLOR|H:COLOUR}}
-{{警告|1={{big|'''リンクは読者にとって簡単に認識できるようにすべきです'''。}}<br />普通の文字と区別がつきにくいリンクの色を使用せず、美学的な理由だけでリンクの色を変えないでください。詳しくは[[Wikipedia:色のコントラスト|色のコントラスト]], [[ Wikipedia:アクセシビリティ#色]]、[[WP:NAVIBOXCOLOUR|ナビボックスの色]]をご参照ください。}}
+{{警告|'''リンクは読者がはっきりと識別できるようにすべきです'''。<br />通常の文と区別がつきにくい色を使用したり、審美的な理由だけでリンクの色を変えないでください。詳しくは[[Wikipedia:色のコントラスト|色のコントラスト]]、[[Wikipedia:アクセシビリティ#色]]、[[WP:NAVIBOXCOLOUR|ナビボックスの色]]を参照してください。}}
-{{ショートカット|H:COLOR|H:COLOUR}}
-[[Wikipedia:テンプレート|テンプレート]]や[[Help:表の作り方|表]]で色を変えるには[[16進トリプレット]]（例：黒は#000000) か[[HTML色名]]（例：赤はred）を指定してください。
+[[Wikipedia:テンプレート|テンプレート]]や[[Help:表の作り方|表]]の色を変えるには[[16進トリプレット]]（例：黒は#000000) か[[HTML色名]]（例：赤はred）を指定してください。
 == 文字色の変更 ==
@@ 10行目: / 9行目: @@
 <code><nowiki><span style="color:</nowiki>''16進トリプレットかHTML色名''<nowiki>">文字</span></nowiki></code>
-なお、[[イギリス英語]]の「colour」は使えません。
+なお、[[イギリス英語]]の colour は使えません。
-例：
+例
 *<code><nowiki><span style="color:red">赤文字</span></nowiki></code>は<span style="color:red">赤文字</span>と表示される
 *<code><nowiki><span style="color:#0f0">緑文字</span></nowiki></code>は<span style="color:#0f0">緑文字</span>と表示される
@@ 18行目: / 17行目: @@
 === テンプレートの文字色 ===
-[[Template:Font color]]も使えます。
+{{Tl|Font color}}も使えます。
 <code><nowiki>{{Font colour|文字色|背景色|文字の内容}}</nowiki></code>
@@ 37行目: / 36行目: @@
 == 色の生成法 ==
-*ウィキメディア英語版において、[[メインページ]]、[[Wikipedia:コミュニティ・ポータル|コミュニティ・ポータル]]、{{仮リンク|Portal:目次|en|Portal:Contents}}、[[Help:目次|Help:目次]]など玄関的な役目を果たすページの色はカラースキームによってきまります。そのカラースキームは[[HSV色空間]]で色を生成してから[[RGB]]に変換したものです。
+ウィキメディア英語版において、[[メインページ]]、[[Wikipedia:コミュニティ・ポータル|コミュニティ・ポータル]]、{{仮リンク|Portal:目次|en|Portal:Contents}}、[[Help:目次|Help:目次]]など玄関的な役目を果たすページの配色は配色の方法に従って選ばれています。その配色の方法は[[HSV色空間]]で色を生成してから[[RGB]]に変換したものです。
 <table border="0" cellspacing="4" cellpadding="8" style="border:black solid 1px;">
@@ 43行目: / 42行目: @@
 <th width="80px">色相</th>
 <th>彩度4%<br />明度100%<br /><br /><small>主な背景色</small></th>
-<th>彩度10%<br />明度100%<br /><br /><small>ヘッダのアクセントカラー</small></th>
+<th>彩度10%<br />明度100%<br /><br /><smallレベル2の見出しのアクセントカラー</small></th>
-<th>彩度15%<br />明度95%<br /><small>主な枠線色<br />ヘッダ背景色</small></th>
+<th>彩度15%<br />明度95%<br /><small>主な枠線色<br />見出しの背景色</small></th>
-<th>彩度15%<br />明度75%<br /><br /><small>ヘッダ枠線色</small></th>
+<th>彩度15%<br />明度75%<br /><br /><small>見出しの枠線色</small></th>
 </tr>
 <tr>
@@ 313行目: / 312行目: @@
 </table>
-*ほかの色相での[[カラーチャート|カラーパレット]]は[http://colorblender.com/ colorblender.com]で簡単に生成することができます。
+ほかの色相での[[カラーチャート|カラーパレット]]は、[http://colorblender.com/ colorblender.com]で簡単に生成することができます。
 == ウィキメディアにおけるカラースキーム ==
 === ウィキペディア英語版 ===
-ウィキペディア英語版の[[メインページ]]では下記のカラースキームを使用しています。
+ウィキペディア英語版の[[メインページ]]では下記の配色を使用しています。
-:''なお、浅い背景色のボックスの枠線色は暗い背景色のボックスの背景色と同じ色です。''
+:なお、浅い背景色のボックスの枠線色は暗い背景色のボックスの背景色と同じ色です。
 {|
 |-
@@ 349行目: / 348行目: @@
 === ウィキメディア・コモンズ ===
-ウィキメディア・コモンズ英語版では[[:commons:Main Page|メインページ]]と[[:commons:Help:Contents|Help:目次]]に下記のカラースキームを使用しています。ウィキペディア英語版と違い、コモンズではヘッダの枠線と表全体の枠線が同じ色です。またウィキペディア英語版と違い、この配色は[[色相]]によって定義されたものではありません。
+ウィキメディア・コモンズ英語版では[[:commons:Main Page|メインページ]]と[[:commons:Help:Contents|Help:目次]]に下記のカラースキームを使用しています。ウィキペディア英語版と違い、コモンズでは見出しの枠線と表全体の枠線が同じ色です。またウィキペディア英語版と違い、この配色は[[色相]]によって定義されたものではありません。
 {| cellspacing="0" cellpadding="0" style="margin:0 0 1em; width:100% background:white;"
 | style="width:50%; vertical-align:top; border:1px solid #abd5f5; background:#f1f5fc;"|
@@ 363行目: / 362行目: @@
 == 関連項目 ==
+*[[Wikipedia:色の使用]] ガイドライン
-=== テンプレート ===
+*[[Wikipedia:アクセシビリティ#色]] ガイドラインの草案
-*文字と背景に色をつける
+*[[Wikipedia:テンプレートの色で編集合戦をしない]] 私論
-** [[Template:Font color]]
-*色の例として色つきボックスを表示する
-** [[Template:Colorsample]]
-** {{仮リンク|Template:Swatch|en|Template:Swatch}}
-** {{仮リンク|Template:Swatch-inline|en|Template:Swatch-inline}}
-=== ヘルプページ ===
+=== テンプレート ===
+文字と背景に色をつける
-* [[Wikipedia:アクセシビリティ#色]]
+* {{Tl|Font color}}
-* [[:Category:色を過剰に使用している記事]]
+色の例として色つきボックスを表示する
+* {{Tl|Colorsample}}
+* {{仮リンク|Template:Swatch|en|Template:Swatch}}
+* {{仮リンク|Template:Swatch-inline|en|Template:Swatch-inline}}
+=== ヘルプ ===
 * {{仮リンク|Wikipedia:リンクの色|en|Wikipedia:Link color}}
 * [[Help:JPEG画像を減色しPNG画像として保存する方法]]
+* [[:Category:色を過剰に使用している記事]]
-=== ウィキペディア記事 ===
+=== 記事 ===
 * {{仮リンク|カラーツール|en|Color tool}}
 * [[ウェブカラー]]

例	結果
`{{font color\|red\|色違いの文字}}`	色違いの文字文字色だけ変える（普通の文字をリンクと同じような色にしないでください）
`{{font color\|red\|yellow\|色違いの文字}}`	色違いの文字文字色と背景色の両方を変える
`{{font color\|\|yellow\|色違いの文字}}`	色違いの文字背景色だけ変える注：文字色変更との違いは、こちらはパイプを2つ使います`\|\|`