スポンサーリンク

各ページのメニューを一括変更する

この記事は約3分で読めます。

サーバ管理って難しい(7)
Menu

こんにちは、さち です。

今回は、ホームページを作成したなどに各ページで共通する部分である
「ナビゲーションメニュー」「ヘッダー」「フッター」などを
一括で管理する方法について書いてみようと思います。

私の覚え書きとしての兼ね合いもある記事ですが
同じことで困っている方に少しでも参考になれば嬉しいです。

では、さっそく見ていきます!

スポンサーリンク

SSIを使う

SSI は「Server Side Include」の略で
HTMLファイルの中に"特殊なコメント"を記述することで
サーバ側でその指示にしたがった処理をしその結果を出力します。

特殊なコメントというのは実際にこのような感じです。

例) <!--#include file="sample.html"-->

上の例では記述では
このコメントを書いた部分を「sample.html」の内容に置き換えるという指示です。

これをナビゲーションメニューの部分などに使えば
1つの HTMLファイル を書き換えるだけで
すべてのページのナビゲーションメニューが書き換えられるので管理が非常に簡単になります。

ただし、SSI を使うためには使用しているサーバが SSI に対応している必要があります。
XAMPP でも SSI を使えるのでローカルで動作を確認することもできます。

   → Apache で SSI の設定Linuxで自宅サーバ様)

拡張子は「shtml」

SSI を利用した場合はそのファイルの拡張子を「shtml」にする必要があります。

拡張子が「shtml」になっても
特殊なコメントの部分以外は基本的にはHTMLの記述と全く変わりません。
別途 PHP や JavaScript などのプログラミング言語を覚える必要がないので
非常に簡単に使うことができます。

「.htaccess」で別途設定をすれば
拡張子が「html」のファイルに SSI を記述しても機能するようにできますが
パフォーマンス や セキュリティ の面からあまり好ましくないようです。

他にも便利なコマンドが

私は今のところ「include」のコマンド以外は使う予定はありませんが
他にも便利なコマンドが用意されています。

こちらのページで分かりやすく紹介されていますので
興味がある方は読んでみることをおすすめします。

   → とほほのSSI入門とほほのWWW入門様)

UTF-8 で include を使う場合には注意!

機種依存文字を考えるとUTF-8は非常に便利なのですが
文字コードが UTF-8 で include を使用すると
ページの上側に1行分の隙間ができてしまう症状が出ます。

BOM(Byte Order Mark)というものが関係しているようなのですが
私もこの問題にハマってしまい30分くらい格闘していました…。
UTF-8 でページを作成しようと思っている人は気を付けて下さい。

こちらのページに解決方法が紹介されています。

   → UTF-8でinclude使用時に上部に隙間ができる時の解決法ミトミトブログ様)

この記事を作成するのに下記サイト様を参考にさせて頂きました、ありがとうございます。

   → とほほのSSI入門とほほのWWW入門様)
   → SSI入門初心者のためのホームページ作り様)
   → Apache で SSI の設定Linuxで自宅サーバ様)
   → UTF-8でinclude使用時に上部に隙間ができる時の解決法ミトミトブログ様)


<< 前へ | サーバ管理って難しい(7) | 次へ(次回未定) >>
サーバ管理って難しいTOPへ

コメント

タイトルとURLをコピーしました