ポータルスタイルの定義

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間:2分
  • ページは、コンテナ、列、行、ウィジェット、およびウィジェットのインスタンスで構成されます。各コンポーネントの CSS を設定するか、テーマと自社用カスタム設定で定義された CSS をポータルのグローバル定義として使用できます。テーマや自社用カスタム設定に CSS を定義しない場合は、ブートストラップのデフォルトが使用されます。

    ポータル内の CSS を複数のレベルで定義できます。

    ブートストラップのデフォルト

    他の CSS が定義されていない場合、すべての要素はブートストラップ バージョン 3.3.6 のデフォルトを使用します。ブートストラップ CSS ヘルパークラス は、CSS を値として受け入れる任意の サービスポータル フィールドで使用できます。サービスポータル コンテナーを表示/非表示するには、visible-lghidden-md などの ブートストラップ CSS レスポンシブユーティリティヘルパークラスを使用します。

    自社用カスタム設定エディタのテーマ カラー/ポータル CSS

    ブランディングエディターの [テーマの色] タブで定義された CSS。ブランディングエディターでテーマの色に加えられた変更は、ポータルテーブル [sp_portal] の [CSS 変数] フィールドに表示されます。テーマの色をカスタマイズすると、ブートストラップのデフォルトが上書きされます。

    クイック セットアップ タブとテーマ プレビューを表示する、自社用カスタム設定エディターの UI です。

    テーマ CSS

    テーマテーブル [sp_theme] の CSS 変数フィールドに定義された CSS です。将来的にポータルをより柔軟に進化させるためには、テーマCSS を可能な限り使用してください。

    テーマを使用すると、ポータル CSS/ブランディングエディターのテーマの色が上書きされます。

    ページの CSS

    ページ テーブル [sp_page] の [ページ固有の CSS] フィールドで定義された CSS です。

    ページ固有の CSS はテーマ CSS を上書きします。

    CSS クラス

    それぞれのレコード内のページに CSS クラス要素を定義することができます。

    ウィジェット CSS

    ウィジェット テーブル [sp_widget] の CSS フィールドで定義された CSS です。

    ウィジェット CSS は、コンテナ、列、行の CSS を上書きします。

    ウィジェット インスタンス CSS

    インスタンス テーブル [sp_instance] の CSS フィールドで定義された CSS です。

    ウィジェット インスタンス CSS は、他のすべての CSS 定義を上書きします。

    注:
    場合によっては、アクセシビリティのデフォルトスタイルによって、ポータルに定義された CSS が上書きされることがあります。
    図 : 1. サービスポータルにおけるスタイル アプリケーションの階層
    サービスポータル CSS の上書きを示す図