Dressデザインの編集【詳細設定】

Dressは、より細かく項目を指定した設定が優先的に使用されます。
こちらでは、特定のエリアのプレーンブロック内の文字色を設定されたいといった際の、
Dressの詳細な項目の設定方法や、Dressのスタイル追加について解説します。

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

選択項目

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

画面上部の『ラベルを表示』をクリックすると、プレビュー画面に表示されるラベルを切り替えることができます。

ラベルの詳細なデザインを設定する際は、詳細デザイン[１]タグをクリックすると、ラベルの詳細なDress設定が表示されます。
Dress設定の各項目は、自由入力で項目名の絞り込み[2]、デバイス選択や表示順[3]の変更ができます。また、項目の追加[4]を追加することができます。

詳細設定の編集

詳細設定タブ[１]タグをクリックすると、プレビューでクリックした箇所のラベルに設定されている選択項目の一覧が表示されます。

各項目をクリックすると、その項目に設定されている『スタイル一覧』が表示されます。
「高度な設定を表示」[１]を有効にすることで、詳細なDress項目が表示されます。
[2]をクリックすると項目の追加ができます。

・設定例

プレビューエリアの編集

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

選択中ラベル

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

スタイル選択

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

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

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

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

絞り込み

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

設定中項目

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

デバイス選択

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

表示順

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

設定中のDress項目

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

項目削除

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

項目追加

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

項目の編集

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

絞り込み

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

設定中項目

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

デバイス選択

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

表示順

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

項目削除

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

項目追加

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

スマホサイトの編集

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

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

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

設定例

ブログのデザイン編集

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

設定例