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

ロゴの表示

前準備はひととおり終わりました。今度は実際に差し込みファイルを書き換えて、デザインを変更してみましょう。これから作るサイトは"Foo Search"という架空のディレクトリサイトです。ページ上部にFoo Search のロゴを表示し、下部には Copyright を表示する事にします。ロゴは jpeg 形式の画像ファイルにします。以下のようなロゴを作ってみました。

このロゴを foo_logo.jpg と名前を付け、~/49884/_sys の下に grp というディレクトリを作り、そこに保存します。バージョンアップ時の注意点で詳しく触れますが、自分で作ったファイルはすべて _sys ディレクトリの下に保存するようにします。

では、ロゴファイルを全ページの最上部に貼り付ける事にしましょう。最上部には ~/49884/_sys/ssi_parts/page_header.shtml が差し込まれますので、このファイルを書き換えます。最初の状態ではガイド用のメッセージが書いてありますが、それらをすべて削除し、以下のように記述して下さい。


<img alt="Foo Search" width="200" hight="40" 
src="<!--#echo var="jp_dir"-->_sys/grp/foo_logo.jpg" >

<img>タグを利用してロゴを表示するわけですが、画像ファイルのアドレスを示す src 属性の指定において、強調表示されている部分に注目して下さい。これは変数の値を出力する SSI の命令で、ここでは jp_dir という値を出力するように指示しています。

前のパラグラフで少し触れましたが、これは Japanese 階層 (~/49884/)への相対パスを保持している変数です。例えば、~/49884/1111/index.shtml においては jp_dir は ../ になり、~/49884/1111/2222/index.shtml においては ../../ になります。どのようなディレクトリ階層におかれた index.shtml においても、jp_dir はつねに Japanese 階層を差し示します。画像ファイル等の場所を指定する時は、絶対パスを使わずに jp_dir を用いて相対パスを指定するべきです。このようにする事で、サーバー環境が変わったり、ディレクトリ階層を変えて設置しなくてはならなくなった時にも、変更が少なくて済むようになります。

次に page_footer.shtml を変更し、Foo Search の Copyright を記述します。
こちらは特に難しい事はありません。


<hr>

Copyright (C) Foo search

その他の差し込みファイルも書き換えていきたいと思いますが、今は取りあえずデフォルトのメッセージを削除しておく事にしましょう。ただし、category_header.shtml、site_header.shtml、related_header.shtml には、すでに<h2>タグで各セクションの見出しが記述されていますので、その部分だけは残しておきます。残すついでに片仮名では無く、英語で表示するように書き換えておきましょう。

この段階の各ファイルの内容は以下のようになります。

html_header.shtml: (空のファイル)
page_header.shtml: <img alt="Foo Search" width="186" hight="40" src="_sys/grp/foo_logo.jpg" >
page_footer.shtml: <hr> Copyright (C) Foo search
contents_header.shtml: (空のファイル)
contents_footer.shtml: (空のファイル)
category_header.shtml: <h2 class="category_header">Category</h2>
category_footer.shtml: (空のファイル)
category_l2_header.shtml: (空のファイル)
category_l2_footer.shtml: (空のファイル)
category_l1_header.shtml: (空のファイル)
category_l1_footer.shtml: (空のファイル)
category_l0_header.shtml: (空のファイル)
category_l0_footer.shtml: (空のファイル)
site_header.shtml: <h2 class="site_header">Site</h2>
site_footer.shtml: (空のファイル)
related_header.shtml: <h2 class="related_header">Related</h2>
related_footer.shtml: (空のファイル)

できあがったページを見てみましょう (サンプルページ)。どうですか？ロゴが入ってガイドのメッセージが無くなっただけでも、随分見栄えが良くなりました。

現在空になっている差し込みファイルも、今後のチュートリアルで追加していきます。なお、まったく使う事のないファイルも中にはありますが、その場合でもファイルを削除せず、０バイトのファイルとして残しておいて下さい。そうしないと SSI が正しく機能できず、エラーメッセージが表示されてしまうからです。