HTMLのみのサイトをリニューアルする際にヘッダーやサイドバーを共通させたい時

サイトを作る時に、まずどうしようかと思うのが、ヘッダーやサイドバー、フッターなどの全ページ共通項目です。
CMSなどでは最初から共通なのですが、HTMLだとそうはいきません。
昔はフレームという手が使えましたが、今やSEOにおけるマイナス要因だとまで言われているのが現状。
知識が足りない（控えめな表現）Nの知るところでは、まだまだ打つ手は少ないように思います。

更新するのが面倒！サイトの共通部分を簡単に作る様々な方法（WEB Drawer様　より）

こちらによると

・Dreamweaverのテンプレート機能を使う
・JavaScriptを使う
・PHPを使う
・SSIを使う
・Node.jsやRubyのツールを使う

という5つの選択肢があるようです。

今回私がしたかったのは、ロリポップで既存サイト（Dreamweaver制作）のリニューアルです。
当然最有力候補となるのが、引き続きDreamweaverを使うことです。
もちろん最初は私もその線で進めていきました。

しかし、思わぬ落とし穴がありました。

今回はHTML5を用いてみたのですが、HTML5での推奨コードはUTF-8です。
なので

[code]<meta charset="UTF-8">[/code]

とヘッダー部分に入力しました。
Dreamweaverでの文字コード設定もUTF-8に変更済みです。

なのに、何故か勝手に、Shift_jisに変換されます。

テキストエディタで開くと、日本語で入力した部分が、全て文字化けしています。
新たにファイルを作り直してみても、結果は同じです。
もし使い続けるとしたら、一旦Dreamweaverで保存した後、テキストエディタで全てのファイルの文字コードを修正して、上書き保存する必要があります。

面倒だし怖すぎるので、他の手を使うことにしました。

どうやらタグの書き方が全て変更になるらしいのと、難しすぎて私が理解できないという、やむを得ない事情により、ツールはなし。

Javascriptも、SEO対策をしていく上で、検索エンジンがjsファイルまで読み込んでくれるかどうかが分からないので、今回はなし。

じゃあやっぱりPHPかな……と

共通部分のインクルード（初心者でもできるホームページ制作＆SEO様　より）

こちらを参考にして、ヘッダー部分をhead.html、サイドバー部分をside.htmlにまとめます。
head.html、side.html、どちらにもhtmlタグやbodyタグなどは必要ありません。
抜き出したい部分のみをコピーして貼り付ければOKです。

そして挿入したい場所に

[php]<?php include(‘head.html’); ?>[/php]

と入力します。
あとはindexファイルと同じ階層の.htaccessに

[sourcecode language=”plain”]AddType application/x-httpd-php .htm .html[/sourcecode]

と入力して、終わり

と思ったら、動作しませんでした。
あれ？と思ったのですが

拡張子.htmlでphpを動かす。ロリポップサーバー最新情報（Aveit.様　より）

こちらによると、ロリポップでの.htaccessの書き方は、少し違うようです。

[code]AddHandler php5.3-script .htm .html[/code]

これで解決しました。（独自ドメインの場合）
PHPのバージョンを入力する必要があるようです。

でも、ロリポップってPHPのバージョンを順次アップしていってくれていた気が……。
その度に.htaccess書き換えるのは面倒かも。

そう思い、SSIにしてみました。
挿入したい場所に

[code]<!–#include virtual="/head.html" –>[/code]

.htaccessに

[code]
Options +Includes
AddHandler server-parsed htm
AddHandler server-parsed html
AddHandler server-parsed shtml
[/code]

と入力しましたが、読み込んでくれません。
あれ？と思い、ロリポップのwebサイトで仕様を確認してみたら、「よくある質問集」に

shtml……。

結局唯一実行できたPHPにしました。

テンプレートエンジンの導入方法を勉強する、という課題ができました。
毎日学習できる素晴らしい環境に感謝します。（そして無知に対する批判の目をかわします）

【ハートブレーン】https://blog.heart-kokoro.net