ステータス ページでカスタム 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>

 

さらにヘルプが必要ですか?

アトラシアン コミュニティをご利用ください。