Dreamweaverのテンプレートを適用すると文字化けする時の解決方法

Dreamweaver

Dreamweaverでテンプレート(.dwt)を作り、それを各ページに適用したとたん、日本語がいっせいに「�」や謎の記号に化けてしまう。私も昔これにやられて、原因がわからず半日つぶした覚えがあります。

結論から言うと、テンプレート側と適用先ページのファイルの保存エンコードが食い違っているのが原因で、UTF-8で統一してしまえばほぼ解決します。

古いDreamweaver(CS5/CS4世代)には、HTML5のmeta charset記述をうまく読めずに保存時のエンコードをShift_JISへ巻き戻してしまう、というやっかいなクセもありました。この記事では、その昔ながらの回避策と、現行のDreamweaver(Adobe Creative Cloud版)で文字化けを根本から断つためのエンコード設定を、両方まとめておきます。

関連記事:VS CodeとDreamweaverを徹底比較!Web制作で選ばれる理由とは

そもそも文字化けは「エンコードの不一致」で起きる

文字化けというと難しく聞こえますが、正体はシンプルです。ファイルを保存したときの文字コードと、ブラウザやエディタがそのファイルを読むときに想定する文字コードがズレている。これだけです。

たとえば中身はUTF-8で保存されているのに、ブラウザがShift_JISだと思って読むと、日本語のバイト列を別の文字として解釈してしまい、結果として「譁・喧縺・」のような化け方をします。逆に、Shift_JISで保存したファイルをUTF-8として読んでも同じことが起きます。

Dreamweaverのテンプレートで文字化けが起きるのは、ここに「複数のファイルが絡む」事情が乗ってくるからです。テンプレート本体(.dwt)と、それを適用した各ページ(.html)は別々のファイルで、それぞれに保存エンコードがあります。さらにHTMLの中には<meta charset>という「このページはこの文字コードですよ」という宣言もあります。

文字化けを防ぐには、次の3つをすべてUTF-8でそろえるのが基本方針です。

・テンプレート(.dwt)のファイル保存エンコード

・適用先ページ(.html)のファイル保存エンコード

・HTML内の<meta charset>の宣言

どれか1つでもズレると化けます。逆に言えば、3つともUTF-8にそろえれば、まず化けません。

HTML5のmeta charsetと、CS5世代のクセ

HTML5では、文字エンコーディングの宣言はとても短く書けます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

この<meta charset="utf-8">が今の標準的な書き方です。ところが、Dreamweaver CS5(CS4)はこの短い記法をうまく解釈できず、テンプレートから生成したページを保存する際にファイルの文字コードをShift_JISへ書き換えてしまうことがありました。宣言はUTF-8、中身はShift_JIS、という不一致が生まれ、結果として文字化けが起こる、というわけです。

この世代をどうしても使い続ける場合の回避策として、テンプレート側に「Dreamweaverには見えるがブラウザには出力されない」コメントを仕込み、旧式のContent-Type宣言を併記してDreamweaverを納得させる、という手があります。

<!DOCTYPE html>
<html>
<head>
<!-- TemplateBeginIf cond="0" -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- TemplateEndIf -->
<meta charset="utf-8">

TemplateBeginIf cond="0"で囲んだ部分は条件が偽なので実際のページには書き出されず、ブラウザに余計なmeta重複を見せずに済みます。それでいてDreamweaverには昔ながらのContent-Type宣言が見えるので、エンコードを誤判定しなくなる、という小ワザです。

ただし、これはあくまで応急処置です。CS5.5以降ではこの不具合は解消されているので、根本対策としては次に紹介するエンコード設定をUTF-8でそろえるのが正解です。

現行Dreamweaverで文字化けを断つエンコード設定

Dreamweaverは2026年現在もAdobe Creative Cloudの製品として現役で、エンコード周りの設定箇所も整理されています。ポイントは「新規ドキュメントの初期設定」と「ページごとの設定」の2か所です。

新規ドキュメントの初期設定をUTF-8にする

これから作るファイルすべてに効く、いちばん効果の大きい設定です。

1. メニューから「環境設定」を開く(Windowsは編集メニュー、MacはDreamweaverメニュー内)

2. 左の分類から「新規ドキュメント」を選ぶ

3. 「デフォルトエンコーディング(エンコーディング初期設定)」でUnicode(UTF-8)を選ぶ

4. 「Unicodeシグネチャ(BOM)を含める」のチェックを外す

これで、新規に作るドキュメントもテンプレートも初めからUTF-8で保存されるようになり、ファイル間でエンコードがズレる事故そのものが起きにくくなります。テンプレートと適用先を同じ初期設定で作っていれば、もう化けません。

BOM(Byte Order Mark)は、ファイル先頭に付く「これはUnicodeですよ」という数バイトの目印です。UTF-8にはバイト順という概念がないため、BOMは付けても付けなくても構いません。ただしBOMが残っていると、PHPの出力やサーバー環境によっては予期しない空白や不具合の原因になることがあるので、Web制作では外しておくのが無難です。

ページごとのエンコードはページプロパティで確認する

既存のページや、開いたファイルのエンコードを個別に確認・変更したいときは、ページプロパティを使います。

1. メニューのウィンドウページプロパティを開く(または「ページプロパティ」ボタン)

2. 「タイトル/エンコーディング」の分類を選ぶ

3. 「エンコーディング」でUnicode(UTF-8)を選ぶ

ここでは文字コードのほか、ドキュメントタイプ(DTD)やUnicode正規化フォームも指定できます。エンコーディングをUTF-8にしたときは、正規化フォームは「フォームC(Normalization Form C)」を選んでおけば間違いありません。Web向けの文字モデルで最も一般的な形式です。

なおUTF-8を選んだ場合、UTF-8はすべての文字を安全に表現できるため、特殊文字をエンティティ(文字実体参照)に変換する必要はありません。日本語をそのまま書いて保存できます。

それでも化けるときのチェック順

設定を直したのにまだ化ける、というときは、次の順で見ていくと原因にたどり着きやすいです。

・テンプレート(.dwt)自体がUTF-8で保存されているか。古いテンプレートを使い回していると、ここがShift_JISのまま残っていることがあります。

・適用先ページの<meta charset>と、ファイルの実際の保存エンコードが一致しているか。宣言だけ直してもファイルが旧エンコードのままだと化けます。

・BOMが意図せず付いていないか。とくにPHPを含むページで空白や警告が出るときは、BOMを疑います。

・FTPでアップした後に化けるなら、転送モードや既存ファイルの上書き残りも確認します。

テンプレートを一度UTF-8で保存し直してから、各ページに再適用すると一括で直ることが多いです。

まとめ

Dreamweaverのテンプレート適用で日本語が文字化けする原因は、突き詰めると「ファイルの保存エンコードの不一致」です。テンプレート(.dwt)・適用先ページ(.html)・HTML内のmeta charsetを、すべてUTF-8でそろえる。これが一番の特効薬です。

現行のDreamweaverなら、まず環境設定の「新規ドキュメント」でデフォルトエンコーディングをUnicode(UTF-8)にし、BOMのチェックを外しておく。これだけで、これから作るファイルはエンコードがズレにくくなります。個別のページはページプロパティの「タイトル/エンコーディング」でUTF-8を確認しておけば安心です。

CS5世代特有のmeta charsetの読み違いはCS5.5以降で解消済みなので、TemplateBeginIfを使った小ワザはあくまで旧バージョン向けの応急処置と考えてください。新しく作るなら、最初からUTF-8で統一する。それが結局いちばん手間がかからない方法です。