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

Version: 10.1

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

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

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

注記

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

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

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

メディアライブラリフォルダー内の画像とファイルを追加して変更する。
"> を持つノードにクラスを追加する。
レンダリングの画像を変更する。

注記

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

画像を変更する

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

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

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

RequestResponse

<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 としてリストされます。次に例を示します。

RequestResponse

<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 を追加して、すべてのページの画像を強制的に変更することもできます。

RequestResponse

<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 ファイルのレイアウトやレンダリングのスタイルを設定するクラスを割り当てることができます。

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

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

RequestResponse

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

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

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

RequestResponse

<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">

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

RequestResponse

<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 ファイルを開いて、サイトのローカルインスタンス上で変更内容をプレビューします。

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

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

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

画像を変更する

レイアウトを変更する

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

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