3月 2021 - YURUBLOG

ページの数だけ必要になる、ヘッダー・フッター。項目によってはサイドメニューもそうですね。ヘッダーの内容が増えたり、フッターの内容が変更したり。その都度、全てのページに適用させるなんて面倒ですよね…！（Dreamweaverで置換。といった方法もありはしますが、ちゃんと置き換え場所を確認しないと思いもよらないところが変わってしまうので注意が必要です） 共通部分をテンプレ化して、更新を楽に！ まずindex.htmlから。 ==== index.html ====&lt;body&gt;&lt;script&gt;header();&lt;/script&gt; &lt;!-- ヘッダーjs --&gt;・・・・・・・・ページ内容・・・・&lt;script&gt;footer();&lt;/script&gt; &lt;!-- フッタjs --&gt; 続いて、各ヘッダー・フッターに飛ばすjs （url:' ' の中身は適宜変更してください） ==== tpl.js(名前はご自由に) ====//**************************************//ヘッダー//**************************************function header(){ $.ajax({ url: '/common/tpl/header.html', cache: false, async: false, dataType: 'html', success: function(html){ document.write(html); } });}//**************************************//フッター//**************************************function footer(){ $.ajax({ url: '/common/tpl/footer.html', cache: false, async: false, dataType: 'html', success: function(html){ document.write(html); } });} この時header,footerの場所をurlのところに記述するのですが、相対パスだと階層ごとにずれが生じて表示されなくなったりして、別名のheader,footerファイルを作る必要が出てくるのでドメイン名直下からの記述する、ルートパスがおすすめです。 最後に、共通化したいヘッダーとフッターその部分だけのhtmlを作成 今回の場合は、/common/tpl/の中に入れます。header,footer内のリンクもルート記述が必須です。 ==== header.html ====&lt;header class="header"&gt;～～～ヘッダー内容～～～&lt;/header&gt;==== footer.html ====&lt;footer class="footer"&gt;～～～フッター内容～～～&lt;/footer&gt; これだけ！！あとは変えたい内容が出たときheader.html,footer.htmlに打てば、&lt;script&gt;header();&lt;script&gt; , &lt;script&gt;footer();&lt;script&gt;が書かれた全てのページに反映されます。 ぜひ試してみてくださいーー！

2021年3月

利便性ばっちり。ヘッダー・フッターの共通化