文字コード設定がされていないと画面が白くなる（文字化け）

Movable Type

現在このブログは「Movable Type4.15 beta１」で運営してます（早くfinalでないかな）。

見た目もデフォルトのままで何も変更していないのにFireFoxではブログの表示がされるのに、IEでは真っ白い画面で表示されていました。

原因は文字コードで正しく文字コードが選択されないため画面が真っ白になってしまったようです。IEのツールバー「表示→エンコード→日本語(シフトJIS)」にチェックがついてました。ここで「Unicode（UTF-8）」を選択すると無事表示されました。

文字化けしないように文字コードの設定meta要素を使って指定します。そしてこの文字コードを指定するmeta要素はどうやらtitleタグの前に指定しなければいけないものらしいのです。そのため正しくブラウザで文字コードが選択されないことがあるようです。今まで意識せずheadタグの下に記載してましたが・・・。

Movable Type4.15 beta１では「HTMLヘッダーモジュール」の一番最初にこのmeta要素が記載されているのですが、titleタグは「HTMLヘッダーモジュール」の前に記載されているのです。そのためIEでは画面が真っ白になってしまったようです。

meta要素をメインテンプレートや各アーカイブテンプレートのtitleタグの前に持ってくるか、逆にtitleをHTMLヘッダーのmeta要素の後に持ってくるか(そうすると条件分岐必要だけど)する必要があります。

私はいづれ独自テンプレートにする予定なので楽なほう（titleタグの前にmeta要素移動）を選びました。

１．HTMLヘッダーからmeta要素を削除

<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />

２．以下のテンプレートの<head>タグと<title>タグの間にｍｅｔａ要素を追加

  • メインページ
  • アーカイブページ
  • ウェブページ
  • カテゴリ別ブログ記事リスト
  • ブログ記事
  • 月別ブログ記事リスト

必要ないかもしれないけど修正部分のソースを記載しておきます。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName encode_html="1"$></title>
<$mt:include module="HTMLヘッダー"$>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName encode_html="1"$>: アーカイブ</title>
<$mt:include module="HTMLヘッダー"$>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTPageTitle encode_html="1"$> - <$MTBlogName encode_html="1"$></title>
<$mt:include module="HTMLヘッダー"$>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName encode_html="1"$>: <$MTArchiveTitle$>アーカイブ</title>
<$mt:include module="HTMLヘッダー"$>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTEntryTitle encode_html="1"$> - <$MTBlogName encode_html="1"$></title>
<$mt:include module="HTMLヘッダー"$>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName encode_html="1"$>: <$MTArchiveTitle$>アーカイブ</title>
<$mt:include module="HTMLヘッダー"$>