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

Blogger ブログを運営していると、「ブログが真っ白に」「他の人のパソコンで見えない」「投稿メッセージが思ったとおりに表示されない」などといった、ページ表示上の問題が起こることがあります。

これらのほとんどは、ブラウザの文字エンコード方式の解釈ミス、いわゆる文字化けが原因です。そもそも欧米の人用にできている Blogger で日本語を使ったページを作るには、この文字化けへの対策が欠かせません。

ということで、ここでは、文字化け対策を３つほど紹介します。


１．テンプレートのタイトルとメタデータとを入れ替える
文字化けで一番多いのは、ページタイトルに日本語が使われているときです。Blogger の文字エンコード方式は UTF-8 が採用されていますが、ブラウザ（IE, Firefox, NN, Opera など）が、ページの HTML を頭から順に読んで解釈しているときに、そのエンコード方式が判明しないままに日本語が出て来てしまうと、文字化けする可能性が高いのです。

そこで、

レイアウトテンプレートの場合は、管理画面「レイアウト ＞ HTML の編集」を確認し、

<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
　という順番にコードが表示されていれば
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
　と順番を変更します。

旧 Blogger および、クラシックテンプレート利用の新 Blogger の場合、管理画面「テンプレート ＞ HTML の編集」から

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

これでブラウザのエンコードミスを回避できるかと。ちなみに <b:include data='blog' name='all-head-content'/> や <$BlogMetaData$> は、エンコード方式などのタグを書き出すための Blogger 専用のテンプレートタグです。


２．テンプレートに使用言語を指定する
ついでに HTML の使用言語も指定しておきます。

レイアウトテンプレートの場合、管理画面「テンプレート ＞ HTML の編集」から、html 要素の開始タグを

<html>
　から
<html lang="ja">
　に変更します。

クラシックテンプレートの場合、管理画面「テンプレート ＞ HTML の編集」から、html 要素の開始タグを

<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 ファイルはナントカ語で書かれているよ」と指定している部分です。ブラウザがこの部分にどれだけ反応するかわかりませんが、多少なりともエンコードミスを防げると思います。


３．テンプレートに XML 宣言を加える
Blogger で使われているページの書式は、正確には XHTML といいます。これは XML をうけついだ「HTML」だということなんですが、そのため XHTML 文書には XML としての宣言も必要になります。

具体的にはテンプレートの１行目で

<!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 です。


以上で３つの予防策の紹介は終わりです。「ほかにもこういう方法があるよ」という方は、ぜひ教えてくださいね。