全ページ共通のメニューを作ってみよう！ の巻

以前からサイト作成のときに非常に困ってた（というか面倒くさかった）作業に　メニューの更新というのがありました。わかさとでも画面の右の方にナビゲーターメニューが表示されていますね。
私のように　あれもこれもサイトに載せたい人などは　コンテンツの数が増えすぎてHTMLファイルの数は結構膨大になってきます。でも　メニューは全てのページに同じものを表示したいですよね。メニューを一つ増やすとか　ファイル名を変えるとかすると　全てのページのメニューを書き換えなければならない！！これがものすっごく面倒なんです。
書き換えたら全て正しいかどうかチェックしなきゃいけないし　転送するファイルもめちゃめちゃ多いし　こんがらがって泣きそうです。(@_@；)

この「メニュー問題」を解決するために　多くの方はフレームを使うことを選択されているのではないかと思います。事実私もそうでした。しかし　フレームはSEO（検索エンジン対策）の面で　あまり良くないと　一般的に言われています。
確かに　以前のわかさとでもフレームを使って　サイト構築していたのですが　トップページではない「実録！体験記」のあるページがよく検索エンジンに引っかかるようで　そのページへの直接アクセスが結構ありました。しかし　検索結果からそのページにアクセスした場合　本来トップページからアクセスすれば表示されるはずのメニューが表示されません。
わかさと内の他のページには　アクセスされないままです。メニューさえ表示されていれば他のページも見てもらえたかもしれません。現にベルアイル装備データベースを見に来られた方でも　横にメニューがあるから　このコンテンツを見てくださってる方もいらっしゃるかと思います。（もっと面白いコンテンツをご用意しなければいけませんね。頑張れ＞私）
これが一般的にフレームはSEO的に良くない　と言われる原因の一つです。何とかならないかしらん･･･

これは　わかさとでは以下のように実装しています。まずメニュー部分だけのHTMLファイルを作成します。以下のソースをルートディレクトリに「menu.html」として保存しました。

あとはメニューを表示したいHTMLファイルの表示したい箇所に次の一文を書くだけです♪

単純に　このinsertタグを書いたところに　該当するファイルの中身がそのまま出力されると思ってください。src='/menu.html'の/（スラッシュ）は　ルートディレクトリを指しています。このファイルへのパスは相対パスでも構いません。（src='../menu.html'とか）
これで　メニューに新しいコンテンツを追加するときには　menu.htmlを編集するだけです！フレームなんか要りません。
このinsertタグは　使い出すと結構便利で　私は　これを利用してメニューだけでなくHTMLヘッダタグもまとめています。CSSファイルやJavaScriptの共通ファイルなど　ヘッダ部分は結構共通する記述が多いので　複数ファイルに同じ記述をしなければならない場合は　まとめられて便利です。修正時の漏れなどもなくなりますし。

前回の[サイトトップのお知らせ]テストページのHTMLソースを　ご覧になられた方はヘッダ部分とメニュー部分にこのinsertの記述があることに気づかれたかもしれません。一応insertファイルも含めてHTML全文を公開しておきます。
テストページのHTMLヘッダのHTMLメニューのHTML（※注　このinsertタグはホムペネットのレンタルサーバーでしか動作しません　ご了承ください。）

次回は　今回使用したヘッダファイルを元にブラウザによって使うCSSファイルをわける方法をご説明します。