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

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

Dressで設定項目を確認する

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

セレクタ選択機能

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

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

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

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

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

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

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

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

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

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

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

Chormeでの検証モード

Chormeでの検証モード

Firefoxの検証モード

Firefoxの検証モード

Safariの検証モード

Safariの検証モード

設定済みのCSSを探す

今回はメニューのリンクの色を変えてみます。
注目すべきは先ほどの検証モードの適用中のCSSの欄。
CSSで文字色を設定する時は「color」の設定値を修正しますので、colorの設定値があるものを探します。(どのような設定項目があるかは、こちらのCSSプロパティを参考にしてください)。
どうやら今は「#333」という黒色が設定されているようです。
検証モードで適用済みCSSを確認
これを先ほど説明したように、CSSの設定場所を解読すると「メニューB」の「リスト」の「リンク」となります。
ということで場所がわかったのので、Dressでは、図のように設定します。
Dressでの設定箇所を比較
すると、無事メニューの文字色が変更できました。
再び検証モードで確認すると、「#333」から「#3fa9f5」が適用されているのがわかると思います。
CSSの変更を確認

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

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

.c-page_title ページタイトル
.c-title タイトル
.c-large_headline 大見出し
.c-small_headline 小見出し
.c-lead リード
.c-body 本文
.c-enclosure 囲み
.-menu_a メニューA
.c-list_indent インデント式リスト
.b-plain プレーンブロック
.b-headlines 目次ブロック
.a-header ヘッダーエリア

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

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • Dressのセレクタ選択機能で設定箇所を確認
  • それでもわからない時はブラウザの検証モードを確認
  • 一般的なCSSのセレクタとDressでの定義がわかる対応表もチェック

RECOMMEND ARTICLE