ポータルスタイルの定義

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

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

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

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