Dreamweaverの文字化けの対処法をお探しですね。

広告

Dreamweaverで日本語が文字化けした時の直し方【UTF-8設定とBOM】

Dreamweaverで日本語が突然「�」や意味不明な記号に変わってしまうと、「ファイルが壊れた！」と焦りますよね。

でも安心してください。

多くの場合、原因は文字コードの設定がずれているだけです。

この記事では、Dreamweaverで文字化けした時の直し方を、文字コード（UTF-8）の確認方法から、HTML側の設定、BOMの扱い方、再発を防ぐコツまで順番に解説していきます。

見出し1：Dreamweaverで文字化けが起きる主な原因

Dreamweaverで文字化けが起きる原因のほとんどは、「ファイルを保存した文字コード」と「Dreamweaverやブラウザが読み取ろうとしている文字コード」がバラバラになっているからです。

たとえば、実際のファイルはShift_JISで保存されているのに、HTML内では「UTF-8だよ」と書いてある場合、日本語がうまく読めずに文字化けしてしまいます。

逆に、UTF-8で保存したファイルを古い設定のままShift_JISとして開いた時も、同じように表示が崩れます。

文字コードというのは、文字をパソコンで扱うための「変換ルール」のようなものです。

今の日本語サイトでは、UTF-8が標準的に使われていますが、昔作られたサイトではShift_JISやEUC-JPが使われていることもあります。

Dreamweaverで編集する時は、「ファイル本体の文字コード」「HTMLに書いてあるcharset指定」「サーバーが送ってくる文字コード情報」の3つが揃っているかチェックする必要があります。

ここで知っておいてほしいのは、Dreamweaver上で文字化けしているからといって、必ずしもファイルが完全に壊れているわけではないということです。

単に間違った文字コードで開いているだけなら、正しい文字コードで開き直せば元に戻る可能性は十分あります。

ただし、文字化けした状態のまま上書き保存してしまうと、元の日本語データが消えてしまうこともあります。

作業を始める前には必ずファイルをコピーして、バックアップを取っておきましょう。

見出し2：Dreamweaverで文字コード（UTF-8）を確認・変更する方法

Dreamweaverで文字コードを確認するには、対象のHTMLファイルを開いて、ページプロパティのエンコーディング設定を見ます。

バージョンによって多少違いますが、だいたい「修正」メニューから「ページプロパティ」を開いて、「タイトル/エンコーディング」という項目を探します。

ここで「Unicode（UTF-8）」が選ばれていれば、Dreamweaver上ではUTF-8として扱われている状態です。

既存のファイルをUTF-8に変更したい場合は、表示設定を変えるだけでなく、ファイルの保存形式もちゃんとUTF-8に変換されているか意識する必要があります。

Dreamweaverの画面上で文字が正しく表示されている状態で、エンコーディングをUTF-8に設定して保存すれば、だいたいはUTF-8形式で保存されます。

ただし、すでに文字化けした状態で保存してしまったファイルは、設定をUTF-8に変えても元の日本語に戻らないことがあります。

そんな時は、バックアップやサーバー上の正常なファイルから復元するのが安全です。

確認するポイントは、Dreamweaverの設定だけではありません。

HTMLファイルのhead内にあるcharset指定も重要です。

HTML5の場合は、次のように書かれているか確認しましょう。

“`html

<meta charset="UTF-8">

“`

古いHTMLだと、こんな形式で書かれている場合もあります。

“`html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

“`

どちらの形式でも、ここに書いてある文字コードとファイルの保存形式が一致していることが大切です。

ファイルはUTF-8なのにmetaタグがShift_JISのままだと、ブラウザで見た時に文字化けする原因になります。

Dreamweaver上では正しく見えているのに、ブラウザで確認すると崩れているケースでは、このcharset指定がずれている可能性を疑ってみてください。

見出し3：BOMの設定とは何か、Dreamweaverではどう扱うべきか

BOMというのは「Byte Order Mark」の略で、ファイルの先頭に付く目印のようなデータです。

UTF-8のファイルにもBOMを付けることができますが、今のWeb制作では「UTF-8 BOMなし」で保存するのが一般的です。

