段組の応用
段組の基本で解説したやり方で、Foo Search のページに段組を適用してみましょう。まず、段組を実現するにあたり、ページの横幅を固定させなければなりません。横幅をパーセント指定にしてブラウザの横幅に合わせて可変にする方法もありますが、今回は768ドットに固定する事にします。また、コンテンツ部分、広告部分を表現するために、新たなクラスを作成します。
/* 全体を括るクラス */
div.outer
{
width : 768px;
margin : 0px;
padding : 0px;
}
/* コンテンツ領域 */
div.contents
{
width : 640px;
margin : 0px 0px 0px 0px;
padding : 0px;
float : left;
}
/* 広告領域 */
div.ad
{
float : left;
width : 120px;
margin : 0px;
padding : 0px 4px 0px 4px;
}
/* フッター領域 */
div.footer
{
clear : left;
width : 760px;
margin : 0px;
padding : 4px;
}
そして、これらのスタイルが適用されるように、差し込みファイルも変更する必要があります。変更したファイルは以下の通りです。
- page_header.shtml
<div class="outer">
<img alt="Foo Search" src="<!--#echo var="jp_dir"-->_sys/../grp/foo_logo.jpg" width="186" hight="40">- contents_header.shtml
<div class="contents">- contents_footer.shtml
</div><!-- end of contents -->
<div class="ad">
<script type="text/javascript" src="http://www.customdir.net/tuto/ad.js"></script>
</div>
<div class="footer">
- page_footer.shtml
<hr>
Copyright (C) Foo Search
</div><!-- end of footer -->
</div><!-- end of outer -->
ある領域をタグで括る場合、閉じタグも記述する必要があります。よって ???_header.shtml と ???_footer.shtml をうまく活用し、必ずタグと閉じタグが対応するように気を付けて下さい。また、cateogry_header.shtml や site_header.shtml 等は、全ページに関わる記述はできません。これらの差し込みファイルは、カテゴリー一覧やサイト一覧が無いページでは表示されないからです。
ここまでを適用した Foo Search のページは、以下のリンクから参照できます。
- まずはダウンロード
- 圧縮ファイルの展開
- ファイルとディレクトリの確認
- カテゴリーID とディレクトリ
- アップロードとSSIの基本設定
- インデックスファイルの確認
- ソースを見てみる
- 差し込みファイルの詳細
- ロゴの表示
- テスト用ページの活用
- 色調の変更
- 広告を貼り付けよう
- 段組の基本
- 段組の応用
- トップページの作成
- バージョンアップ時の注意点
- 終わりに
