文字化け対策、エンコードのこと
Blogger ブログを運営していると、「ブログが真っ白に」「他の人のパソコンで見えない」「投稿メッセージが思ったとおりに表示されない」などといった、ページ表示上の問題が起こることがあります。
これらのほとんどは、ブラウザの文字エンコードの解釈ミス、いわゆる文字化けが原因です。そもそも欧米の人用にできている Blogger で日本語を使ったページを作るには、この文字化けへの対策が欠かせません。
ということで、ここでは、文字化け対策を４つほど紹介します。
１．エンコード方式を選択する
２．テンプレートのタイトルとメタデータとを入れ替える
エンコード方式を UTF-8 に設定していても、ページが全く表示されないという場合があります。
これはページタイトルに日本語が使われているときに、よく起こります。ブラウザ（IE, Firefox, NN, Opera など）が、ページの HTML を頭から順に読んで解釈しているときに、エンコード方式がわからないまま日本語が出て来てしまうと、文字化けする可能性が高いのです。
これでブラウザのエンコードミスを回避できるかと。ちなみに
３．テンプレートに使用言語を指定する
ついでに HTML の使用言語も指定しておきます。
ここは「この HTML ファイルはナントカ語で書かれているよ」と指定している部分です。ブラウザがこの部分にどれだけ反応するかわかりませんが、多少なりともエンコードミスを防げると思います。
４．テンプレートに XML 宣言を加える
Blogger で使われているページの書式は、正確には XHTML といいます。これは XML をうけついだ「HTML」だということなんですが、そのため XHTML 文書には XML としての宣言も必要になります。
具体的にはテンプレートの１行目で
以上で４つの予防策の紹介は終わりです。「ほかにもこういう方法があるよ」という方は、ぜひ教えてくださいね。
これらのほとんどは、ブラウザの文字エンコードの解釈ミス、いわゆる文字化けが原因です。そもそも欧米の人用にできている Blogger で日本語を使ったページを作るには、この文字化けへの対策が欠かせません。
ということで、ここでは、文字化け対策を４つほど紹介します。
１．エンコード方式を選択する
ブログの公開設定を「FTP 経由公開」にしている場合、ブログの文字エンコード方式を設定することができます。
Blogger 管理画面「設定 ＞ フォーマット」ページ、「エンコード」の項目で ユニバーサル文字(Unicode UTF-8) を選択します。
他のエンコード方式を選択していると、投稿メッセージに記入した記号類が文字化けすることがあるからです。これは、Blogger の新規投稿や投稿編集のページ自体が UTF-8 で書かれているせいかと。
Blogger 管理画面「設定 ＞ フォーマット」ページ、「エンコード」の項目で ユニバーサル文字(Unicode UTF-8) を選択します。
他のエンコード方式を選択していると、投稿メッセージに記入した記号類が文字化けすることがあるからです。これは、Blogger の新規投稿や投稿編集のページ自体が UTF-8 で書かれているせいかと。
FTP 経由公開ブログ以外は、今のところ文字コードの選択がサポートされていません。エンコード設定は自動的に UTF-8 になっているので、この項目は気にしなくて結構です。
２．テンプレートのタイトルとメタデータとを入れ替える
エンコード方式を 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'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
と順番を変更します。<title><data:blog.pageTitle/></title>
旧 Blogger および、クラシックテンプレート利用の新 Blogger の場合、管理画面「テンプレート ＞ HTML の編集」から
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
という順になっているコードを入れ替え、<$BlogMetaData$>
<$BlogMetaData$>
<title><$BlogPageTitle$></title>
とします。<title><$BlogPageTitle$></title>
これでブラウザのエンコードミスを回避できるかと。ちなみに
<b:include data='blog' name='all-head-content'/> や <$BlogMetaData$> は、エンコード方式などのタグを書き出すためのテンプレートタグです。３．テンプレートに使用言語を指定する
ついでに 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 です。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
以上で４つの予防策の紹介は終わりです。「ほかにもこういう方法があるよ」という方は、ぜひ教えてくださいね。
