記事の詳細

例えばコーポレートサイトのコーディングを行う際、ヘッダーやフッターなど使いまわしの部分が多くなり、ちょこっと変更したら全ページ反映させないといけなかったりするのは非常に手間ですよね。

そこで皆さんはヘッダーやサイドバー、フッターなどをパーツごとに管理し一括で変更できるような仕組みを施工していくと思いますが、今回はその仕組み(インクルード)の方法をいくつかご説明しようかと思います。

SSI(サーバーサイドインクルード)でインクルードさせる方法

このSSIというのは使用しているサーバーがSSI をサポートしており、SSIを許可する設定が行われている必要があります。昨今では使用できるレンタルサーバーも増えてまいりました。
設置方法としてはまずhtaccessに下記を追記します。

これだとshtmlだけしか使用できないのでhtmlを使えるようにするには
以下に変更

あとは、インクルードするパーツごとの(html)を作り、インクルードさせたいhtmlファイルに以下を追記するだけです。

とても簡単ですが、コーディング途中ではプレヴューが困難なので、注意が必要です。
※dreamweaver内であればプレヴューできます。

JQUERYでインクルードさせる方法

JQUERYをお使いの方は多いのではないでしょうか、こちらも導入は非常に簡単ですしローカル上でもプレビューができます。方法としましては

“demoという箇所にheader.htmlを表示させる”という指定になっています。
このソースをコピペすると動作思うのでお試しください。

htmlファイルにPHPでインクルードさせる方法

これはけっこう有名で昔からあるので割愛させていただきますが、
htaccessに下記を追記し、

次にインクルードさせたい箇所に

させればOKです。

Dreamweaverのテンプレート機能でインクルードさせる方法

方法としては大枠のヘッダー、フッター、サイドバーのみのテンプレートhtmlを作り、メインカラムのような編集可能領域を指定するだけです。
例えば

こんな感じですね。複数のIf条件で出力切り分けもできるので自由度はけっこう高いです。
Dreamweaverの機能説明になるので詳しくは公式のガイドラインを参照してください。
個人的にはDreamweaverが必要になるので、大きなプロジェクト規模で導入するのはおすすめしません。。

HTMLインクルード方法のまとめ

以上4つ紹介させていただきましたが、いかがでしたでしょうか
今回ご紹介したもの以外にも使用するフレームワークや構築環境によりインクルード方法は様々ですが、この4つは小中規模サイトだったら簡単で比較的導入しやすいかなと思います。

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AIMERS CREATEとは

AIMERS CREATEは、東京都と福岡県うきは市を中心にホームページ制作・Webデザインを行っております。 お見積もりや運営などご不明な点がありましたら、お気軽にお問い合わせメールフォームからお申込下さい。迅速に対応します。 お問い合わせをいただきましたら、電話かメールにてご連絡を致します。 AIMERS CREATEをもっと詳しく

おすすめ記事

登録されている記事はございません。

ページ上部へ戻る