アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

ヘッダやメニューなど共通部分を外部ファイルに - 基本編

イメージ

公開:

ブログやホームページのヘッダやメニューなど共通部分を外部ファイル1つにし、各ページから読み込む方法です。変更が1ファイルで済みメンテナンス性が向上します。

私の使っているサーバがPHPに対応してなく、新規ページを追加する度に全ファイルのメニュー部分をgrep(一括置換)で更新していました。それも悪くはないのですが、非効率でメンテナンス性に不満でした。色々試した結果…

jQueryで簡単にできました。

Ajaxによるものですが特別なことをしなければサーバーや通信の知識がなくてもjQueryの知識だけでできてしまいます。ただし、制約やデメリットもあります。それも含めて、既存のページを変更する例で書いていきます。

前準備

以下のHTMLファイルが出てきますのでお間違えなく。

contents1.html元のオリジナルコンテンツ、及び変更後
menu.html全ページ共通にするメニュー部分
contents2.htmlcontents1.htmlとは別のコンテンツ

contents1.htmlはよくあるような例として以下とします。

<h1>タイトル</h1>
<div id="navi">
<ul>
  <li>メニュー1</li>
  <li>メニュー2</li>
  <li>メニュー3</li>
  <li>メニュー4</li>
</ul>
</div>
<p>フッタ</p>

既存のファイルに直接行う場合、初めや慣れないうちはバックアップしておくといいでしょう。

(実際はファイル名など記事と違う点もありますが、根本はそのままです。)

変更作業

menu.htmlの新規作成

contents1.htmlulの部分のみを切り取り、新規ファイルにこれを貼ります。

<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>

<!DOCTYPE html> <html> <head> <title> <body>全てなしで、ただul部分のみの記述です。これをmenu.html の名前で、UTF-8で保存します。

contents1.htmlの変更、保存

contents1.htmlは2、3行目のように空divの状態になります。

<h1>タイトル</h1>
<div id="navi">
</div>
<p>フッタ</p>

<script src="jquery-x.x.x.min.js"></script>
<script>
$(function(){
  $('#navi').load('menu.html');
});
</script>

<head>内または</body>の手前に6~11行目を追加します。src=~は今までjQueryをお使いでしたらいつも通りでけっこうです。他のサーバのCDNでも、ご自分のサイトに用意したファイルでもけっこうです。フォルダやverは任意に変えてください。

これをcontents1.htmlとして上書き保存します。または安全に別のファイル名で保存してもいいですが、リンクは切れるので元の名前に後に戻します。

CSSファイルは変更しません。今までメニューを横並びにしてたらその今まで通りに表示されます。

ブラウザのJavaScriptは有効にしておきます。

サーバー上でテスト

contents1.htmlmenu.htmlをサーバーに転送します。contents1.htmlを表示させると今まで通りに表示されるはずです。初回だけはローカル内だけでなく必ずサーバー上でもテストしてください。

contents1.htmlを別名保存した場合は元の名前に変更します。

別コンテンツでの確認

contents2.htmlcontents1.htmlとほぼ同じですが、ボタンを押すとメニューが読み込まれるようにしてあります(このような使い方はしないでしょうが、ご参考までに)。読み込むファイルは先ほどcontents1.htmlで読み込んだのと同じmenu.htmlです。

<h1>タイトル</h1>
<div id="navi">
<button type="button" id="menu">メニュー読込</button>
</div>
<p>フッタ</p>

<script src="jquery-x.x.x.min.js"></script>
<script>
$(function(){
  $('#menu').click(function(){
    $('#navi').load('menu.html');
});
});
</script>

load()の仕様上、読み込まれる場所にあった要素は全て削除されます。ここでは#navi内のbutton要素が消えました。

実際の様子

コンテンツ2

基本編ここまでのまとめ

例えば新しいページを追加した場合、menu.htmlただ1つを変更するだけで済みます。contents1.htmlでもcontents2.htmlでも変更が反映されることになります。

基本編は以上ですが、実はこれでできない場合もあります。その対処や注意などを次の記事でご紹介します。