2005-06-25

文字化け対策、エンコードのこと

自分のサイトに何も表示されなくなった、自分のパソコンでは見えているのにほかの人のパソコンでは見えない、投稿メッセージが意図したとおりに表示されない、などなど、Blogger 製作中にはこういうことが必ずと言っていいほど起こります。

これらの問題の原因のほとんどはエンコードミス、いわゆる文字化けです。そもそも欧米の人用にできている Blogger で、日本語を使ったページを作るには文字化けへの対策が不可欠です。

その対策を4つほど、以下に紹介します。

■1.エンコード方式を選択する

ブログページのエンコード方式は管理画面「設定→フォーマット→エンコード」で変更できます。
ここで Universal(Unicode UTF-8) を選択します。

なぜかというと、他のエンコード方式を選択すると投稿メッセージ中の記号類が文字化けするから。これは投稿編集画面自体が UTF-8 で書かれているからだと思います。

■2.テンプレートからタイトルとメタデータとを入れ替える

エンコード方式が正しく選択されていても、ページがまったく表示されずに真っ白になる場合があります。これはページタイトルに日本語が使われている場合に起こります。ブラウザ(IE, NN, Opera など)がページの最初から順に HTML を読んで解釈する際に、エンコードタイプがわからないまま日本語が出て来ると文字化けする可能性が高いのです。そこで管理画面「設定→テンプレート」から HTML が

<title><$BlogPageTitle$></title>
<$BlogMetaData$>
 という順になっているのを入れ替えて、
<$BlogMetaData$>
<title><$BlogPageTitle$></title>
 とします。

これでブラウザのエンコードミスを回避できるかと。ちなみに<$BlogMetaData$> にはエンコード情報などのメタタグ類が入っています。なぜそもそもこんな順で並んでいるのかは、謎ですが…。

■3.テンプレートから言語を指定する

ついでに HTML の使用言語指定について。
同じく管理画面「設定→テンプレート」から2行目を

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 から
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 に変更します。

ここは「この HTML ファイルは…語で書かれているよ」と指定している部分です。ブラウザがこの部分にどれだけ反応するかわかりませんが、多少なりともエンコードミスを防げるはず…。ここもそもそものデフォルトは、en(英語)に設定されています…。

■4.テンプレートから XML 宣言を加える

このブログ Blogger で扱われている文書は正確には XHTML といいます。これは XML をうけついだ「HTML」だということですが、そのため XHTML 文書には XML としての宣言も求められます。

具体的には1行目で

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 と書かれている部分に
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 と赤字の部分を加えるとOKです。

この宣言ももともとはついていませんので、がんばってつけてください。

以上で4つの予防策の紹介は終わりですが、ほかにもこういう手があるよ、という方は教えてくださいね。ではまた。

18 comments:

ちゃめ said...

初めまして。
この投稿には助かりました。
個別の投稿が表示されないというトラブルに見舞われていたのですが、解決できたようです。
有難うございます。
http://blog01ochame0001.blogspot.com/

kuribo said...

コメントありがとうございます。
Blogger でのエンコードは特にやっかいですね。
記事が役に立ったようで、嬉しいです。

ちゃめ said...

お世話になってます。
ほんと、助かりました。感謝感激です。

ちゃめ said...

連載小説のブログをセットアップする際に、またまたここを見にきました。

いや?、お世話になります。
クリボウさんのTIPSには、日本語Blogger&コーディング素人には必須のTIPSがたくさん有るので、エッセンスを抽出したページなんかを作ってみると、とても良いかも?
なんて、おせっかいながら思ったりします。

kani_city said...

公開したのにページが真っ白。
ヘルプじゃ、解決法のかけらもでてこないし。
それがこの記事で解決しました。
ありがとうございます

wonda said...

最初文字化けで「見えないよ」
といわれて、もう一回作り直しました。
このブログを最初に見ておけばよかった。

kuribo said...

> kani_city さん、wonda さん
コメントありがとうございます。
Blogger Help にも文字化けに対するヘルプはありませんね。
Blogger ももう少し、2バイト文字を使用する人のことを考えて欲しいな、と思ったり。

maida01 said...

助かりました。
画面が真っ白で、
テンプレートの始めのLangをJAにしても
直らなく、検索で、当記事を探しました。

ありがとうございました。

所長 said...

kuriboさま
助かりました?。自分のほうは会社でも自宅でもばっちり見えるのに、一部の方から「真っ白」と指摘され、どうにもこうにも困り果てておりました。もうBloggerに見切りをつけて他のプログサービスに乗り換えようかとまで思いました。1-4のうち、4をやるとなぜか文字のサイズがでかくなるので、とりあえず3までで様子見してます。
今後ともお世話になります。
取り急ぎ御礼まで。

yomei said...

はじめまして。
困っていた問題が解消できたので、大変助かりました。本当にありがとうございました。今後も、参考にさせていただきます。

ぶなやかた said...

文字化けの問題が解決しました.ありがとうございました.

cavacavien said...

最近では、何か?なことがおきると真っ先にクリボウさんのところに飛んでくるようになりました。
"文字化け"もおかげさまでクリアできました。有難うございます!

s_mika said...

はじめまして。

ああ、やっと解決。
ありがとうございます。助かりました。

revolver said...

はじめまして。
特定の投稿のみパーマリンクが真っ白になってしまっていましたが無事解決しました。
ありがとうございました。

ちゃんぷるー said...

ページがどうしてもまっ白になってしまい、困り果ててbloggerを呪ってしまうところでした。こんな簡単なことだったんですね。
本当に助かりました。ありがとうございます。困った時はクリボウに聞け!今後とも勝手にお世話になりそうです。

torizou said...

はじめまして。サイトの方でのエンコードについてのアドバイス、ありがとうございます!

実は困っていることがあります。bloggerの日記をmixiに読み込ませているのですが、タイトルが思いっきり文字化けするのです。上記の対策をしても、直りません・・・なにかよいアドバイスはないでしょうか?

GoogleMaster said...

はじめまして。
私もクリボウさんに助けられました。
ありがとうございます。

Ludwig the 5th said...

素晴らしいアドバイスありがとうございます。ページが表示されず気が動転していましたが、助かりました。