福井県のweb制作は有限会社ハートブレーン
15.05.18

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

【ハートブレーン】https://heartbrain.net
最後までご覧いただき、ありがとうございました。
よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。


Webサイト・CGIランキング

メールでのお問合せ・お見積りはコチラ
TOP