Windowsで文字化け&白紙になってしまう

RW3.5検証済み
このエントリの内容は RapidWeaver 3.5 を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
RapidWeaverで制作したウェブサイトをWindowsのウェブブラウザ「Internet Explorer 6」で見ると文字化け&白紙になることがあります。(5は未確認)不本意ながら80%以上のシェアを誇るブラウザですので見過ごすわけにはいきません。
詳しい原因は分かりませんが対処法を書いておきます。(RapidWeaver3.5.1、ページのエンコードをUnicode(UTF-8)にしてあることを前提に書いています。2007/6/12追記:3.6は未確認です。)


原因
文字化けの原因はHTMLファイルの文字コード宣言の前に2バイトフォント(日本語)があるせいです(多分…)Macだと問題はありませんが、Windowsだと文字コードを正しく認識してくれません。
なぜRapidWeaverでそういうことが起こるかと言うと、ページインスペクタの詳細設定にMetaタグを入力出来ますが、ページを書き出すときに
追加したMetaタグが文字コード宣言よりも自動的に上に記述されるような仕様になっているからです。困った物ですがどうしようもありません。

右の画像は、このブログのページをRapidWeaverのコードビューで見たものです。赤い枠線が文字コード宣言です。追加した日本語を含んだMetaタグが文字コード宣言よりも上に来ています。
豆情報RapidWeaver3.5.1のエンコードにはShift_JISがありません。通常はUnicode(UTF-8)にしておきます)


対処法
この問題に対処するには使用しているテーマのindex.htmlの内容を編集します。まずテーマのindex.htmlを探します。(必ずテーマのバックアップを取っておいてください

*初めからインストールされているテーマの場合:
RapidWeaver(アプリ本体)を選択して
パッケージを開きます。(キーボードのcontrolを押しながらクリックもしくは右クリックしてパッケージの内容を表示を選択)
Contents/Resources/Install/と開いていくと目的のテーマまでたどり着くと思います。編集するテーマのパッケージを同じように開きます。
Contentsフォルダを開くとindex.htmlというファイルがあると思います。

*追加してインストールしたテーマの場合:
起動ディスク/ユーザー/ユーザー名/ライブラリ/Application Support/RapidWeaver/の中にインストールしたテーマやプラグインがあります。
編集するテーマのパッケージを表示してContentsフォルダを開くとindex.htmlというファイルがあると思います。

次にテキストエディタでこのindex.htmlファイルを開きます。アプリケーションフォルダにはじめから入っているテキストエディットでも構いませんが、私はSmultronというフリーのHTMLエディタを使っています。サイトは英語ですがアプリは日本語で表示されます。(ダウンロードする場合は一番上の物を)
テキストエディットで開く場合は、テキストエディットの環境設定を開いて「開く/保存」の「ファイルを開くとき:」の「HTMLファイル中のリッチテキストコマンドを無視」にチェックが入っているかどうか確認してください。保存するときは正直よくわかりません(笑) 多分「HTML保存オプション」の書類のタイプを「XHTML 1.0 Strict」(開いたindex.htmlと同じにする?)、スタイルを「CSSなし?」、エンコーディングを「Unicode(UTF-8)」にしてください。…面倒くさいでしょ?(笑) ひとつ自分に合ったHTML用テキストエディタを持っておくとすごく便利なので検討してみてください。

index.htmlをエディタで開いたら、「
%header%」という記述が上の方にあります。この上に新しく文字コードを書き足します。
書き足す文字コードは以下の通りです。(コピー&ペーストしても大丈夫です)

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

青い帯のところが追加したところです。追加したら上書き保存します。
*

これでWindowsでも文字化け&白紙が治ると思います。この編集結果は今までに作ったページや新規に作るページにも反映されます。
追加してインストールしたテーマの場合、
<title>%title%</title>の部分が%header%より上にあるものがあります。その場合は<title>%title%</title>をカット&ペーストして%header%より上に、文字コード宣言よりも下に来るようにしてください。(タイトルに2バイトフォントを含まない場合はそのままで大丈夫です)

もう一つ考えられる原因として、ページインスペクタのコードのカスタムCSSにコードを書きすぎるとWindowsで白紙になることもありました。しかしこちらは稀な例でしょう。

作業が終わったらRapidWeaverのコードビューでソースを確認してみましょう。赤い枠線を見ると文字コードがMetaタグよりも上に来ているのが分かります。

ただし!下のオレンジの枠線の部分にも文字コードがあります…。

当然ですが、これははじめからある文字コードです。2重記述になりますが特に問題はないので解決とします(^_^;





blog comments powered by Disqus