MovableType: 2008年12月アーカイブ
Movable Typeで生成したatom.xmlをphpで読み込み、日付とタイトルにデザインをつけて表示しようとしました。
デザインを入れる前までは問題なく進んだけど、デザインを入れてみると表示が崩れているではありませんか。。。
cssでfloat:leftを指定し、２段組で表示してあげる予定でした。
しかし、右側のdivが１行下がってしまう…。
原因はphp(文字コード:UTF-8)でatom.xml(文字コード:UTF-8N)を読み込み、デザインテンプレート(文字コード:UTF-8)に日付とタイトルをを埋め込み出力(表示)していたため。
phpで出力されているデータ（テンプレート）の先頭にBOM(Byte Order Mark)がつけられ、そのBOMがデザインの崩れを引き起こしていました。
UTF-8とUTF-8Nが混在していました。
すべてのファイルの文字コードをUTF-8Nにすることで解決できました。
問題解決への道のり
- 完成予定のソースを(x)htmlに直接記述 → 思い通りに表示される。
- phpで表示しソースをコピーし、サクラエディタで表示 → 「・・」のようなコントロールコードが表示された
- こんどはTeraPadで表示 → 文字コードがUTF-8Nと認識された
- 使用しているファイルを全てUTF-8からUTF-8Nに変更
いつもExpression Webを使用していたので、全く意識していないものでした。
ちなみにサクラエディタと秀丸エディタのUTF-8はUTF-8Nのことのようです。
関連リンク
