ホームページ作成 小技


  


複数のホームページにあるサイドバーを一度に変更したい。

@はじめに


ホームページを複数作成していると、どのサイトにも共通する部分が出てくると思います。

特に見出し部分やサイドバー等が多いかと。


そして、共通部分を変更した場合、全てのホームページへ変更を反映させる必要があり、
コピー&ペーストを繰り返す作業が発生してしまいます。


管理しているホームページの数が少なければよいのですが、多くなればなるほど、不毛な作業に
多くの時間を費やす事になってしまい、非常に時間の無駄が発生します。


これを解決する為に、1つのファイルを変更すれば、全てのホームページに反映させる方法を
ご紹介していきます。


技術的な方法は幾つかありますが、一番敷居が低い(コーディング的にも、サーバーの設定的にも)
SSi ( Server Side Include ) という技術を利用していきます。



A考え方


共通部分の html文だけを別ファイルとして用意をし、本文のある html から共通部分の html を呼びだす というもの。
複数あるホームページにて、このように設定しておくと、共通部分の html ファイルだけ変更すれば、呼び出し側の
本文のある html ファイルは何もしなくても、一度に共通部分が変更されます。

B共通部分の htmlファイルの作成


では、具体的にコーディングをしていきましょう。
私の場合は、左サイドバーにある各種リンクを共通ファイルとして作成しました。

ちなみに、外部CSSの設定も含んでいます。


-------------------------------------------------------------------------------------------------
<div class="aside side1">
 <h3>初心者のHP作成</h3>
 <ul>
  <li><a href="http://oimocyan.com/hp/1.html">やりたいこと</a></li>
  <li><a href="http://oimocyan.com/hp/2.html">作成ツール</a></li>
  <li><a href="http://oimocyan.com/hp/3.html">サーバー</a></li>
  <li><a href="http://oimocyan.com/hp/4.html">ドメイン</a></li>
  <li><a href="http://oimocyan.com/hp/5.html">ドメイン登録</a></li>
  <li><a href="http://oimocyan.com/app/SeaMonkey.html">SeaMonkeyの<br>インス トールと設定</a></li>
 </ul>
 <br>
 <h3>Macs操作</h3>
 <ul>
  <li><a href="http://oimocyan.com/mac/appkirikae.html">アプリ切替</a>< /li>
  <li><a href="http://oimocyan.com/mac/gamencap.html">画面キャプチャ</a>< /li>
 </ul>
 <br>
 <h3>CSS</h3>
 <ul>
  <li><a href="http://oimocyan.com/css/backgroundcolor.html">背景色 (background-color)</a></li>
  <li><a href="http://oimocyan.com/css/csscontent.html">CSSが効かない!</a>& amp; amp; amp; amp; amp; amp; amp; amp; lt;/li>
 </ul>
 <br>
</div>
-------------------------------------------------------------------------------------------------


こんな感じで、 ”side1.html” という名前で保存します。



C共通ファイルの読み込み


本文のファイルにて、共通部分を読み込みたい箇所へ、 ” <!--#INCLUDE FILE="side1.html"--> ”
という記述を追加します。


共通部分について、本文のファイルに既に記述している場合は、その部分を削除しましょう。
上記の共通部分の読み込みと合わせて、2重にコーディングしている事になってしまう為です。

D拡張子の変更


仕上げに、本文が書いているファイルの拡張子を、 html から、 shtml へと変更しましょう。
これは、上記Cにて追加した  ” <!--#INCLUDE FILE="side1.html"--> ” を認識させる為に必要です。

E最後に


本文の書いている、shtml ファイルと、共通部分の html ファイルとを、サーバーの同じ場所にアップロード
しましょう。
本文の shtml ファイルを、インターネットブラウザを使って指定すると、正しく読み込まれている事が確認できます。

上位フォルダに共通部分 の html ファイルを置く場合はこちらを参照して下さい。