Dressの設定箇所を知りたい方へ。「目指せ、装飾王への道・２」

Dressの攻略シリーズ第2弾です。オカベです。
1回目ではDressを使いこなす近道として、CSSの仕組みについて簡単にご紹介させていただきましたが、今回はDressの設定箇所の探し方についてです。
カスタマイズの際に設定箇所がわからなくてはどうにもならないと思いますのでお役立てください。

Dressで設定項目を確認する

まずは「デザイン編集」をクリックしDressを起動します。

セレクタ選択機能

Dressには画面左側にプレビュー画面があるかと思いますが、実はこの画面上で設定したい要素（例：タイトル）をクリックすると、その要素に関する設定済みDressの一覧が表示されます。
一覧にはエリアやブロック毎で微調整したような細かい設定も表示されるので、設定済みDressを簡単に見つけることができます。

プレビュー画面でタイトル要素をクリック

そしてこの機能は要素だけでなく、ヘッダーエリアやフッターエリアなどのエリア全体、プレーンブロックや目次ブロックといったブロック単位での設定箇所の検索もすることができます。
画面上部「ラベルを表示」の「▼」をクリックすると、調査対象を切り替えることができます。

ブロックの選択に切り替える

【上級】ブラウザの検証モードで設定済みのCSSを調べる

今までご説明した通り、正しいCSSの場所を指定をしてあげることがDress攻略の鍵となります。
設定箇所については基本的には上述のDressのセレクタ選択機能で問題ないかと思いますが、申し訳ない事に設定によってはそれだけでは上手く見つからない場合もあります。

そこで少し難しくなってしまいますが、皆さんがお使いのブラウザの機能を利用して設定済みのCSSを調べる方法がありますので、どうしてもDressだけではわからない場合はそちらも併用してみてください。

ブラウザの検証モードの起動

最近のブラウザでは、今どんなCSSが適用されているか確認することができます。（ブラウザ毎で動作は異なります）
検証モードや、開発モードとか言ったりします。
使い方は簡単。調べたい場所で右クリック、「検証」という項目を選びます。（別ウィンドウ、画面下のパターンもあります）
すると、図のように画面が分割されます。

Chormeでの検証モード

Firefoxの検証モード

Safariの検証モード

設定済みのCSSを探す

今回はメニューのリンクの色を変えてみます。
注目すべきは先ほどの検証モードの適用中のCSSの欄。
CSSで文字色を設定する時は「color」の設定値を修正しますので、colorの設定値があるものを探します。（どのような設定項目があるかは、こちらのCSSプロパティを参考にしてください）。
どうやら今は「#333」という黒色が設定されているようです。

これを先ほど説明したように、CSSの設定場所を解読すると「メニューB」の「リスト」の「リンク」となります。
ということで場所がわかったのので、Dressでは、図のように設定します。

すると、無事メニューの文字色が変更できました。
再び検証モードで確認すると、「#333」から「#3fa9f5」が適用されているのがわかると思います。

CSSのセレクタとDressの対応表

設定済みのCSSが見つかっても、それがDressで何を指しているかわかならいと意味がないと思いますので、簡単にご紹介したいと思います。

ということで、「◯◯◯の色を変えたいけれど、どこで設定したら良いかわからない！」とか、「Dressを設定したはずなのに、色が変わらない！」なんて事があった時には、ブラウザの検証モードをお試しください！
ブラウザの検証モードは我々プロもよく使用していますので覚えて損はないと思います。