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

Version:

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

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

サイト開発中、Creative Exchangeはチームが同時に協力して作業できるようにします。Creative ExchangeでエクスポートされたZIPファイルには、サイトのコンテンツ、構造、資産、テーマが含まれています。

!注Creative Exchange Liveを使ってサイトのデザインを変更することもできます。Creative Exchange LiveはGulpのタスクに対応し、テーマやその他のコンテンツの変更やSitecore環境への即時同期を可能にします。

このZIPファイルをダウンロードして、ローカルフォルダからサイトのデザイン作業を進めてからチームにエクスポートできます。これにより、コンテンツ作成者はコンテンツ作業をしながら、デザイナーはサイトの見た目や雰囲気に変更を加えることができます。

Creative Exchangeからサイトを解凍した後、以下の変更を加えることができます:

!注HTML構造の変更、既存のクラスの削除、テキスト内容の変更、ベーステーマフォルダの変更はシステムに戻されず、サイトに悪影響を及ぼす可能性があります。

画像を変える

画像や画像バリアントレンダリングで使われる画像は、新しい画像へのリンクを貼ることで変更できます。

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

画像がCMSに存在するか、ZIPファイル(Media Libraryフォルダ内)に提供され、システムにインポートされることを確認してください。レンダリングバリアントの場合、画像はデータ属性としてリストdata-ceitemおよびdata-cefield。例えば:

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

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

レンダリングのスタイリング方法:

!注クリーンなCSSクラス構造を作るには、小文字を使い、複数の単語をつなげる場合はダッシュを付けてください。レンダリング用の追加のクラスは、レンダリング名から始まり、その後に機能を説明する名前を付けるべきです。例えば:

または:

.

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

レイアウトのスタイル化については:

!注行および列分割器の追加クラスは、columnまたはrow接頭辞で始まり、その機能を説明する名前を付けるべきです。例えば:

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

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

例えば、リッチテキストレンダリングとページリストレンダリングのスタイリングを変更したい場合は:

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

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