メニューやフッターのパーツ化

讌ｽ縺励※遞ｼ縺撰ｼ� 繝阪ャ繝亥憶蜿主� > 讌ｽ縺励※遞ｼ縺�(繝帙�繝�繝壹�繧ｸ邱ｨ)

このページではメニューやフッターなどの部分をパーツ化し、それを取り込む方法をご紹介します。

メニューやフッター、スタイルシートをパーツ化する方法は？

メニューやフッターのパーツ化はこれらを表示するためのHTMLをページから切り取って、別ファイルに保存するだけです。

次に、実際の方法を説明します。

メニュー、フッターのパーツ化と取り込み方法詳細

はじめにお断りしときますが、メニューやフッターをパーツ化した後それを取り込むときに、SSIやPHPなどのファイル読み込み機能を利用をしますので、SSIかPHPを利用できないサーバーではメニューやフッターをパーツ化してもそれを取り込むことができません。

CGIでもできるかもしれませんが、CGIよりもPHPだと簡単な記述でページに表示できますので最近ではCGIをほとんど利用していなく、CGIで取り込む方法を調べていません。m(..)m

なので、SSIかPHPを使用できないサーバーをご利用の方はCGIでの取り込み方法をお調べいただくか、これらが利用できるサーバーに引越しする必要があります。^-^;

ただ、SSIやPHPを使用できる無料サーバーはやはり人気があるのですでに募集を打ち切ってるところが大半です。それでも楽するためにSSIやPHPを使用したいということでしたら、これを機に有料サーバーを借りてもいいかもしれません。ちなみにこのWebサイトは有料サーバーを借りて運営しています。料金は2400円/年　ですから意外と安いですよね？。^-^

前置きが長くなりましたが、ここから本題に入らせていただきます。

メニューもフッターもパーツ化してそれを取り込む方法は同じです。そのため、ここではフッターをパーツ化して取り込む方法をご紹介します。

フッターをパーツ化する方法

①フッター部分も含めて普通にページを１つ作成します。
②作成したページのファイル名の拡張子を.shtmlか.phpに変更します。(SSIで取り込む場合は.shtml、phpで取り込む場合は.php　例:index.shtml、index.php)
③ページからフッター部分のHTML文を切り取って別ファイル(footer.htmlなど)に保存します。
footer.htmlはトップページのファイルと同じフォルダに保存してください。

※このホームページではphpを利用してフッターを取り込んでいますが、どのページのファイルも拡張子が.phpではありません。これは、.htaccessというファイルに

AddType application/x-httpd-php .php .html

という行を追加してhtmlファイルでもphpが動作するようにしているためです。

パーツ化したフッターを取り込む方法

SSIを利用する場合

フッターをパーツ化する方法の手順③で切り取った部分に以下のいずれかの記述をします。どちらかの方法で成功するはずです。。。

※「ユーザー名」の部分にはあなたのホームページのトップページを開く場合に入力する文字を入力します。たとえば、あなたのホームページのトップページに http://aa.bb.com/~test/ やhttp:/test.aa.bb.com/　でアクセスできる場合は、
 と指定します。

shtmlファイルにブラウザからアクセスしてフッターが表示されたら成功です。^-^

PHPを利用する場合

フッターをパーツ化する方法の手順③で切り取った部分に以下の記述をします。

<?php include("階層/footer.html");?>

※「階層」の部分にはfooter.htmlファイルまでの階層を記述します。たとえば、フォルダの構造が以下のようになっている場合は、<?php include("./footer.html");?> です。

-index.php　　　←このファイルにフッターを表示したい。
∟footer.html 　←フッター部分を記述したhtmlファイル

このような構造になっている場合は、<?php include("../../footer.html");?> となります。

-index.php
∟footer.html　←フッター部分を記述したhtmlファイル
∟folder1 　　　←フォルダー
　　　∟folder2　　　←フォルダー
　　　　　　∟sample.php　　　←このファイルにフッターを表示したい。

phpファイルにブラウザからアクセスしてフッターが表示されたら成功です。^-^

このようにすると、footer.htmlの内容を変更した場合に、このファイルを取り込んでいるすべてのページのフッター部分で変更後の内容が表示されます。

footer.htmlだけを変更すればいいので、１つ１つファイルを開いて修正するよりもずっと楽ですよね？＾-^

次は、スタイルシートのパーツ化へ