# ヒートマップを表示した背景のページが文字化けしてしまった場合

ヒートマップ表示時に、背景のウェブページが文字化けしてしまう問題の原因と、その解決方法について説明します。

この手順を行うことで、ヒートマップ上の文字化けを解消し、ウェブページを正しく表示できるようになります。これにより、正確なページ表示の上でユーザー行動を分析できます。

### よくある利用シーン

ヒートマップを表示した際に、背景のウェブページが文字化けしてしまう場合に役立ちます。この問題は、ウェブサイトのHTMLヘッダーで指定された文字コード（例: `euc-jp`）と、ブラウザが実際にページを表示する際に使用する文字コード（例: `UTF-8`）が一致していないときに発生します。

### この機能の設定方法

以下の手順で文字コードの不一致を確認し、HTMLファイルを修正します。

#### 1. ブラウザが認識している文字コードを確認する

まず、ブラウザがどの文字コードでページを認識しているかを確認します。

1. 文字化けが発生しているページで、Chromeのデベロッパーツールを開きます。（`F12`キー または `Ctrl+Shift+I`）
2. 「コンソール（Console）」タブを開きます。
3. コンソールに `document.characterSet` と入力し、Enterキーを押します。
4. 表示された文字コード（例: `UTF-8`）を確認します。

#### 2. HTMLヘッダーの文字コードを修正する

次に、ウェブサイトのHTMLファイルを修正し、ブラウザが認識している文字コードと一致させます。

1. ウェブサイトのHTMLファイルを開きます。
2. ヘッダー部分にある文字コードの指定（`<meta charset="...">`）を探します。
3. 手順1で確認した文字コードに書き換えます。\
   （例：`<meta charset="euc-jp">` を `<meta charset="UTF-8">` に変更）
4. ファイルを保存し、ウェブサイトを再読み込みして、文字化けが解消されたか確認してください。

**【ご注意】**\
文字コードを変更する際は、サイト内のすべてのテキストファイルが同じ文字コードで保存されていることを確認してください。異なる文字コードが混在していると、別の問題が発生する可能性があります。