サポートサイト

Dressでは、サイトのカラーデザインやコンテンツの位置など、デザインの編集、調整を行えます。Dressを利用・編集するには、下記のいずれかの手順が必要です。

・新規でDressテンプレートを作成する
・既存のDressテンプレートを適用する
・既存のDressテンプレートを複製し、カスタマイズを加え利用する

Dressで起動する

まず、新規でDressテンプレートを作成する手順を案内します。
サイトエディタで〈サイトDress〉アイコンをクリックし、〈Dressを選ぶ〉を選択します。

〈現在のDressを編集〉を選ぶと、手順5「編集画面の構成」の画面へアクセスし、すぐに編集を開始することも可能です。

新規のDressテンプレートの作成

新規でDressテンプレートを作成する場合は〈新規作成〉をクリックします。

〈テンプレート名〉に名称を入力し［1］、必要に応じて〈説明文〉を入力して［2］、〈OK〉をクリックします［3］。

〈このサイト〉にDressテンプレートが追加されました。

〈このサイト〉の項目内には、編集中のサイトで利用中のDressテンプレートのみ表示されます。他のサイトでもそのDressテンプレートを利用したい場合〈ユーザー設定に保存〉を選択し[1]、適用[2]してください。

既存のDressテンプレートを適用する

つぎに、既存のDressテンプレートを適用する方法です。
使いたい既存Dressを選択し[1]、〈適用〉をクリックする[2]、もしくはもう一度Dressテンプレートをクリックすると、選択中のDressが適用されます。

〈このサイト〉の項目を確認する[1]と、既存のDressが選択されていますので、〈テンプレートを編集〉をクリックし[2]、編集することができます。

既存のDressテンプレートを複製し、カスタマイズを加え利用する場合は、適用前にDressテンプレートを選択し［1］、〈複製〉アイコンをクリック［2］することで、編集可能となります。

複製したDressは、「ユーザー設定」タブに生成されます。

Dressの編集画面の表示

編集したいDressの〈テンプレートを編集〉をクリックします。

編集画面の構成

Dressの編集画面が開きます。ここでは、プレビューで確認しながらデザインを設定できます。

プレビュー

デザインが確認できます。

〈編集中のページでプレビュー〉

チェックを入れると編集中のページのイメージでプレビューできます。初期設定ではチェックが入っています。

〈モードの切り替え〉

「選択モード」「設定一覧」の切り替えが行えます。

「選択モード」では、実際にDressの要素などを設定します。
「設定一覧」では、設定済みのDressの項目一覧が表示されます。

カラーホイール

Dressテンプレート全体の色調は、3色で構成されます。「カラールール」を選択し、カラーホイールをドラッグするか、パレットで直接指定します。また、カラールールや配色パターンから選択も可能です。

カラールールの種類

・〈類似色〉は選択した色に近い2色が設定されます。

・〈トライアド〉は選択した色から、バランスの良い2色が設定されます。

・〈補色〉は選択した色と対照的な2色が設定されます。

・〈カスタム〉は自由にお好みの3色を選択できます。

配色パターンの種類

※選択中のカラーホイールの色合いに応じて、下記のように変化します。

・〈シンプル〉は文字通りスタンダードなパターンです。

・〈シンプル（反転）〉はシンプルをベースに、色合いを反転させています。

・〈ライト〉は明るめの色合いで表示されます。

・〈ダーク〉は全体的に暗めの色合いで表示されます。

・〈パステル〉は全体的に淡い色合いで表示されます。

カラーホイールで設定した内容は、項目C「設定一覧」には表示されません。

〈デバイス切替〉

プレビューを「PC専用サイト」「スマホ専用サイト」に切り替えられます。

〈適用範囲〉

サイト内のどのエリアに適用するかを選択します。

サイトやページ全体のDressを適用時のみ有効となります。ブロックDressを利用している場合、選択中のブロックのあるエリアのみ有効となります。例として、サイドエリア内のブロックのブロックDressの編集内容は、ヘッダーエリアには適用されません。

〈選択中の項目〉

Dressを適用する場所が表示されます。右上の鉛筆のアイコンをクリックすることで、ブロックやカラム、パーツなど、「Dressを適用する箇所」を選択できます。

〈デザイン設定〉

実際にDressの要素を設定する範囲です。

〈戻る/保存〉

設定をキャンセルする場合は〈戻る〉、設定を適用する場合は〈保存〉をクリックします。

編集した内容を保存する

Dressの編集終了後〈保存〉をクリックし［1］、〈戻る〉をクリックします［2］。

Dressテンプレートが保存されました。

〈このサイト〉[1]から作成したDressを確認できます。
また、作成したDressテンプレートを選択し、〈Dressを解除〉[2]をクリックすると該当のDressを解除できます。〈ユーザー設定に保存〉を選択[3]すると、他のサイトでも、作成済みのDressを使用できます。