ステータス ページでカスタム CSS を使用する

カスタム CSS を公開するためには、カスタム ドメインを設定 (例:status.companyname.com) する必要があります。

カスタム CSS が挿入される場所

[custom CSS (カスタム CSS)] フィールドに入力した内容は、ドキュメントの <head> に含まれる外部スタイル シートに配置されます。この外部スタイルシートはメインのスタイルシートの後に挿入されるので、必要に応じてスタイルを上書きできます。

ページのカスタマイズに役立つコード スニペットについては、カスタマイズ Cookbook をご確認ください。

クロスオリジン リクエストを有効化するため、ステータス ページでは X-Frame-Options などのセキュリティ ヘッダーを許可していません。

注目すべき既存の CSS クラス

初期設定で定義されている CSS クラスがいくつか用意しましたので、是非ご確認ください。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 // defines the width of the content .container { width: 90%; max-width: 850px; } // the default font-size used on the page .font-regular { font-size:1rem; // 16px line-height:1.5rem; @media screen and (max-width: 650px) { font-size:.875rem; // 14px line-height:1.3125rem } } .font-large { font-weight:500; font-size:1.25rem; // 20px; line-height:1.875rem; @media screen and (max-width: 650px) { font-size:1.125rem; // 18px; line-height:1.6875rem; } @media screen and (max-width: 450px) { font-size:1rem; // 16px line-height:1.5rem; } } .font-largest { font-weight:500; font-size:1.75rem; // 28px; line-height:2.625rem; @media screen and (max-width: 650px) { font-size:1.375rem; // 22px; line-height:2.0625rem; } @media screen and (max-width: 450px) { font-size:1.125rem; // 18px; line-height:1.6875rem; } }

 

その他のヘルプ