WebデザインテクニックTwitterFacebookはてブPocketWordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編集する時、同じものをいちいち編集するのがすごく面倒というか時間が無駄というか。DreamWeaver等の機能を使ってもよいのですが、簡単なようで久しぶりに見るとどこをどうすればよいか把握に時間がかかったりするので、良い方法が何かあるはず。思って探していたところ、jQueryのみでシンプルにできる方法があった!のでその覚書を。その方法を使って文字化けが発生していたことに気づいてなかった(クロスブラウザチェックを怠っていた。)のでその対策方法も書いていきたいと思います。Footer等の共通で読み込むパーツを別のhtmlファイルとして作成し、それをjQueryで読み込む。共通で読み込みたいパーツ(Header、Footer等)を作成し、任意の場所におきます。あとで詳細は書きますが、ここで文字コードを記述すると文字化けする原因になるので、注意です。htmlの元のページにjQueryファイルと、共通パーツ(Header、Footer等)を読み込むための記述をタグ内に、以下のように埋め込みます。Footer等)を以下のように記述します。--></body>とりあえずはこれでOKです!!超簡単。これは最初に作るときにこのような作りにしちゃった方が、後々の事を考えたら絶対いいですよね。普通にUTF-8でページを作成されてる方はこれでおそらく問題ないと思うのですが、Shift_JIS等で作成されてる方は少し注意点があるので、以下も見てくださいね。文字コードの問題(楽天のECサイトにて)簡単にできたのはいいのですが、実は注意しないといけないのがエンコード(文字コード)の問題です。ま、普通にUTF-8で作成していれば問題ないのですが、楽天のECサイトのように『Shift_JIS』を使わないといけないようなサイトもあります。楽天のECサイトはエンコードが『Shift_JIS』なので、共通パーツもそうしないとダメだろう。思い、htmlタグを入れ、エンコードを『Shift_JIS』で作成していました。最初は大丈夫のように見えてたのですが、Firefoxのみで文字化けが起こってしまい、なかなか原因がわからず。いう状態に陥ってしまいました。原因は、楽天内だから、その共通パーツも『Shift_JIS』にしないといけない。読み込む元のhtmlページの文字コードは『Shif_JIS』なのに、読み込み先のページが、『UTF-8』で読み込まれるjQueryのファイルを必要とするファイルとなるため、楽天内だからといって、共通パーツも『Shift_JIS』で作るのはダメ。