共通パーツ(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』で作成されているとわかったことはよかったのかな。と思います。そんなこと今まで考えたことすらありませんでしたので。ま、これはレアケースだと思いますが、とりあえず最初にこの対策をしていれば後々絶対楽なので、少々面倒でも今後はこの方法で作成したいと思います!



関連記事

サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)


現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…

記事を読む▷


GoToTopBG_animation2のgif画像

CSSスプライトで、スムーズに画像を切り替える


マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくる…

記事を読む▷


2017最新版:SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


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


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

記事を読む▷


resolution-list_00

2018最新版:スマホ・タブレットの解像度一覧表(画面サイズの割合)


最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…

記事を読む▷


backgroundプロパティの正しいショートハンドの書き方


ABCから始めよう!と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた "?" の解決法で、今…

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


SyntaxHighlighter Evolved のサムネイル

WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法


よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …

記事を読む▷


WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる


この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…

記事を読む▷


サーバー移転の手順 その2:データベースの移行(phpMyAdminを使って)


前回サーバ移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)からの続きです! って…

記事を読む▷


Message

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

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

PAGE TOP