Creative Exchange を使用してサイトのデザインを変更する

概要

サイトのテーマは、すべてのレンダリング用のスクリプトとスタイルで構成されます。

サイトの開発に Creative Exchange を使用すると、チームはサイトで同時に共同作業ができます。Creative Exchange を使用してエクスポートされた ZIP ファイルには、サイトのコンテンツ、構造、アセット、およびテーマが含まれます。

注記

また、Creative Exchange Live を使ってサイトのデザインを変更することもできます。Creative Exchange Live は、Gulp タスクと連携してテーマやその他のコンテンツを変更し、即座に Sitecore 環境に同期できます。

この ZIP ファイルをダウンロードし、ローカル フォルダーでサイトのデザインの作業を行ってから、エクスポートしてチームに戻すことができます。これにより、コンテンツ作成・責任者がコンテンツの作業を進める間に、デザイナーがサイトのルック アンド フィールを変更できます。

Creative Exchange からサイトを解凍し、以下の変更を行なうことができます。

  • メディア ライブラリ フォルダー内の画像とファイルを追加して変更する。

  • <!-- add your css classes here -->"> を持つノードにクラスを追加する。

  • レンダリングの画像を変更する。

注記

HTML 構造への変更、既存のクラスの削除、テキスト コンテンツの変更、およびベース テーマのフォルダーの変更は、システムにインポートして戻すことはできず、サイトに損傷を与える可能性があります。

画像および画像バリアントのレンダリングで使用されている画像は、新しい画像にリンクすることで変更できます。

画像レンダリングの画像を変更するには:

  • index.html ファイルで、<img> タグのアセットを変更します。次に例を示します。

    <div class="component image logo">
        <div class="component-content">
            <a href="index.html"><img src="-/media/Themes/SXA/Images/coglogo.png" alt="coglogo" width="206" height="81" /></a>
        </div>
    </div>
    

画像が CMS 内にあることを確認します。または、システムに再インポートする ZIP ファイル (メディア ライブラリ フォルダー内) で画像を提供します。レンダリング バリアントの場合、画像はデータ属性の data-ceitem および data-cefield としてリストされます。次に例を示します。

<img src="-/media/showcase-group/wireframe-mvc/int/003.png" alt="my third image" data-ceitem="{590D99E0-9098-47FF-8CBB-6F7FCFD5CB12}" data-cefield="SummaryIcon">

変更する画像が複数のページで使用されている場合は、コードですべてのページを変更する必要があります。そうしないと、エンジンは画像をインポートしません。また、URLに #important を追加して、すべてのページの画像を強制的に変更することもできます。

<img src="-/media/showcase-group/wireframe-mvc/int/003.png#important" alt="my third image" data-ceitem="{590D99E0-9098-47FF-8CBB-6F7FCFD5CB12}" data-cefield="SummaryIcon">

/media/themes/ の JS ファイルや CSS ファイルのレイアウトやレンダリングのスタイルを設定するクラスを割り当てることができます。

レンダリングのスタイルを設定するには:

  • 変更するレンダリングを見つけて、クラスを追加します。

    <div class="component component-name  {source-item-guid} {unique-rendering-instance-guid} {Styles} add-your-css-classes-here <!—- ADD YOUR CSS CLASSES HERE -->">
      <div class="component-content">
          <!-- component specific mark-up -->
      </div>
    </div>
    

注記

CSS のクラス構造を見やすくするために、小文字を使用し、複数の単語をダッシュでつなぎます。レンダリング用の追加クラスは、レンダリング名の後に、機能を表す名前を続けます。次に例を示します。

<div class="component carousel {guid} {guid} {Styles} carousel-homepage">

または

<div class="component navigation {guid} {guid} {Styles} navigation-main-horizontal">.

SXA ページは、スプリッターを使用して行と列に分割されます。スプリッターは、独自のクラスのリストを持つことができます。

レイアウトのスタイルを設定するには:

  • 行スプリッターを見つけて、クラスを追加します。

    <div class="row {guid} {guid} {Styles1} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>
    <div class="row {guid} {guid} {Styles2} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>
    

注記

行や列のスプリッターの追加クラスは、column または row のプレフィックスで始め、機能を説明する名前を続けます。例: <div class="row row-logo">

  • 行スプリッターを見つけて、クラスを追加します。

    <div class="alpha grid-3 {guid} {guid} {Styles1} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>
    <div class="omega grid-5 {guid} {guid} {Styles2} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>
    

注記

SXA に追加してインポートし直したクラスは、他のインスタンスでも使用できます。

クラスを追加することで、テキスト レンダリングのスタイルを変更できます。

たとえば、リッチ テキスト レンダリングとページ リスト レンダリングのスタイルを変更する場合は、次のようにします。

  1. index.html ファイルを開き、レンダリングのインスタンスに移動します。

  2. クラスを追加します。たとえば、highlighted クラスと hero クラスを追加します。

    クラスの追加
    Hero クラスの追加。
  3. 新しい CSS クラスとスタイリングをメインの .css ファイルに追加します。

    メイン css にクラスとスタイルを追加します。

index.html ファイルを開いて、サイトのローカル インスタンス上で変更内容をプレビューします。