カスタム テーマの作成

Current version: 10.1

テーマはサイトのルック アンド フィールを定義し、サイトの機能やコンテンツとは別に作成できます。デフォルトでは、SXA には 2 種類のテーマがあります。

  • サイト テーマ (/sitecore/メディア ライブラリ/テーマ): サイトのルック アンド フィールを決定するスクリプトとスタイルが含まれているブランディングのためのテーマ。たとえば、レンダリングのスタイル (ナビゲーション、カルーセルなど) やレンダリングの動作 (カスタムの動作が必要な場合) などがあります。

  • ベース テーマ (/sitecore/メディア ライブラリ/Base Themes): より複雑な機能を提供するスクリプトとスタイルが含まれている基盤となるテーマ。たとえば、Bing 地図/Google マップ コネクタ、コア ライブラリ (jquery、lo-dash)、編集エクスペリエンスに影響を与えるスクリプト (付箋、編集テーマ、ドラッグ アンド ドロップ、パーシャル デザインの強調表示) などの共通機能があります。

スタイル、スクリプト、画像、フォントなどの独自のクラスやアセットを追加するには、新しいサイト テーマを作成することができます。カスタム テーマは、SXA CLI を使用して作成できます。

このトピックでは、ベース テーマのコピー、サイト ウィザードの使用、スクリプトの使用によるカスタム テーマの作成方法について説明します。

カスタム テーマを作成するには、次の手順に従います。

  1. 次のいずれかの方法で新しいテーマを追加します。

    • サイトを作成するときにテーマを追加します。[新しい SXA サイトを作成] ダイアログ ボックスの [テーマ] タブで、[新しいテーマを作成] チェックボックスをオンにします。

      新しい SXA サイトの作成ウィザードのダイアログ ウィンドウ。

      メディア ライブラリのサイトのフォルダーに新しいテーマが追加されます。

      /sitecore/メディア ライブラリ/Project/Tenant Folder/Your Tenant/Your Site/Site Theme Name

    • テーマを手動で追加します。tenant/site media library フォルダーにテーマを追加します。/sitecore/メディア ライブラリ/テーマ/Basic theme のすべての子をコピーします。

    • スクリプトを使用してテーマを追加します。SXA には、新しいテーマを作成するヘルパー スクリプトが含まれています。サイトを右クリックし、[スクリプト] をクリックして、[新規サイト テーマ] をクリックします。

      スクリプトを使用してテーマを追加します。

      [新しい SXA サイト テーマを作成] ダイアログ ボックスで名前を入力し、必要に応じてテーマの新しい場所を入力します。デフォルトでは、新しいテーマは /sitecore/メディア ライブラリ/Project/Tenant Folder/Your Tenant/Your Site/Site Theme Name に追加されます。

      新しい SXA サイト テーマの作成ダイアログ ボックス。
      注記

      デフォルトでは、新しいテーマは /sitecore/メディア ライブラリ/Project/Tenant Folder/Your Tenant/Your Site/Site Theme Name に保存されます。次のリリースで上書きされる可能性があるため、SXA のルートの下にテーマ アイテムを保存しないでください。

  2. デフォルトでは、新しいテーマには fontsimagesscriptsstyles フォルダーが含まれています。scripts フォルダーと styles フォルダーを使用して、CSS のスタイルと JavaScript を追加します。

    注記

    fonts フォルダーはオプションであり、フォント アセットを整理する方法の例です。image フォルダーもオプションですが、一部の CSS では設定するパスに画像の参照を使用できます。

  3. [インターネット エクスプローラー互換モード] セクションで、X-UA-Compatible の値を設定します。この値は、Internet Explorer に特定の編集およびプレビュー/パブリック モードを使用して Web ページをレンダリングするように指定します。たとえば、値を IE Edge に設定すると、使用可能な最新の最上位のモードを使用できます。

  4. [テーマ] セクションで、新しいテーマが継承するテーマを設定します。SXA のテーマは、多重継承をサポートしています。これは、1 つのテーマごとに複数の親のテーマを定義できることを意味します。

    注記

    選択したベース テーマの順序は重要です。新しいものを追加したり、順序を変更したりするときは注意してください。たとえば、SearchTheme が Core Libraries にある jquery ライブラリに依存している場合は、SearchTheme が他のテーマの後に読み込まれるようにする必要があります。

    新しいベース テーマを作成した場合やテーマを変更したくない場合は、[保護されたテーマ] をオンにします。これにより、テーマが変更から保護されている場所のリストに追加され、Creative Exchange のインポート機能によるテーマの更新が防止されます (Sitecore.XA.Feature.CreativeExchange.config: experienceAccelerator/creativeExchange/restrictedLocations)。

  5. 画像をワイヤーフレーム画像に変換する場合は、[ワイヤーフレーム画像をサポート] チェック ボックスをオンにします。

  6. [グローバル クラス] セクションでは、SXA のグリッドの標準の一部をオーバーライドし、フッター、ヘッダー、コンテンツのプレースホルダーが最大の幅になるように指定できます。

    [その他のクラス] フィールドでは、そのテーマを使用する各ページの HTML body タグの class 属性に設定する値を指定できます。

    [プレースホルダー設定] フィールドでは、プレースホルダーの HTML 要素に追加する css のクラスを決定します。ヘッダー、メイン、フッターで次のオプションを選択できます。

    • [Flex]: 選択すると、プレースホルダーは画面の幅を 100% 使用します。

    • [Fixed]: 選択すると、プレースホルダーはグリッドの設定に従って固定の幅を使用します。たとえば、Bootstrap 4 では、以下のブレークポイントが含まれています。

      RequestResponse
       // Small devices (landscape phones, 576px and up)
      
      @media (min-width: 576px) { ... }
      
       
      
      // Medium devices (tablets, 768px and up)
      
      @media (min-width: 768px) { ... }
      
       
      
      // Large devices (desktops, 992px and up)
      
      @media (min-width: 992px) { ... }
      
       
      
      // Extra large devices (large desktops, 1200px and up)
      
      @media (min-width: 1200px) { ... }
      
      )
    • [Row class]: 選択すると、プレースホルダーは row クラスの幅を使用します。

    • [Row container class]: 選択すると、プレースホルダーは row container クラスの幅を使用します。

  7. [ビューポート] フィールドでは、<meta> ビューポート要素を入力します。ビューポートは、Web ページがユーザーに表示される領域で、デバイスによって異なります。<meta> タグを使用して、ビューポートを制御できます。この <meta> ビューポート要素は、ページのサイズと拡大縮小を制御する方法をブラウザーに指示します。メタ パーシャル デザインにビューポートのレンダリングが含まれている場合、このフィールドの値はその meta タグに入力するために使用されます。以下に例を示します。

    ページに以下をレンダリングします。

    <meta name="viewport" content="viewport_value">

  8. 画像のプレースホルダーでモック画像を使用する場合は、[ワイヤーフレーム画像] セクションに移動して、次のフィールドに入力します。  

    [モック画像]: モック画像として表示する画像を指定します。このフィールドを空白のままにすると、画像は表示されません。

    [画像を拡大] 選択すると、画像が最大の幅/高さに拡大されます。

    [背景色]: 画像の背景色を HTML の 16 進数形式で指定します。このフィールドを空白のままにすると、背景は透明になります。

Do you have some feedback for us?

If you have suggestions for improving this article,