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