jQuery WEB制作 Interenet

HTML共通部分を部品化して読み込ませる方法

投稿日:2017年1月19日 更新日:

HTML5CSS3.gifJQuery_logo
今回はHTMLでサイトを作って欲しいとの要望。
ナビやヘッダー、フッター部分は全ページ共通なので、修正や後々のメンテナンスも考えて、それらを部品化して1箇所で管理したい。

HTMLには、他のページを読み込む方法が用意されていないとのこと。
そこで、色々調べてみたら、

  • iframを使う←不具合がでる場合があるのでパス。
  • SSIを使う←サーバーの設定に依存する。今回はどんなサーバーになるのかまだわからないのでパス。
  • PHPを使う←ページのURLが「〜.php」となってしまうのでボツ。「〜.html」にしたいので。。。
  • JavaScriptを使う←今回はこれに決定!
  • テンプレートエンジンを使う←導入が難しそうなのでギブアップ。

検討した結果、
スマホでもよく使われるようになって
かなり一般化してきた「JavaScript」を使う方法にしました。

まずはじめに、ナビゲーションを部品化から。
ここでの条件は、現在いるページに対応するボタンをアクティブにしたい。 

公開してくださっているコードをいろいろ試した結果、
下記のサイトで公開しているコードを使用しました。
サンプルも丁寧な解説もあります。
ノンプログラマーにはとってもありがたい限りです。

【サンプル付】外部化したヘッダー・グロナビの現在位置をアクティブにするテクニック【自動化】 

構築中のサイトに早速取り入れてっと。
うん、うん、いい感じで動きます。
これで、修正がきても、ナビのHTMLファイル1カ所 だけの修正で済みます。

続いて、ヘッダーとフッターも共通部品なので、元のindex.htmlから抜き出すことに。。。
HTML Parts

先ほどのコードに続けて、同じようにパーツ化したheader.htmlやfooter.htmlを追記してっと。。。。

あれ?
???
読み込んでくれません(汗)

そこで、再びコードをググっては試し、ググっては試しを繰り返し。。。
思ったような動きになったのはこれだけでした。

【jQuery】htmlページをパーツごとに分けて読み込む方法

HTML側には、idをふっておくだけ。

 

<div id="haader"></div>
<div id="footer"></div>

Js側には下記のコードを先頭に追記して、部品を紐付けるだけ。
読ませる順番が違ってくると先に設定したナビのアクティブ化が動かなくなるので注意!

$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});

 

やったーーー!!

これで、うまくいきました。
ヘッダーやフッター以外にも部品化して読ませることが出来ますよ!

気をつけるのは、部品化したhtmlファイルのリンク。
読み込んだページからみたパスの記述をしておくこと。
部品化したファイルの保存階層からのディレクトリではないので気をつけてください。 

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-jQuery, WEB制作, Interenet

執筆者:

関連記事

超簡単!オリジナルのSVGアイコンの作り方

SVGファイルから簡単にアイコンフォントが作れるサービス、「IconMoon」は超有名ですね。 時々使っているのですが、書き出しから実装まで、いざとなると「あれ?どうだっけ。。。」って忘れてしまうこと …

no image

WordPressのSEO対策 まとめ

WordPressはSEOに強いといわれていますが、 何もしないでいるのと最適化するのと違いがあるのが試してみた。 サイト開設からSEO対策は全くやっていないWordpressで作ったサイトで実験スタ …

no image

WordPress レンタルサーバーからローカルへコピー 備忘メモ

<準備> (1)レンタルサーバーから運用中のWordpressをそっくりそのままダウンロードする。 (2)レンタルサーバーのphpMyAdminを使ってデータベースをエクスポートする。(SQL形式) …

パソコンのカメラをOFFにして、iPhoneをWEBカメラにする方法|EpocCam

新型コロナウィルスの影響でオンラインミーティングの機会が増えました。ところが、カメラの位置がイマイチよろしくない。モニターのカメラだと位置が上すぎるし、ノートパソコンだと斜めに向いていいるし。。。  …

WordPress★投稿記事の並び順を入れ替えるプラグイン

WordPressでは投稿記事はデフォルトで投稿日時の降順ソートで順番で表示されるようになっています。ですので、上に表示させたい記事は、編集画面から公開日時を修正すれば可能です。 でも、いちいち編集画 …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。