カスタムテーマを作成する

Version: 10.4
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

  • サイト テーマ (/sitecore/メディア ライブラリ/テーマ) – サイトのルック アンド フィールを担当するスクリプトとスタイルを含むブランディング テーマ。たとえば、レンダリングのスタイル設定(ナビゲーション、カルーセルなど)やレンダリング動作(必要な場合はカスタム動作)などです。

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

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

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

カスタムテーマを作成するには:

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

    • サイトの作成時にテーマを追加します。 Create a new Experience Accelerator siteダイアログ ボックスのThemeタブで、Create new themeチェック ボックスをオンにします。

      Create a new SXA site wizard dialog window.

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

      /sitecore/メディア ライブラリ/プロジェクト/<siteコレクションfolder>/<site collection>/<site>/サイト テーマ名

    • テーマを手動で追加します。<site collection>/siteメディア ライブラリ フォルダーの下にテーマを追加します。/sitecore/Media Library/Themes/Basicテーマのすべての子をコピーします。

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

      Add a theme using a script.

      Create a new Experience Accelerator site themeダイアログボックスで、テーマの名前を入力し、オプションで新しい場所を入力します。デフォルトでは、新しいテーマは /sitecore/Media Library/Project/<site collection folder>/<site collection>/<site>/<siteテーマname>に追加されます。

      メモ

      デフォルトでは、新しいテーマは /sitecore/Media Library/Themes/<site collection folder>/<site collection>/<site>/<site theme name> に保存されます。テーマ アイテムは、次のリリースで上書きされる可能性があるため、SXAルートの下に保存しないでください。

  2. デフォルトでは、新しいテーマには、フォント、画像、スクリプト、およびスタイルのフォルダが含まれています。 scriptsとstylesフォルダを使用して、CSSスタイルとJavaScriptを追加します。

    手記

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

  3. Internet Explorer Compatibilityセクションで、X-UA-Compatibleの値を設定します。この値は、Internet Explorerに特定のEditとPreview/Publicモードを使用してWebページをレンダリングするように強制します。たとえば、値をIE Edgeに設定すると、使用可能な最新のモードを使用できます。

  4. Themeセクションで、新しいテーマが継承するテーマを設定します。SXAテーマは多重継承をサポートしています。つまり、すべてのテーマに対して複数の親テーマを定義できます。

    手記

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

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

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

  6. Global Classesセクションでは、SXAグリッドに付属する標準の一部をオーバーライドし、フッター、ヘッダー、およびコンテンツのプレースホルダーを全幅に指定できます。

    OtherClassesフィールドでは、このテーマを使用して各ページのHTML bodyタグのclass属性にレンダリングする値を指定できます。

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

    • Flex – プレースホルダーが画面幅の100% を使用するように選択します。

    • Fixed – 選択すると、プレースホルダーはグリッド設定に従って固定幅が使用されます。たとえば、ブートストラップ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 container class - プレースホルダが行コンテナクラスの幅を使用するようにする場合に選択します。

  7. Viewportフィールドに、<meta>ビューポート要素を入力します。ビューポートは、デバイスによって異なるウェブページのユーザーの表示領域です。ビューポートは、<meta>タグを使用して制御できます。この <meta> viewport要素は、ページのサイズとスケーリングを制御する方法についてブラウザーに指示します。メタパーシャルデザインにビューポートレンダリングが含まれている場合、このフィールドの値を使用してこのメタタグが埋められます。例えば：

    ページ上に次の項目をレンダリングします。

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

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

    Mock Image - モック画像として表示する画像を指定します。フィールドを空のままにすると、画像は表示されません。

    Stretch Image - 選択すると、画像が全幅/全高に引き伸ばされます。

    Background Color - 画像の背景色をHTML HEX形式で指定します。フィールドを空のままにすると、背景は透明になります。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、