# ステータスページをカスタマイズする

Source: https://instatus.com/help/ja/status-page/customize

ステータスページのロゴ、色、ヘッダーのデザイン、ダークモード、言語、日付の形式、SNS のプレビューを変更したり、独自の HTML、CSS、JavaScript を追加したりできます。すべて**ステータスページ**の設定から行えます。

| At a glance | Details |
| :-- | :-- |
| [ブランド](https://instatus.com/help/ja/status-page/customize#ロゴと色を追加するには) | ロゴ、ダーク用ロゴ、ファビコン、ブランド色、ステータス色 |
| [デザイン](https://instatus.com/help/ja/status-page/customize#デザインやダークモードを変更するには) | 3 種類のヘッダー、ダーク/ライトモード、コンポーネントの配置 |
| [カスタムコード](https://instatus.com/help/ja/status-page/customize#独自の-htmlcssjavascript-を追加できますか) | 5 か所に HTML、CSS、JavaScript |
| [言語](https://instatus.com/help/ja/status-page/customize#ステータスページの言語を変更するには) | 既定の言語、Pro なら多言語対応 |
| [タイムライン](https://instatus.com/help/ja/status-page/customize#日付時刻タイムゾーンの形式を変更するには) | 日付と時刻の形式、タイムゾーン、開始日 |
| [検索と SNS](https://instatus.com/help/ja/status-page/customize#google-や-sns-でのプレビューを調整するには) | プレビュー用のタイトル、説明、画像 |

## ロゴと色を追加するには？

[instatus.com/login](https://dashboard.instatus.com/login) から Instatus にログインし、対象のステータスページを選んで、**ステータスページ → デザイン**へ移動します。

ブランドのセクションでは、次の項目を変更できます。

- ブランドのロゴ (ダークモード用の別ロゴも設定できます)。
- ファビコン。
- ロゴに合わせたブランドカラー。
- ステータスの色。

カスタマイズが終わったら **SAVE** をクリックすると、ページが更新されます。

![ブランド設定](https://instatus.com/help/customize/1.png)

## デザインやダークモードを変更するには？

**デザイン**にあるデザインのセクションでは、次の項目を変更できます。

- ヘッダーのデザイン (3 種類から選べます)。
- ステータスページをダークモード、ライトモード、ボタンで切り替え可能のいずれで表示するか。
- コンポーネントの表示方法。

デザインを変更したら **SAVE** をクリックすると、ページが更新されます。

![デザイン設定](https://instatus.com/help/customize/2.png)

## 独自の HTML、CSS、JavaScript を追加できますか？

はい。**ステータスページ → HTML** では、次の 5 か所に独自の HTML、CSS、JavaScript を挿入できます。

- ステータスページのヘッダーの上。
- ヘッダーの下。
- ステータスページのコンポーネントの下。
- ステータスページのフッターの上。
- フッターの下。

カスタム HTML を追加したら **SAVE** をクリックすると、ページが更新されます。

![カスタム HTML の設定](https://instatus.com/help/customize/3.png)

## ステータスページの言語を変更するには？

**ステータスページ → 言語**では、次の項目を変更できます。

- ステータスページの既定の言語。

**Pro プランの機能:**

- 多言語対応のステータスページ。
- 独自の表現の利用。

多言語の設定手順は、
[多言語対応](https://instatus.com/help/ja/status-page/multi-language)の記事で詳しく説明しています。

![言語設定](https://instatus.com/help/customize/4.png)

ステータスページの言語を変更したら **SAVE** をクリックすると、ページが更新されます。

## 日付、時刻、タイムゾーンの形式を変更するには？

**ステータスページ → タイムライン**では、次の項目を変更できます。

- 日付と時刻の形式。[日付と時刻の形式について詳しくはこちら](https://date-fns.org/v2.16.1/docs/format)を参照してください。
- タイムゾーン。
- サービスの開始日。

日付と時刻を変更したら **SAVE** をクリックすると、ページが更新されます。

![日付と時刻の形式の設定](https://instatus.com/help/customize/5.png)

## Google や SNS でのプレビューを調整するには？

**ステータスページ → 検索と SNS** では、次の項目を設定できます。

- タイトルを変更する。
- Google や SNS 向けの独自の説明を追加する。
- 画像をアップロードする。

検索と SNS の設定をカスタマイズしたら、**SAVE** をクリックして変更を反映します。

![検索と SNS の設定](https://instatus.com/help/customize/6.png)

- [多言語対応](https://instatus.com/help/ja/status-page/multi-language): ステータスページを複数の言語で提供する方法を学ぶ。