色の変更
先日「Wikipediaとの差別化のために、ナビゲーションテンプレートの色を変える」という案をりこりすさんが出されましたので、いくつか色見本を作ってみました。お気に入りの色がございましたら、コメントをよろしくお願いいたします。--ocha 2012年7月14日 (土) 16:24 (JST)
コメント
- 私は、現在のModernテーマの青色と補色の関係にあるオレンジを推したいと思います。--ocha 2012年7月14日 (土) 16:52 (JST)
- ボクは同系色が好きなので、リストの中からでは緑推しですかね。赤も悪くないかな、と思いつつ、赤やオレンジを採用する場合、もっと薄い色にしないと目が痛い、と感じました。補色を入れておくことで幻惑は防げますが、その分刺激はどうしても強くなってしまいますね。イラスト系サイトではないので、幻惑よりも疲労に重点を置いても良いかと思います。--りこりす 2012年7月20日 (金) 09:15 (JST)
- 私の場合には黄緑か、緑が好みですね。メインページの色彩もそれに合わせればいいのかなと思います。
話題から外れますが、ウェブページの場合には色彩も重要ですが、書式のバランスも考えないといけませんか。行間隔を離すことや、書式フォントを見やすいものに変更するとか。この辺り調整すれば見やすいページになると思います。--Cross 2012年7月20日 (金) 17:54 (JST)
色見本
色の設定は、タイトルをWebセーフカラーに、以下見出しのレベルが下がるごとに明るさを5%上げた色にしています。
以下に色見本と「MediaWiki:Common.css」での設定を示します。
赤 | 橙 | 黄緑 | 緑 | 青緑 | 青 | 紫 | 赤紫 |
---|---|---|---|---|---|---|---|
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
赤
/* Level 1 color */ .navbox-title, table.navbox th { background: #f99; } /* Level 2 color */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #ffb3b3; } /* Level 3 color */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #fcc; }
オレンジ
/* Level 1 color */ .navbox-title, table.navbox th { background: #fc3; } /* Level 2 color */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #ffd24d; } /* Level 3 color */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #ffd966; }
黄緑
/* Level 1 color */ .navbox-title, table.navbox th { background: #9c6; } /* Level 2 color */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #a6d279; } /* Level 3 color */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #b2d98c; }
緑
/* Level 1 color */ .navbox-title, table.navbox th { background: #9c9; } /* Level 2 color */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #aad5aa; } /* Level 3 color */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #bdb; }
青緑
/* Level 1 color */ .navbox-title, table.navbox th { background: #9cc; } /* Level 2 color */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #aad5d5; } /* Level 3 color */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #bdd; }
青
現在の色です。
紫
/* Level 1 color */ .navbox-title, table.navbox th { background: #c9f; } /* Level 2 color */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #d9b3ff; } /* Level 3 color */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #e5ccff; }
赤紫
/* Level 1 color */ .navbox-title, table.navbox th { background: #f9c; } /* Level 2 color */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #ffb3d9; } /* Level 3 color */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #ffcce6; }