Wikiを使って何かを公開する為のノウハウ / 見た目を変える 配色について

このページは、配色についての詳細です。修正に当たっての主な情報は、Wikiを使って何かを公開する為のノウハウ/見た目を変える 試行錯誤した詳細に書いておいた。

このページの内容

• Tango カラーパレットをcssで使用出来る様に変換した方法
• 最終的に使用した色の一覧

Tango カラーパレットを変換する †

Tango Desktop Project から、gimp 用のカラーパレットを、ダウンロードした。

cssで使用出来る様に、16進数に変換する。1行のシェルスクリプトを書いた。変換したい行を expr の箇所で指定する様にした。

変換した際のコマンド (ubuntu)

# expr テキストの最終行 - 変換したい内容が始まる行 で指定する。
$ tail -n $( expr 31 - 4 ) Tango-Palette.gpl | while read r g b name; do printf "#%02X%02X%02X\t%s\n" ${r} ${g} ${b} "${name}"; done

public-domain だそうだから、ここに転記しておいた。 GIMP Paletteを、16進数に変換したもの。 gnome-terminal の水色を追加した。

#FCE94F	Butter 1	yellow light
#EDD400	Butter 2	yellow
#C4A000	Butter 3	yellow dark
#8AE234	Chameleon 1	green
#73D216	Chameleon 2
#4E9A06	Chameleon 3
#FCAF3E	Orange 1	orange
#F57900	Orange 2
#CE5C00	Orange 3
#729FCF	Sky Blue 1	blue light
#3465A4	Sky Blue 2	blue dark
#204A87	Sky Blue 3	blue black dark
#34E2E2 Sky Blue gnome-terminal light
#06989A Sky Blue gnome-terminal dark
#AD7FA8	Plum 1   	purple
#75507B	Plum 2
#5C3566	Plum 3
#E9B96E	Chocolate 1	brown
#C17D11	Chocolate 2
#8F5902	Chocolate 3
#EF2929	Scarlet Red 1	red
#CC0000	Scarlet Red 2
#A40000	Scarlet Red 3
#EEEEEC	Aluminium 1	white
#D3D7CF	Aluminium 2	white light
#BABDB6	Aluminium 3
#888A85	Aluminium 4
#555753	Aluminium 5	black light
#2E3436	Aluminium 6	black dark

実際に、使用した色 †

背景に使用する為に、ubuntu の外観の設定のカラーピッカーを用いて、色を作成した。

緑色を中心に薄くした色で揃えた。

文字の色	#2E3436	Aluminium 6	black dark
背景    	#EEEEEC	Aluminium 1	white
背景2   	#FFFFFD white fixed bright

背景3   	#FBFFF7 white slight green   基本にした色。白に近い緑
ハイライト背景2	#F2FFE6 green bright   基本にした色。薄い緑。

#CCD5DD   	#CED9C3 dark green fix   カレンダーと投票で使用。濁った明るい緑
#F0F8FF   	#1C3B00 black slight green   整形済みテキストで使用。黒い緑
#DD3333   	#EF2929 Scarlet Red 1	red   どこか分からないが3ヶ所で使用。赤
#FFCCCC   	#FFF1E6 orange fix   voteのみで使用。薄い赤
#FFFFDD   	#FFFCE6 yellow fix   calender?と左のmenu h4 h5で使用

リンクの色	#204A87	Sky Blue 3	blue black dark
hover    	#729FCF	Sky Blue 1	blue light
リンクの色2	#CE5C00 Orange 3

アクセント	#8AE234	Chameleon 1	green

ハイライト背景2	#E6F2FF blue fix 未使用



#FFFF66   	#FCE94F	Butter 1	yellow light
#A0FFFF   	#34E2E2 Sky Blue gnome-terminal light
#99FF99   	#8AE234	Chameleon 1	green
#FF9999   	#EF2929	Scarlet Red 1	red
#FF66FF   	#AD7FA8	Plum 1   	purple
#880000   	#8F5902	Chocolate 3
#00AA00   	#4E9A06	Chameleon 3
#886800   	#C17D11	Chocolate 2
#004699   	#204A87	Sky Blue 3	blue black dark
#990099   	#5C3566	Plum 3

差分とパッチ †

以下は、メモ書き。

差分をとっておいた。 [#td05e54e]

$ diff -du pukiwikiscreen.css style.css >style.css.diff

として、差分をとっておいた。

Ver 0.1 の時点で、変更箇所を、次の様にして見てみると、92行削除で 150行追加だった。

$ sed -e '/^+/!d' style.css.diff | wc -l
150

実際にパッチを当てるには、同じディレクトリーに pukiwikiscreen.css と、style.css.diff を置いて、次のコマンドでパッチが当たる。

$ patch <style.css.diff

目次

#includex(): Page index is already included.

最新の5件

2011-06-06

• Wikiを使って何かを公開する為のノウハウ/見た目を変える 試行錯誤した詳細
• Wikiを使って何かを公開する為のノウハウ/見た目を変える 配色について

2011-06-30

• game

2011-06-09

• MenuBar
• Yonaretar

今日の5件

• FrontPage(2)
• InterWikiName(1)
• FormattingRules(1)
• PukiWiki/1.4/Manual/Plugin(1)
• PukiWiki/1.4/Manual/Plugin/V-Z(1)

• counter: 181
• today: 1
• yesterday: 0
• online: 2

 

 

---

この作品で特に断っていたり引用していないものは、クリエイティブ・コモンズ表示 3.0 非移植ライセンスの下に提供されています。
Copyright (C) 2011 Yo Naretar