共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策

LINEで送る
Pocket

WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編集する時、同じものをいちいち編集するのがすごく面倒というか時間が無駄というか。。DreamWeaver等の機能を使ってもよいのですが、簡単なようで久しぶりに見るとどこをどうすればよいか把握に時間がかかったりするので、良い方法が何かあるはず。と思って探していたところ、jQueryのみでシンプルにできる方法があった!のでその覚書を。そしてその方法を使って文字化けが発生していたことに気づいてなかった(クロスブラウザチェックを怠っていた。。)のでその対策方法も書いていきたいと思います。

jQueryを使って、共通パーツを読み込む方法

まずは共通パーツを読み込む方法を簡単に説明すると、普通にhtmlでページを作成したページから、Header, Footer等の共通で読み込むパーツを別のhtmlファイルとして作成し、それをjQueryで読み込む。といった方法です。

そんなわけで、htmlのページが作成されているのを前提に、

1. 共通で読み込みたいパーツ(Header、Footer等)を作成し、任意の場所におきます。

以下はサンプルです。

<!--ここから共通<header>-->
<a href="パス">ロゴとかタイトルとか</a>
<ul>
  <li><a href="パス">メニューとか</a></li>
  <li><a href="パス">メニューとか</a></li>
  <li><a href="パス">メニューとか</a></li>
</ul>
<!--ここまで共通</header>-->

htmlやbodyダグなどは不要です! あとで詳細は書きますが、ここで文字コードを記述すると文字化けする原因になるので、注意です。

2. htmlの元のページにjQueryファイルと、共通パーツ(Header、Footer等)を読み込むための記述をタグ内に、以下のように埋め込みます。

<head>
  <script src="js/jquery.min.js jQueryのパス"></script>
  <script>
    $(function() {
      $("#header01").load("読み込むheaderのhtmlファイルのパス/header01.html");
      $("#footer01").load("読み込むfooterのhtmlファイルのパス/footer01.html");
    });
  </script>
</head>

3. タグ内に、共通で読み込みたいパーツ(Header, Footer等)を以下のように記述します。

<body>
  <div id="wrapper">
    <header id="header01">ここにheader01.htmlの内容が入る</header>

    〜〜

    <footer id="footer01">ここにfooter01.htmlの内容が入る</footer>
  </div><!-- /#wrapper -->
</body>

とりあえずはこれでOKです!!

超簡単。これでそのパーツだけ修正すれば、全ページでHeader, Footer等が自動的に置き換わってくれちゃいます!! もうこれは最初に作るときにこのような作りにしちゃった方が、後々の事を考えたら絶対いいですよね。

ただ、普通にUTF-8でページを作成されてる方はこれでおそらく問題ないと思うのですが、Shift_JIS等で作成されてる方は少し注意点があるので、以下も見てくださいね。

注意点

1. 文字コードの問題(楽天のECサイトにて)

簡単にできたのはいいのですが、実は注意しないといけないのがエンコード(文字コード)の問題です。ま、普通にUTF-8で作成していれば問題ないのですが、楽天のECサイトのように『Shift_JIS』を使わないといけないようなサイトもあります。
楽天のECサイトはエンコードが『Shift_JIS』なので、共通パーツもそうしないとダメだろう。と思い、htmlタグを入れ、エンコードを『Shift_JIS』で作成していました。最初は大丈夫のように見えてたのですが、Firefoxのみで文字化けが起こってしまい、なかなか原因がわからず。。という状態に陥ってしまいました。(2017/8時点:Mac[OS10.11.6, FF ver.54.0.1]、Windows[10, FF ver.54.0.1] 両方)

原因

原因は、楽天内だから、その共通パーツも『Shift_JIS』にしないといけない。と思い、共通パーツを『Shift_JIS』で作成したこと でした。読み込む元のhtmlページの文字コードは『Shif_JIS』なのに、読み込み先のページが、『UTF-8』で読み込まれるjQueryのファイルを必要とするファイルとなるため、楽天内だからといって、共通パーツも『Shift_JIS』で作るのはダメ。ってことなんですね。
要は共通パーツは『UTF-8』にしないと文字化けする! ということです。ですので、わざわざhtmlタグをいれてhtmlファイルとしなくてもOKだったわけです。
今回はFirefoxのみでの現象だったのですが、とりあえず共通パーツは『UTF-8』ということを忘れないようにした方がよさそうです。

2. jsファイルの問題(2018/1/16追加)

今回、たまたまページ内リンクを埋め込んだ共通パーツを作ったのですが、その共通パーツ内からのページ内リンクに、通常はスムーススクロールが効くはずのところ、効かなくなっている事に気づきました。
かなり悪戦苦闘の末わかったことなのですが、大元のhtmlに記述しているjsファイルは読み込まれない!んですね。吐き出されるソースには、一つのhtmlとして確認できるのですが、共通パーツ内は、あくまで『共通パーツ』として完結された状態で、大元のhtmlに読み込まれるようですね。

ですので、共通パーツ内でもスムーススクロール等、大元のhtmlで使用しているjsの機能を使いたい場合は、共通パーツ内の最初に、必要なjsファイルを記述する必要があります。

これはちょっと盲点でした。。

まとめ

まさか Firefoxだけで文字化けが起こるなんて思ってなかったので少々はまってしまったのですが、このお陰でjQueryが『UTF-8』で作成されているとわかったことはよかったのかな。と思います。そんなこと今まで考えたことすらありませんでしたので。ま、これはレアケースだと思いますが、とりあえず最初にこの対策をしていれば後々絶対楽なので、少々面倒でも今後はこの方法で作成したいと思います!



関連記事

日付を自動更新で表示させる! 簡単コピペ!!


先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか?』という依頼がありました。 とって…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


URLwwwありなし

URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)


前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


サーバー移転の手順 その3:移転後のトラブル


前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


onMouseOver、onMouseOutで、簡単にテキストを切り替える!


前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。 実はこちらサイト…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


『WinSCP』をMacで使えるようにする方法!!


FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…

記事を読む▷


WP Social Bookmarking Lightを好きな場所に設置、移動する方法


WP Social Bookmarking Lightを好きな場所に設置、移動する方法です。 以前、自分で管理している…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

PAGE TOP