カスタマイズ用の CSS および JavaScript スニペット
長年の経験から、ステータス ページによく行われるカスタマイズの種類には一定のパターンがあることがわかってきました。これらの変更に必要な CSS や Javascript のスニペットを 1 つのリソースにまとめようと考えました。
Startup プランを利用している場合 (またはカスタム CSS のみにアクセスできる場合)、一部のカスタマイズは Javascript (カスタム HTML フィールドから使用できる) を使用する必要があるために実行できません。
表示する履歴の量を変更する
メイン ステータス ページで表示する履歴の日数を減らす
Startup プランを利用している場合は、数字を指定してそれ以降の日を非表示にすることで履歴の表示日数を減らせます。
Business プランを利用している場合は、数字を指定してそれ以降の日をページから削除することで履歴の表示日数を減らせます。
"/history" ページのリンクを削除する
Startup プランを利用している場合は、ユーザーを "/history" ページに移動させるリンクを非表示にします。
Business プランを利用している場合は、ユーザーを " /history" ページに移動させるリンクを完全に削除できます。
購読ボタンを変更する
購読ボタンを削除する
エンドユーザーが通知を購読する機能を削除する場合があります。
Startup プランを利用している場合は、購読ボタンを非表示にできます。
Business プランを利用している場合は、購読ボタンを完全に削除できます。
コンポーネント セクションを変更する
2 列レイアウトを使用する
コンポーネント ステータスのテキストによる説明の代わりに、アイコンを使用する 2 列のレイアウトに切り替えられます。
注意: 2 列のレイアウトは、コンポーネント グループの表示で問題を引き起こす可能性があります。コンポーネント グループを使用している場合は、グループの数を偶数にして並べて配置することをお勧めします。
コンポーネント ステータスの名前を変更する
さまざまなコンポーネント ステータスの名前をカスタマイズできます。たとえば、「運用中」を「すべて問題ありません」に変更できます。
[コンポーネント] セクションを [アクティブなインシデント] セクションの上に移動する
次のスニペットを [カスタム フッター HTML] フィールドに挿入します。
1
2
3
4
<script>
$('.components-section').insertBefore('.unresolved-
incidents');
</script>
その他の変更
「このページについて」の見出しを別のものに変更する
[カスタム HTML フッター] セクションで、次を追加します。
1
2
3
<script>
$('.text-section').find('h4').text('Text goes here')
</script>
すべての完了した定期メンテナンスを [過去のインシデント] リストで非表示にする
[カスタム HTML フッター] セクションで、次の jquery を追加します。
1
2
3
$('.incidents-list').find('.impact-
maintenance').parent().replaceWith($('<p class="color-
secondary">No incidents reported.</p>'));最上位のステータス バナーを変更する (デフォルトは [すべてのシステムは運用中です])
「置換テキスト」を、[すべてのシステムは運用中です] の代わりに表示するテキストに置き換えます。
1
2
3
4
5
<script type="text/javascript">
$( document ).ready(function() {
$("span.status:contains('All Systems Operational')").text('Replacement text');
});
</script>この内容はお役に立ちましたか?