Dreamweaverでは、UTF-8を選んだ時に「Unicode署名を含める」みたいなチェック項目が出てくることがあります。

このチェックを入れるとBOM付きUTF-8、外すとBOMなしUTF-8になります。

BOM付きUTF-8は、昔のソフトや一部の環境で文字コードを判別しやすくするメリットがあります。

でも、Webサイト制作では逆にデメリットになることも多いんです。

特にPHPファイルでは、BOMがファイル先頭の見えない文字として出力されて、「headers already sent」みたいなエラーが出ることがあります。

また、CSSやJavaScriptでも環境によっては予期しない動作の原因になる可能性があります。

なので、HTMLだけでなく、PHP、CSS、JavaScriptを扱う場合は、基本的にBOMなしUTF-8で統一するのが安全です。

DreamweaverでBOM設定を確認する時は、文字コードをUTF-8にした上で、Unicode署名のチェック状態を見ます。

静的なHTMLだけの小規模サイトならBOM付きでも大きな問題が出ないこともありますが、CMS、PHP、外部スクリプト、テンプレートファイルを使うサイトではBOMなしを選ぶ方が無難です。

迷った時は「UTF-8、BOMなし」を基本ルールにしておくと、あとから別のエディタや開発環境で作業する時もトラブルが減らせます。

ただし、BOMを外したからといって、すでに文字化けした文章が自動で直るわけではありません。

BOMはあくまで文字コードを判別するための補助的な情報で、文字データそのものを復元する機能はないからです。

文字化け対策では、まず正しい文字コードでファイルを開くこと、次に保存形式とHTMLのcharset指定を一致させること、その上でBOMの有無を適切に設定することが大切です。

見出し4：文字化けを直す実践手順と再発防止のポイント

Dreamweaverで文字化けを直す時は、いきなり上書き保存せず、原因を一つずつ確認しながら進めるのがコツです。

まず対象ファイルをコピーして、作業用のバックアップを作ります。

次にDreamweaverでファイルを開いて、ページプロパティからエンコーディングを確認します。

日本語サイトでこれから管理していくなら、基本はUTF-8に統一するのがおすすめです。

一緒にHTML内のmeta charsetもUTF-8になっているか確認しましょう。

実際の確認手順は、次の流れで進めると失敗しにくくなります。

– 文字化けしているファイルをコピーして、バックアップを取る
– Dreamweaverのページプロパティで文字コードを確認する
– HTML内の“を確認・修正する
– UTF-8、できればBOMなしで保存する
– ブラウザとサーバー上の表示を確認する

ブラウザでだけ文字化けする場合は、サーバー側の文字コード指定も確認が必要です。

サーバーがHTTPヘッダーで「charset=Shift_JIS」みたいな指定を返していると、HTML内でUTF-8を指定していても表示が乱れることがあります。

レンタルサーバーやApache環境では、.htaccessで文字コードが指定されているケースもあります。

Dreamweaverの設定を直してもブラウザ表示が改善しない場合は、サーバー設定やCMSのテンプレート設定も見てみましょう。

再発防止のためには、新規ファイルを作る時のデフォルト文字コードをUTF-8にしておくと便利です。

Dreamweaverの環境設定や新規ドキュメント設定で、標準のエンコーディングをUnicode（UTF-8）にしておけば、毎回手動で変更する手間が省けます。

また、サイト内でShift_JISとUTF-8が混在していると、コピー＆ペーストやテンプレート編集の際に文字化けが起きやすくなります。

古いファイルを更新するタイミングで、サイト全体の文字コードをUTF-8へ統一する方針を立てると管理が楽になりますよ。

Dreamweaverで文字化けした時の直し方は、難しい操作よりも「どこで文字コードがずれているか」を見つけることが中心です。

ファイルの保存形式、Dreamweaverのエンコーディング、HTMLのcharset、サーバーの文字コード指定を順番にチェックすれば、ほとんどの文字化けは解消できます。

特にUTF-8で運用する場合は、BOMなしを基本にして、保存前に表示が正常であることを確認してから上書きする習慣をつけましょう。

そうすれば、Dreamweaverでの編集作業だけでなく、ブラウザ表示やサーバー公開後のトラブルも防ぎやすくなります。

広告