Dressデザインの編集

サイトデータ内の各項目に対し、Dressによるデザイン編集が行えます。
また、編集の際に色やテキストなど一括で全体を変更することも可能です。
メンテナンスやサイト内容の変更時に、修正をスムーズに行うことができます。
こちらではデザインの編集方法に関する詳細を解説いたします。

選択項目の表示

Dressを起動し、選択項目[１]タグをクリックすると、『項目が選択されていません』と表示されます。
こちらの画面には、プレビューでクリックした箇所のラベルに設定されているDress設定[２]が表示されます。

基本設定

Dressカラーの設定が行えます。
ページ、またはブロックに全体の基本的なスタイルの設定も可能です。

Dressカラーが編集可能な項目はページDressのみとなります。ブロックDressでの設定は行なえません。

Dressカラー

Dressでメインカラーを１個、サブカラーを５個設定が可能です。
設定の詳細はこちらをご参照ください。

ページデザイン

テキスト[１]と背景[２]の下記Dress項目を編集できます。
【文字色】【文字サイズ】【フォント】【リンクカラー】【背景】

設定例

本文/タイトル/大見出し/小見出し/リード/囲み/ページタイトル

各項目の下記Dress項目を編集できます。設定内容は各所共通となります。
【文字色】【文字サイズ】【フォント】

また、「より詳しく設定」をクリックし、「高度な設定を表示」を有効にすることで、詳細のDress項目も追加可能となります。

複雑なCSS設定が行われますので、多数設定することによりレイアウトが崩れる可能性もございます。定期的にサイトデータの複製などを行われるよう推奨いたします。

設定例

選択項目

プレビューエリアのラベルを選択した時に関連する項目を編集可能です。

選択中ラベル

プレビューで選択中のラベル名が表示されます。

スタイル選択

デザインの編集スタイルが選択可能です。

【基本デザイン】
選択した項目をデザインするために必要な最低限の項目を表示。
こちらに表示される項目はプロパティも含め固定なので、追加・削除は行なえません。

【詳細デザイン】
選択した項目に対してスタイルが設定済みの項目を一覧表示し、各項目の追加・削除が可能です。

選択中の項目に紐づいたスタイルだけを追加できます。

絞り込み

自由入力で項目名を検索し絞り込むことができます。

設定中項目

現在設定中の項目名が表示されます。項目名をクリックすることで、その項目名に該当する設定のみ表示させることができます。

デバイス選択

各アイコンから設定するデバイスを選択できます。
PC表示とスマホ表示の内容を別途設定されたい場合は、各デバイス毎に別の設定を行うことで可能です。
【共通の設定】
【モバイル向けの設定】
【まとめて表示】

表示順

各設定の表示順をプルダウンメニューから選択できます。

設定中のDress項目

現在選択しているラベル内に設定されているDress項目が表示されます。

項目削除

ラベル内に設定されているDress項目を削除できます。複数選択して一括削除も可能です。

項目追加

詳細な指定をして設定を追加することができます。

詳細設定

編集中のDressに設定されている項目を全て表示します。
項目は自由に追加・削除が可能です。設定済みのスタイルのみ表示され、追加・削除が可能です。

絞り込み

自由入力で項目名を検索し絞り込むことができます。

設定中項目

現在設定中の項目名が表示されます。項目名をクリックすることで、その項目名に該当する設定のみ表示させることができます。

デバイス選択

【共通の設定】【モバイル向けの設定】【まとめて表示】から選択できます。

表示順

各設定の表示順をプルダウンメニューから選択できます。

項目削除

ラベル内に設定されているDress項目を削除できます。複数選択して一括削除も可能です。

項目追加

詳細な指定をして設定を追加することができます。

スマホサイトの編集

選択項目、または詳細設定のデバイスアイコンより、スマホアイコンを選択することで、スマホを対象としたDress設定が可能です。

また、各Dress設定内のモバイル向けの設定を有効にすることでもスマホのDress設定が可能です。

スマホ表示のプレビューを確認される場合は、Dress上部のスマホサイズでプレビューをクリックすることで切替が可能です。

設定例

ブログのデザイン編集

ブログのデザインを編集する場合、詳細設定より、項目追加[１]をクリックし、ブログ[２]を選択することで各ブログ項目の編集が可能です。

設定例