SSIで擬似ブログサイト作成計画 − 擬似ブログ作成の具体例

先に例に上げた私のブログは若干特殊なレイアウト構造になっていますので、分かりやすくするため、右に上げたようなレイアウトで説明します。便宜上、サイドバーとフッター部分を分けてあります。

ヘッダー部分
ここではタイトルを表示させます。タイトル表示に関するHTML表示を外部ファイル「header.html」（ファイル名は任意です）にまとめます。 あとでメインファイルに貼りつける際にレイアウトしやすいよう、ヘッダー部をCSSのクラス名をあてたDIVタグで囲っています。

本文部分
本文は各ページで必ず変わる部分ですので、メインファイルに直接記述するようにします。

サイドバー部分
サイドバーで表示させたい部分を外部ファイルにまとめます。例では「同一カテゴリ内の記事（contents.html）」と「他のカテゴリへのリンク（category.html）」の2つをサイドバーに記載するようにします。 ヘッダー部では、レイアウトするためにDIVタグで囲いましたが、ここではレイアウトするためのDIVタグをメインファイルに記載、記載内容を個別の外部ファイルで管理することで、更新しやすいようにしています。サイドバーに記載する内容が全ページで共通するものであれば、ヘッダー部分と同様に、レイアウトのためのDIVタグを含めて外部ファイルを作成しても構いません。

フッター部分
ここではコピーライトを表示させます。コピーライト表示に関するHTML表示を外部ファイル「footer.html」（ファイル名は任意です）にまとめます。 ここではフッターに記載する内容をコピーライトのみとしましたが、複数の内容を掲載したい場合、サイドバー部分の説明と同様にレイアウトのためのDIVタグをメインファイルに記載し、内容を個別に管理するのも良いでしょう。