デザインが設定されているセレクタの探し方《Dress初級編》

BiNDupにおけるテンプレートのデザインを変更する際に、デザイン管理機能『Dress』で編集する事になりますが、「Dressのどこを編集すれば目的のデザインを変更出来るのか？」と云う質問を受ける事が多くあります。
今回は理屈抜きにして最も簡単にデザイン変更する方法を解説したいと思います。
理屈アリでじっくりお勉強したい方は、上級者向け記事をご覧下さい。

ここでは教材としてテンプレート『OMG inc.』を使用します。

設定箇所の抽出と変更方法

デザイン編集の基本的な流れとしては、

1. Dressを開く
2. 要素をクリックする
3. 編集する

となります。

ここでは例としてビルボード下の『大見出し』Missionの文字色を変更してみたいと思います。
さっそくDressを開いてみましょう。

要素（セレクタ）ごとに点線で囲まれているのが解ると思います。
文字色を変更したい要素を直接クリックすると右側の編集エリアに該当する設定一覧が表示されます。

この状態では多過ぎるので『文字色』ボタンで絞り込みます。

実際に大見出しが設定されているブロックエディタを開くと解るのですが、大見出しにリンクは設定されていません。
そうなると自ずとリンクが含まれているセレクタは候補から除外されます。

× タブブロック > 大見出し<h3> > リンク
× アコーディオンブロック > 大見出し<h3> > リンク
◯ メインエリア > 大見出し<h3>
× メインエリア > 大見出し<h3> > リンク

『メインエリア > 大見出し<h3>』をクリックすると文字色に赤いメインカラーが設定されている事が解ります。

この文字色を変更する事で、メインエリアに設定されている大見出しの文字色を一括で変更する事が出来ます。

デザイン修正の基本的な考え方は以上です。

絞り込みを活用しよう

設定項目を探すテクニックとして絞り込みを活用しましょう。

要素としては、

• 文字色
• 文字サイズ
• 枠線
• 背景色
• 背景画像

がありますので、それぞれ変更したい設定で絞り込んでみましょう。

如何でしたか？
Dressでのデザイン編集方法を最も簡単に解説してみました。
もちろんこの方法で解決出来ない場合も多々ありますが、まずはこの方法を最初に試してみて下さい。
慣れて来たら上級者向け記事をご覧頂き他の方法も習得して頂ければと思います。

Dressでできることをチェック