Atlassian アカウントを使用するために Statuspage を移行する
チームと一緒に Atlassian アカウントに移行するために知っておく必要があることのすべてについて説明します。
ステータス ページでカスタム HTML を使用する
セキュリティ上の理由から、サブドメイン URL (例: companyname.statuspage.io) を使用するときに、有効にされた公開ページにカスタム HTML を表示できません。
カスタム CSS を公開するには、カスタム ドメインを設定 (例: status.companyname.com) する必要があります。
カスタム HTML が挿入される場所
カスタム HTML 機能によって、ステータス ページにカスタム ヘッダーとカスタム フッターを追加できます。カスタム HTML を使用していない場合、DOM 構造は次のようになります。
1
2
3
4
<div class="layout-content">
<div class="masthead-container">...masthead here...</div>
<div class="container">...page content here...</div>
</div>
管理領域の [Custom Header (カスタム ヘッダー)] ボックスに入力した内容は、div.masthead-container を置換します。[Custom Footer (カスタム フッター)] ボックスに入力した内容は、残りのコンテンツを保持する div.container の後に追加されます。div.container の外側にカスタム ヘッダーとカスタム フッターを配置すると、ページの全幅を使用できます。
カスタム HTML とカスタム CSS を追加すると、DOM 構造は次のようになります。
1
2
3
4
5
6
7
8
9
<div class="layout-content">
<div class="custom-header-container">
{{ Custom Header Inserted Here }}
</div>
<div class="container">...page content here...</div>
<div class="custom-footer-container">
{{ Custom Footer Inserted Here }}
</div>
</div>
クロスオリジン リクエストを有効化するため、ステータス ページでは X-Frame-Options などのセキュリティ ヘッダーを許可していません。
サブスクライブ ボタンの置換
カスタム ヘッダーを使用していないと、サブスクライブ ボタンはページ上の div.mashead に自動で表示されます。カスタム ヘッダー フィールド内に配置すると、元の div.masthead が置換されることにご注意ください。
サブスクライブ機能をページに戻すには、<div id="replace-with-subscribe"></div> をカスタム ヘッダーの任意の場所に追加する必要があります。この特別な <div> は、すべてのステータス ページにあるサブスクライバー ボタン ドロップダウン UI 要素に置き換えられます。
例:
1
2
3
4
5
6
7
<header>
<nav class="container">
<div id="replace-with-subscribe"></div>
<a href="#">Contact</a>
<a href="#">Home</a>
</nav>
</header>
実行時に、<div id="replace-with-subscribe"></div> は自動で置き換えられてヘッダーは次のようになります。
1
2
3
4
5
6
7
8
9
10
<header>
<nav class="container">
<div class="updates-dropdown-container">
<a href="#" id="show-updates-dropdown">...</a>
<div class="updates-dropdown">...</div>
</div>
<a href="#">Contact</a>
<a href="#">Home</a>
</nav>
</header>
この内容はお役に立ちましたか?