---
title: "Creative Exchangeを使ってサイトデザインを変更する"
slug: "change-a-site-design-using-creative-exchange"
abstract: "サイトのテーマは、すべてのレンダリングのスクリプトとスタイルで構成されています。"
---
# Creative Exchangeを使ってサイトデザインを変更する

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

> !注[Creative Exchange Live](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/modify-your-site-design-with-creative-exchange-live.html "Modify your site design with Creative Exchange Live")を使ってサイトのデザインを変更することもできます。Creative Exchange LiveはGulpのタスクに対応し、テーマやその他のコンテンツの変更やSitecore環境への即時同期を可能にします。

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

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

-   Media Libraryフォルダ内で画像やファイルを追加・編集できます。
-   以下を満たすノードにクラスを追加します: <!-- add your css classes here -->">
-   レンダリング画像を変更する。

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

## 画像を変える

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

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

-   index.htmlファイルで、<img>タグのアセットを変更します。例えば:
    
    <div class="component image logo">
     <div class="component-content">
     <a href="https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/index.html"><img src="https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/-/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="https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/-/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="https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/-/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を追加します。
    
    ![Class added](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/2C2981F166264965B82D3E70625CEEC5.png)
    
    ![Hero class added.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/D6B0D984AD66495D84D9C76E50F0BB0E.png)
    
3.  新しいCSSクラスとスタイリングをメイン .cssファイルに追加します:
    
    ![Add class and styling to main css.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/37B05EFB23E94ADE9ECE5AF13AA5BD2C.png)
    

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