ヘッダー

ヘッダーは、ダッシュボードの上部に沿った予約済みの領域であり、ダッシュボードに一意の識別情報を提供し、コーポレート ブランディング標準を適用し、リンクを追加コンテンツに提供するために使用できます。 ヘッダーは、1 つ以上のセレクターをホストするために、対話式ダッシュボードで使用することもできます。 ダッシュボードはヘッダーを 1 つだけ持つことができ、ヘッダーはダッシュボードの幅全体を常に占めるように設計されています。

ヘッダー エレメント

ヘッダーは、2 つのサイズ (小または大) のいずれかにすることができます。 ヘッダーのサイズは、そのヘッダーの構成方法と内容によって異なります。 たとえば、ヘッダー内でサブタイトルがタイトルと同じ行に配置されている場合、そのヘッダーのサイズは小になります。 サブタイトルがタイトルの下に配置されている場合、そのヘッダーのサイズは大になります。 ヘッダーにロゴが含まれている場合は、ロゴのサイズによってヘッダーのサイズが決まります。 少なくとも 1 つのセレクターが含まれているヘッダーは常に大になります。

ヘッダーにロゴを含めるには、URL で画像を参照するか、アイコンを使用します。 ヘッダーのロゴの URL は、スケーラブル ベクター グラフィックス (*.svg) ファイルを指すことができます。 その場合、画像は、ヘッダーのサイズに合わせて自動的に拡大/縮小されます。 その他の画像フォーマットを使用する場合、以下の寸法が推奨されます。 推奨サイズよりも大きい画像は縮小されますが、推奨サイズよりも小さい画像は拡大されません。

以下の表に、ヘッダーのサイズの高さ、およびこれらのヘッダーに挿入するためのロゴの推奨される寸法を示します。

ヘッダー サイズヘッダーの高さ (px)ロゴの寸法 (px)

44

24x24

63

48x48

ヒント:

ヘッダーの代替として、ダッシュボード全体でリッチ テキスト エレメントを使用できます。 リッチ テキスト エレメントは、ヘッダーのサイズおよび位置の制限に従うエレメントが不要な場合に、役立つことがあります。 たとえば、リッチ テキスト エレメントを使用して、ダッシュボード内の異なるセクションに明確にマークを付けることができます。

URL を使用する場合は、以下の点に注意してください。

  • URL 参照には、HTTPS を使用します。 HTTPS 接続が可能でない場合は、HTTPSHTTP も指定しない相対 URL の使用を検討してください。 たとえば、//www.example.com/logo.png を使用します。
  • 上記の注意に従わない場合、組織サイトの機能を利用して、画像ファイルをアイテムとして組織サイトのコンテンツに追加することを検討してください。 新しいアイテムを追加した後に、そのアイテムをすべてのユーザーと共有します。 これによって、ダッシュボードで使用できる画像のアイテムの詳細ページの URL が生成されます。
  • この URL がユーザー以外のドメインを参照している場合は、リクエストされたリソースをホストしているサーバーがユーザーのドメインからの CORS リクエストに対応できるようにすることをお勧めします。