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

「ブログっぽいHTMLサイト」の具体例。



SSIでホームページらくらく更新術



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

ヘッダー部分
ここではタイトルを表示させます。タイトル表示に関するHTML表示を外部ファイル「header.html」(ファイル名は任意です)にまとめます。
「header.html」の内容

<div class="header">
<div class="title"><a href="/">サイトタイトル</a></div>
このサイトは、○○○○に関するサイトです。
</div>
あとでメインファイルに貼りつける際にレイアウトしやすいよう、ヘッダー部をCSSのクラス名をあてたDIVタグで囲っています。

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

サイドバー部分
サイドバーで表示させたい部分を外部ファイルにまとめます。例では「同一カテゴリ内の記事(contents.html)」と「他のカテゴリへのリンク(category.html)」の2つをサイドバーに記載するようにします。
「contents.html」の内容

<div class="side-title">同一カテゴリの記事</div>
<ul>
<li>同一カテゴリ内の記事 (1)
<li>同一カテゴリ内の記事 (2)
<li>同一カテゴリ内の記事 (3)
</ul>

「category.html」の内容

<div class="side-title">他のカテゴリ</div>
<ul>
<li>他のカテゴリ (1)
<li>他のカテゴリ (2)
<li>他のカテゴリ (3)
</ul>
ヘッダー部では、レイアウトするためにDIVタグで囲いましたが、ここではレイアウトするためのDIVタグをメインファイルに記載、記載内容を個別の外部ファイルで管理することで、更新しやすいようにしています。サイドバーに記載する内容が全ページで共通するものであれば、ヘッダー部分と同様に、レイアウトのためのDIVタグを含めて外部ファイルを作成しても構いません。

フッター部分
ここではコピーライトを表示させます。コピーライト表示に関するHTML表示を外部ファイル「footer.html」(ファイル名は任意です)にまとめます。
「footer.html」の内容

<div class="footer">
Copyright(c) 2005 サイトタイトル All Rights Reserved.
</div>
ここではフッターに記載する内容をコピーライトのみとしましたが、複数の内容を掲載したい場合、サイドバー部分の説明と同様にレイアウトのためのDIVタグをメインファイルに記載し、内容を個別に管理するのも良いでしょう。



SEOやユーザビリティーの向上に有効なCSSによるホームページレイアウトの解説サイト。
css.uka-p.com
利用料の安さとトラブルなしの安定運営が魅力のレンタルサーバー。当サイトもロリポップを利用。Movable Typeの設置はもちろん、SSI、CGI、PHP、.htaccessなどが利用できます。
lolipop.jp

アフィリエイトの基礎からサイト運営に関するノウハウまでを掲載した、アフィリエイト情報専門サイト。
www.affiliate-i.biz
総カウント数:008240 | 今日:36  | 昨日:55

Copyright 2005-2006 SSIでホームページらくらく更新術 All Rights Reserved. Since 2005.8.29. [PR]レンタルサーバー比較