共通パーツ(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等で作成されてる方は少し注意点があるので、以下も見てくださいね。

注意点:文字コードの問題(楽天の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』ということを忘れないようにした方がよさそうです。

まとめ

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



関連記事

opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


Thumbnail_Icon_firefox_bug

Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法


Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…

記事を読む▷


RSSフィードを設置してすぐにエラーが…


恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


アイキャッチ_RSSImport

WordPress:プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法


前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外(勿論自分のものもOK!)の気…

記事を読む▷


Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法


せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…

記事を読む▷


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


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

記事を読む▷


OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


Message

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

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

Error: Feed has an error or is not valid

PAGE TOP