SSIでレイアウトが崩れる？

SSI超初心者です。よろしくお願いします。

HPのメンテが大変になってきたため、共通部分のヘッダー・メニュー・フッターを外部ファイル化してSSIのインクルード文で読み込もうとしています。正常表示されていた元のHTMLファイルからカット・ペーストで外部ファイルを作成し、元部分にはインクルード文を挿入したうえでSHTMLファイルとして保存しました。
一応これでそれなりの表示にはなるのですが、微妙（10～20pxほど）にレイアウトがあちこち崩れて困っています。

とくにHTMLページからSHTMLページにリンクで行くと、全体が20pxほど下にずれているため、「がたっ！」が明白です。HTMLページからHTMLページへの移動ではそれは起こりません。

原因と対処方法が分かる方がいらしたら教えてください。超初心者なので、見当違いの質問でしたらごめんなさい。

No.2 ベストアンサー 回答者： masaota56 回答日時： 2008/09/20 09:03

比較ソフトはバイナリでの比較ですよね？

[・ソ]の部分にゴミデータが入ってしまっていますね。

おそらく外部ファイルの文字コードはUnicode(UTF-8とか)ではないでしょうか。
もしそうなら、BOM有り(UTF-8)とBOM無し(UTF-8N)の２通りで試してみてください。おそらくBOM無しで上手くいくと思います。

BOMの有り無しを変換できるソフトは、例えばTeraPadなどがありますが、探せば他にもあるかもしれません。

TeraPadダウンロードページ
http://www5f.biglobe.ne.jp/~t-susumu/library/tpa …

変換方法
http://sakaguch.com/utf1.html

この回答へのお礼

アドバイスありがとうございます。
比較ソフトは『DF』というもので、おっしゃる通り「バイナリ解析」と書いてあります。いままでエディタはメモ帳を使い、普通にそのまま保存していました。

教えていただいたTeraPadを早速ダウンロードして見てみると、今の状態は UTF-8 の BOM有りになっていることが分かり、BOM無しに変更してからUPしてテストしてみました…

…ら、できました！！！元HTMLと同じレイアウトで表示されています。感動です。お陰さまで、これからHPのリニューアルにやっと着手できます。とっても助かりました。
これまでBOMなんて聞いたことも無く、今回は勉強になりました。
ほんとうにありがとうございました <m(_ _)m>

お礼日時：2008/09/22 17:41

No.3 回答者： jjon-com 回答日時： 2008/09/20 11:04

全体／部分という包含(include)関係において，

その全体となるテキストファイルの拡張子は .shtml であることは分かりましたが，
その部分となるテキストファイルの拡張子は何でしょうか？

例えば，
フリーソフトのFTPクライアントとしてよく知られたものにFFFTPがあります。
その転送オプションには次のような設定画面があるのですが，
http://www.2apes.com/images/win_ascii.jpg
前述の全体／部分の両ファイルはともにテキストファイルですから，その拡張子はこの画面にて設定されているべきでしょう。そうでないとバイナリモードでWebサーバに転送されますから，改行文字の文字コードの関係でご質問のようなトラブルが起こるかもしれません。

この回答へのお礼

アドバイスどうもありがとうございます。
全体ファイルは.shtmlで、部分ファイルは.htmlにしています。

使用しているのはFFFTPですが、参考にしているHP作成本では特に何も言及されていなかったため、何も考えずただUPしていました。今回のお返事を読んでも、「バイナリモードって何？」状態だったのですが、なるほど、転送実行画面を見ていると「アスキー」や「バイナリ」に勝手に切り替わるんですね。

今回は残念ながら、教えていただいた通りに転送設定を変更しただけではレイアウト崩れは改善されませんでしたが、今後も*.shtmlはしっかり追加しておきます。
知らないことばかりで、とても勉強になりました。
ご丁寧なお返事をどうもありがとうございました <m(_ _)m>

お礼日時：2008/09/22 17:58

No.1 回答者： masaota56 回答日時： 2008/09/19 21:45

SHTMLのページをブラウザで表示した状態からソースを開いて、

元のHTMLのソースと見比べてみてください。

この回答へのお礼

早速のお返事ありがとうございます。ソース表示で新SHTMLと元HTMLとを比較したところ、目に見える違いは何もありませんでした。

ですが、試しにファイル比較ソフトでふたつを比較すると、インクルード文のある場所すべての冒頭で、

元：　<div id="contents">～
新：　・ソ<div id="contents">～

と、『・ソ』の違いがハイライトはされました。比較ソフト使用時のみ、この妙な『・ソ』が画面に現れます。これが原因でしょうか？勝手に挿入されているもののようなのですが…？

引き続き、よろしくお願いします <m(_ _)m>

お礼日時：2008/09/19 23:39