Blog スタッフブログ

SSI WEB制作

[SSI].htaccesファイルで共通部品を作成して読み込む

WEB制作担当のKです。

WordPressやMovable TypeなどのCMSにはヘッダーなどの共通部分を簡単に作成する機能が備わっていますが、htmlだけでは共通部分を作ることはできません。

それでもCMSを使わない静的htmlでも共通化したい場面はたくさんあります。

例えば数十ページを超えるWebサイトなどです。

1ファイルずつ編集していくのは、非常に手間がかかります。

そんな時の便利な共通ファイルを作る方法をご紹介します。

手順

1.ホームのindex.htmlと同じ階層に.htaccessファイルを作成します。

テキストが編集できれば何でもいいので、空の.htaccessファイルを作成します。

保存時に.txtなどの拡張子が付く場合は保存後に.txtを削除します。

既にある場合は作成する必要はありません。

2.SSIを使うためのサーバー設定

.htaccessを開いて以下の内容を記述します。

Options +Includes

これにはサーバーにファイルをSSI ディレクティブで解析するようにする意味があります。

その下に以下の内容を記述します。

AddHandler server-parsed .shtml

これには拡張子が.shtmlのファイルをSSIで読み込むことを可能にする意味があります。

3.共通化させる内容を.shtmlで作成

以下のようなhtmlがあり、header部分を共通化させたい場合

<html>
	<head>
		<title>サイト名</title>
	</head>
	<body>
		<header>
			<nav>
				ここにヘッダーの内容を記述
			</nav>
		</header>
		<section>
			コンテンツ
		</section>
	</body>
</html>

共通化したい部分のみを抜き取ったshtmlファイルを作成します。

ここではheader.shtmlとします。

<header>
	<nav>
		ここにヘッダーの内容を記述
	</nav>
</header>

.shtmlの保存先は.htaccessと同じもしくは下のディレクトリであればどこでも大丈夫です。

3.SSIの読み込みコードに書き換え

header.shtmlを読みこませたい箇所を書き換えます。

<html>
	<head>
		<title>サイト名</title>
	</head>
	<body>
		<!--#include virtual="header.shtml"-->
		<section>
			コンテンツ
		</section>
	</body>
</html>

ここまででSSIで読み込む一連の作業は完了です。

SSIが正常に読み込めていれば<!–から–>までがshtml内の内容に置き換わります。

戻る一覧へ戻る