HTMLとCSSのカスタマイズ

ステータスページ全体の構造を変更したい場合にも、HTML、CSS、Javaスクリプト、フォント、ヘッダー、フッターのレベルでカスタマイズ可能です。

レイアウトの変更方法は次のとおりです。

1. StatusIQにログインします。
2. レイアウトを変更したいステータスページを選択します。
3. ［カスタマイズ］→［HTMLとCSSのカスタマイズ］に移動します。
4. 変更を行った後に［公開］をクリックします。

目次

• レイアウトエディター
• CSSのカスタマイズ
• HTMLとJavaスクリプトのカスタマイズ

レイアウトエディター

レイアウトエディターには次の3項目が存在します。

• カスタムCSS
• カスタムヘッダーHTML
• カスタムフッターHTML

エディターで変更を行うと、自動で画面右側にプレビューとして反映されます。変更を保存しても公開されているページには反映されません。［公開］をクリックすることで、インシデント履歴、コンポーネント詳細、インシデント詳細を含めた変更が、ページに反映されます。
［下書きの変更を戻す］をクリックすると、行った未公開の変更がキャンセルされます。

［公開］と［下書きの変更を戻す］の下部で、直近の公開者、更新日時が表示されます。

ステータスページに対して、下記の様々なカスタマイズを行えます。

• CSS
• HTMLとJavaスクリプト

レイアウト編集のためのサンプルコードは次のとおりです。

CSSのカスタマイズ

カスタマイズしたCSSとJavaスクリプトエディターを使用して、ステータスページのレイアウトを強化します。カスタムCSS項目にコードを外部スタイルシートに入力し、ドキュメントのヘッダーセクションに含めます。メインスタイルシートの後に外部スタイルシートが挿入され、ここで自由にスタイルを上書きできます。

こちらのページで、StatusIQで定義されているデフォルトのCSSクラスのコードを記載しています。

HTMLとJavaスクリプトのカスタマイズ

カスタムなJavaスクリプトコードを使用してステータスページのレイアウトを修正できます。これにより項目の配置などを更新できます。

「div.container」内のデフォルトのDocument Object Model（DOM）構造とページコンテンツロードの詳細はこちらのページをご確認ください。

カスタマイズ後のDOM構造の詳細はこちらのページをご確認ください。

様々なアクションのサンプルコードは次のとおりです。Webデザインの性質上、互換性の問題が発生する可能性があることに注意してください。HTMLをテストしてコードの互換性を確認してください。

• 「正常」ステータスから他のステータスにカスタマイズ：カスタムフッターHTML項目にこちらのコードを追加し、コンポーネントサマリー項目のサービスステータスを他のステータスに変更します。
• 並べ替え：カスタムフッターHTML項目にこちらのコードを追加し、ステータスページに並び替え項目を追加します。
• バナーテキストの変更：カスタムフッターHTML項目にこちらのコードを追加し、バナー内のデフォルトテキスト「すべてのコンポーネントが正常」からカスタマイズします。
• カスタムフッターの追加：ステータスページにフッターを追加するには、カスタムフッターHTML項目にこちらのコードを追加してください。
• サブスクライブボタン位置の変更：サブスクライブボタンの位置を変更するには、カスタムヘッダーHTML項目にこちらのコードを追加してください。
• バナーイメージの追加：こちらのコードを使用して、ステータスページにバナーイメージを追加します。カスタムヘッダーHTML項目にコードスニペットが配置されます。
• 外部ソースからのフォントロードの変更：エディターのカスタムCSS項目にこちらのコードを追加します。
• コンテナー色の変更：エディターのカスタムCSS項目にこちらのコードを追加します。
• 背景色の変更：カスタムヘッダーHTML項目にこちらのコードを追加します。
• コンポーネントの並べ替え：ステータスページのコンポーネントを並べ換えるにはこちらのコードを追加します。追加後、コンポーネント名と「data-sort」属性の重みづけが適用されて、並べ替えが発生していることを確認してください。