チュートリアル - ディレクトリサイト開発支援ツール/CustomDir

色調の変更

Foo Search のロゴはオレンジと黄色のグラデーションを利用した、暖色系の色合いです。しかし、CustomDir のデフォルトの色合いは寒色系になっており、各種バーは薄い紫や緑が利用されています。Foo Search のロゴに合わせて、各種バーや文字の色合いを暖色系に変更してみましょう。

HTML で表現された文字の色や大きさを変更する方法として、<font> 等のタグの使用が良く知られています。しかし近年、アクセシビリティ向上のために、文字の色合いを HTMLファイル内で直接指定するのは、可能な限り避けていこうという動きがあります。また、CustomDir のようにあらかじめ用意された大量の HTML を後から加工するようなシステムでは、<font> タグで文字の装飾をコントロールするのはなかなか大変です。

このようなニーズに答えつつ問題を解決していくために、CustomDir ではスタイルシートを利用して文字の装飾を行います。~/49884/_sys/style.css というファイルを見て下さい (サンプル)。これは css (カスケーディング・スタイル・シート、あるいは単にスタイルシート)と呼ばれる物で、htmlファイルに対し、さまざまな装飾を行います。以下のソースは ~/49884/test.shtml の <head> タグの部分です。強調表示されている部分が、スタイルシートを呼び出している部分です。CustomDir の全 shtml ファイルで、同様のスタイルシート呼び出しが行われます。よって、~/49884/_sys/style.css を書き換えるだけで、全ページの文字装飾を一気に行う事ができます。


<head>

<meta content="text/html; charset=Shift-JIS" http-equiv="Content-Type">

<!--#set var="jp_dir" value="" -->

<title>Japanese</title>

<meta http-equiv="Content-Style-Type" content="text/css">

<link rel="stylesheet" type="text/css" href="_sys/style.css" >

<!--#include virtual="_sys/ssi_parts/html_header.shtml"-->

</head>

では　Foo Search のスタイルシートを書き換えて、画面の色合いを変更してみましょう。取りあえず、カテゴリー名が表示される部分を薄い緑色から温かみのあるオレンジに変更してみます。まずはこの部分が shtml ファイル内でどのように表現されているかを調べます。以下は ~/49884/test.html 内の該当部分です。すべての階層の shtml ファイルでも、同じ構成になっています。


<body>

<!--#include virtual="_sys/ssi_parts/page_header.shtml"-->

<h1>テストページ</h1>

<div class="navi"><a class="navi" href="index.shtml" >Top</a> / 

<span class="navi_self">テストページ</span>

</div>

………

見ての通り、<h1> タグで表現されている事が分かりました。次に ~/49884/_sys/style.css を開き、<h1> タグを表現している部分を見つけます。以下はスタイルシートの冒頭部分です。


/*

  ページ全体のスタイルを設定します。

*/

body

{

}

 

/*

  ページのカテゴリー名が表示される領域です。

*/

h1

{

  background : #e0ffe0;

  margin : 0px;

}

 

/*

  ディレクトリー階層表示部分です。

*/

div.navi

{

  background : #fffff0;

  font-weight:bold;

  font-size:125%;

}

………

強調部分の h1という部分に注目して下さい。このようにスタイルシートでは装飾するタグの名前の後に中カッコ "{}"を記述し、カッコの中に装飾する内容を記述します。ここでは背景色が #e0ffe0 と指定してあり、<h1> タグの背景を薄い緑色にする事を示しています。またmargin (マージン) を０ピクセルに指定してあり、隣接する領域に隙間を開けないように指示しています。この指定がないと、カテゴリー名の下に表示される上位カテゴリーへのナビゲーションを行う部分との間に、隙間が出来てしまうからです。

それでは、背景色を薄いオレンジ色にしてみましょう。また、文字の色もデフォルトの黒ではなく、背景のオレンジにマッチする茶色にしてみます。変更は以下のようになります。


/*

  ページのカテゴリー名が表示される領域です。

*/

h1

{

  color : #996600;

  background : #FFCC99;

  margin : 0px;

}

これでカテゴリー名を表示するバーがオレンジになり、温かい感じになります。

このように、スタイルシートはそれぞれのタグに対し、外部から装飾の指示を出す事ができます。また、ひとつのスタイルシートを複数の html ファイルから読み込む事により、統一のとれた装飾を行う事ができるため、CustomDir には打って付けの機能であると言えます。以下は<h1> タグ以外の部分もスタイルシートを変更し、全体的に暖色系に変更した Foo Search のサンプルです。

暖色系に変更した Foo Search

利用しているスタイルシート

スタイルシートの機能は非常に沢山あるため、とてもここでは説明しきれません。詳細は各自で調査して下さい。