テンプレート化したCSSを持つテーマ

Date 2007-04-03 06:52:19 | Category: XOOPS

in englishin japanese
テーマのCSSをいじるときにいつも違和感を覚えるのが、あまりにも重複した即値が多い、ってことです。
CSSベースのテーマだと特にそうで、同じ意味を持つ同じ数値(width等)が何度も出てきます。同じ数値なら検索できるだけまだマシですが、その数値+1とか、数値の半分なんて指定をしないと崩れることも多く、悩みのタネです。

色も同様で、いろんな箇所で色指定がされている割に、それをまとめて指定する方法がありません。

さらに、ブラウザ間の互換性を解消するためのバグっぽいスタイル指定なんかも、まともなブラウザには送りたくありません。

そのイライラを解消するために、テンプレート化したCSSを持つテーマ、なんてのを作ってみました。

http://xoops.peak.ne.jp/md/mydownloads/singlefile.php?lid=98

ベースは、CSSテーマとしてはかなり完成度の高い、hodakaさん作 full_flex_1 です。
http://www.hodajuku.org/modules/mydownloads/singlefile.php?cid=1&lid=1
CSSテーマとして完成度が高いということは、すなわち、CSSがとてもいじりづらい構造になっています(=多くの即値が複雑な関連性を持っている)。CSSテンプレートの実力を見せるためには、まさにうってつけのベーステーマと言えるでしょう。

このテーマのCSSカスタマイズは、screen_css.php の以下の部分をいじります。
このようにカラーを抽出してみると、実際にサイトのイメージを決めるのはおよそ8色程度であることが判ります。

「8色?」

ええ、そうです。エイプリルフールネタでは、この$colorsに、pic2colorから得られた色を割り当てていたわけです!
screen_css.php

// CONFIGURATIONS

$colors = array(
	'bg' => '#cccccc' ,
	'main' => '#ffffff' ,
	'main_rev' => '#666666' ,
	'header' => '#2f5376' ,
	'header_rev' => '#ffffff' ,
	'link' => '#666666' ,
	'link_hover' => '#ff6600' ,
	'impact' => '#2f5376' ,
	'impact_rev' => '#ffffff' ,
	'title' => '#dddddd' ,
	'title_rev' => '#639ace' ,
	'head' => '#c2cdd6' ,
	'even' => '#dee3e7' ,
	'odd' => '#e9e9e9' ,
	'error' => '#ffcccc' ,
	'confirm' => '#ddffdd' ,
	'result' => '#dddddd' ,
	'border' => '#999999' ,
) ;
$fonts = array(
	'main' => '"Verdana","Arial","Helvetica","sans-serif"' ,
	'monospace' => '"Courier New","Courier","monospace"' ,
) ;
$sizes = array(
	'body_min_width' => 750 ,
	'body_max_width' => 1024 ,
	'block_left_width' => 170 ,
	'block_right_width' => 170 ,
	'header_height' => 80 ,
	'footer_height' => 23 ,
) ;
$cache_limit = 3600 ; // 1 hour

// END OF CONFIGURATIONS




You can read more news at PEAK XOOPS.
http://xoops.peak.ne.jp

The URL for this story is:
http://xoops.peak.ne.jp/md/news/index.php?page=article&storyid=419