Creative Exchangeの操作

Sitecoreエクスペリエンスアクセラレーター
前端
Creative Exchangeの操作
Creative Exchange を使用してサイトデザインを変更する

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

Version:

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

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

サイトの開発中は、Creative Exchangeを使用すると、チームが同時にサイト上で共同作業を行うことができます。Creative Exchangeを使用して書き出されたZIPファイルには、サイトのコンテンツ、構造、アセット、テーマが含まれています。

メモ

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

このZIPファイルをダウンロードして、ローカルフォルダからサイトのデザインに取り組み、チームにエクスポートし直すことができます。これにより、コンテンツ作成者はコンテンツに取り組み、デザイナーはサイトのルックアンドフィールに変更を加えることができます。

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

Media Libraryフォルダ内の画像とファイルを追加および変更します。
次の条件を満たすノードにクラスを追加します。 ">
レンダリングのイメージを変更します。

手記

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ファイル( Media Libraryフォルダ内)に画像を提供していることを確認します。レンダリングバリアントの場合、画像はデータ属性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">

レイアウトを変更する

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

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

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

<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 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に追加してインポートし直したクラスは、他のインスタンスで使用できます。

テキストレンダリングのスタイルを変更する

テキストレンダリングのスタイルを変更するには、クラスを追加します。

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

index.htmlファイルを開き、レンダリングのインスタンスに移動します。
クラスを追加します。たとえば、クラスhighlightedとheroを追加します。
新しいCSSクラスとスタイル設定をメインの .cssファイルに追加します。

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

この記事を改善するための提案がある場合は、お知らせください!