ポータル テーマを作成する

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む4読むのに数分

    • 自社用カスタム設定エディターに用意されているよりも多くのカスタマイズが必要な場合は、独自のカスタム テーマを作成できます。

    CSS を理解しているユーザーだけがカスタム テーマを作成する必要があります。

    1. 移動先 サービスポータル > テーマをクリックし、[ 新規] を選択します。
    2. フォーム フィールドに入力し、フォームのコンテキスト メニューから [保存] を選択します。
      表 : 1. テーマ フォームのフィールド
      フィールド 説明
      名前 テーマの名前です。この名前を使用して、ポータルにテーマを関連付けます。この名前はユーザーには表示されません。正しいテーマをポータルに適用するには、この名前を知っておく必要があります。
      SCSS コンパイルをオフにする SCSS のコンパイルをオフにして、プレーンな CSS ファイルをクライアントに直接送信します。
      アプリケーション

      レコード スコープです。ヘッダー メニュー レコードとソース テーブルには、同じアプリケーション スコープが必要です。
      ヘッダー ポータル テーマに関連付けることができる sp_header_footer テーブルのヘッダーとフッターのリストです。ヘッダーとフッターはウィジェットで、同じ方法で構成できます。
      フッター ポータル テーマに関連付けることができる sp_header_footer テーブルのヘッダーとフッターのリストです。
      固定ヘッダー ユーザーがスクロールしたときにヘッダーが画面上に残るようにヘッダーをページの上部でロックします。
      固定フッター ユーザーがスクロールしたときにフッターが画面上に残るように、ページの下部にフッターをロックします。
      CSS 変数 ポータルの色とスタイルを変更するために使用できる CSS カスタム プロパティです。たとえば、株のテーマでは次の変数のいくつかが使用されます。
      $sp-logo-margin-x: 		15px !default;
$sp-tagline-color:		$text-color !default;
$navbar-inverse-bg: 	#3a3f51 !default;
      注:
      [CSS 変数] フィールドを使用して CSS 変数のみを定義します。CSS ルールを定義するには、CSS インクルードを使用します。Madrid リリースの時点で、Sass および LESS を CSS インクルード内で使用できます。
    3. テーマにスタイル シートを追加するには、[ CSS インクルード ] 関連リストで [新規] を選択します。
    4. スタイルシートフォームのフィールドに入力し、[ 送信] を選択します。
      表 : 2. スタイル シート フォーム フィールド
      フィールド 説明
      名前 CSS インクルードの名前です。CSS インクルードをテーマに関連付けるには、この名前を覚えておいてください。
      アプリケーション レコード スコープです。ヘッダー メニュー レコードとソース テーブルには、同じアプリケーション スコープが必要です。
      ソース 次のオプションのいずれかを選択します。
      • スタイル シート：CSS テーブル [sp_css] にアップロードされた内部スタイル シートを追加します。例：ng-sortable.min.css。内部スタイル シートは、CSS フィールドの標準 CSS を使用します。
      • URL：外部スタイル シートにリンクします。企業の Web サイトや他のオンライン リソースと同じ CSS を使用するには、外部スタイル シートを使用します。
      スタイルシート テーマに関連付ける内部スタイルシート。
      CSS ファイル URL テーマに関連付ける外部スタイル シートの URL。
      遅延ロード

      CSS インクルードを非同期にロードしてページのロード時間を短縮するオプション。このオプションはテーマのすべての CSS インクルードに対して同じ値に設定する必要があります。テーマに関連付けられた一部の CSS インクルードに対してのみ非同期ロードを有効にすることはお勧めしません。

      注:
      スタイル設定されていないコンテンツが点滅しているポータルで [遅延ロード] を有効にすることはお勧めしません。

      [遅延ロード] が有効になっている CSS インクルードは、テーマレコードの [遅延ロード CSS インクルード] 関連リストに一覧表示されます。
      RTL CSS ファイル URL

      セッション言語がヘブライ語などの右から左に記述する言語である場合に、ポータルの方向をミラーリングするための外部スタイルシートの URL。

      右から左に記述する言語のサポートについては、を参照してください ポータルの右から左に記述する言語のスタイル。
    5. テーマに JavaScript インクルードを追加するには、 JS インクルード 関連リストで 新規 を選択します。
    6. [JS インクルード] フォームフィールドに入力し、[ 送信] を選択します。
      表 : 3. JS インクルードフォームフィールド
      フィールド 説明
      表示名 JS インクルードの名前。JS インクルードをテーマに関連付けるには、この名前を覚えておいてください。
      アプリケーション レコード スコープです。ヘッダー メニュー レコードとソース テーブルには、同じアプリケーション スコープが必要です。
      ソース 次のオプションのいずれかを選択します。
      • UI スクリプト：UI スクリプト テーブル [sys_ui_script] にアップロードされた内部 UI スクリプトを追加します。UI スクリプトを使用すると、クライアント側 JavaScript を作成し、複数の場所で再利用することができます。UI スクリプトの詳細については、「 UI スクリプト」を参照してください。
      • URL：外部の JavaScript ファイルにリンクします。企業のウェブ サイトや他のオンライン リソースと同じ JavaScript を使用するには、外部 URL を使用します。
      UI スクリプトまたは JS ファイル URL [ソース] フィールドで選択したオプションに応じて、内部 UI スクリプトまたは JavaScript ファイル URL を関連付けます。
      更新日時 JS インクルードが最後に更新された日時です。
      パッケージ JS インクルードが関連付けられているサービス ポータル パッケージです。例：[サービス ポータル設定] ページ。このフィールドはデフォルトで設定されます。