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

この記事をお読み頂くにあたり、Dressとは、CSS（後述）の編集をコードを触らずにUI（ユーザーインターフェース）を通して行える機能と最初に定義したいと思います。

Dressに関するご相談の中で多いと感じるのが「ここのデザインを変えたいのですがどこを変えれば良いのですか？」と云う質問です。
設定箇所が解り難いのはCSSの難しい処でもありますが、新しいDressではなるべく解消出来る様に意識しました。
特にテンプレートから作っているユーザーさんにとって、デザインをカスタマイズする際にDressの編集箇所が見つけられないと困りますからね。
そんな訳で今回はDressでセレクタ（デザインを適用する対象をCSSではセレクタと呼びます。）を探す方法を解説します。

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

セレクタを理解しよう

まず、Webサイトの基礎知識。
Webサイトは主にHTMLとCSSを用いて作られていますが、その関係性は以下になります。

端的に云うと、HTMLで指定されている要素全てがセレクタとして扱われ、そのセレクタに対してCSSでデザインを指定するのが基本的な作りです。
ですが、細かくデザインを作っていこうとすると、同じセレクタであっても場所によってデザインを変えたい要求が出てきます。
そこでエリアの概念が出てきます。
エリアとセレクタを組み合わせる事で、より細かな指定が出来る様になるのですね。

例えば、セレクタ『大見出し』に対して『文字色を赤にする』と指定するとサイト内全ての大見出しの文字色が赤くなりますが、『ビルボードエリアの大見出し』に対して『文字色を赤にする』と指定する事でビルボードエリアに限定した指定が出来る様になります。
CSSでのデザイン指定は概ねこの考え方で行います。
ちなみにCSSでの指定は狭い範囲で指定する程優先される事を覚えておきましょう。
上記の例で云えば、『ビルボードエリアの大見出し』に文字色の指定がある場合、『大見出し』に文字色を指定しても適用されません。
設定しても反映されないと思ったら、それより更に狭い範囲で指定されている可能性がある事をお忘れなく。

基本的な考え方を覚えた処で、Dressの操作に入っていきましょう。

ラベル表示を使いこなそう

Dressを開くとプレビュー画面の右上に『ラベルを表示』チェックがあり、デフォルトでオンになっています。
ラベルを表示する事でそれぞれの要素に囲みがついて、セレクタが表示される状態になります。

ラベルには4種類あり、

• パーツ
• ブロックスタイル
• エリア
• ウィジェット

があります。

それぞれを見ていきましょう。

パーツ

これは主にブロックエディタ上に於ける『段落のスタイル』、『リストのスタイル』、『メニューのスタイル』などをはじめとした個別要素全てが対象になります。
逆に云うとブロックエディタ上できちんとそれぞれのスタイルを充てていないとDressでデザイン指定は出来ません。（超重要）
今回の趣旨とは異なりますが、上記スタイルを的確に指定できているかはSEO対策（検索エンジン対策）する上で重要な要件となりますので、是非押さえてください。

ブロックスタイル

これはブロックエディタの編集タブ内にある『ブロックレイアウト』がそのまま対象になります。
これもエリア指定の考え方と一緒で、組み合わせる事で『プレーンの大見出し』と『目次の大見出し』と云った様にそれぞれ違ったデザインを指定する事が可能になります。

エリア

こちらはサイトシアターで区分けされいる『ヘッダー』や『ビルボード』などの大きな括りになります。
ヘッダーエリアとコンテンツエリアでデザインルールが違うなどはWebデザインではよくありますね。

ウィジェット

こちらはウィジェットエリアに限定して切り替える事が出来ます。

これらを把握した上で次のセクションでは実際にセレクタを探してみます。

セレクタの探し方

セレクタの探し方ですが、まずはラベルを表示状態で、デザインを変更したい要素を直接クリックします。
すると右側編集エリアにクリックした対象に関わるセレクタが一覧表示されます。

セレクタに対してデザイン設定がされている場合とされていない場合で設定方法が分かれるのですがが、それぞれケース別で解説します。

セレクタに設定されてるかの判別方法

ケース毎に異なるので判別が難しい処ですが、例えば『大見出し』の文字色を編集したいと思った場合、セレクタの『大見出し』ではなく、エリアに対して文字色が設定されている場合があります。
エリアに対して指定する事で、そこに含まれる全ての要素を対象として指定する事が出来るので、その様に設定する場合があります。
以下にセレクタにデザイン設定がされている場合とされていない場合の設定方法を解説しますが、セレクタにデザイン設定がない場合の多くはエリアに設定がある事を覚えておきましょう。

既存設定の修正（デザイン設定がある場合）

デザイン設定がある場合は、要素をクリックして表示されたセレクタ一覧から設定箇所を探し出します。

例えばビルボード下にある大見出し『Mission』をクリックしてみましょう。
右側の『選択項目』にセレクタリストが表示されます。
文字色を変えたい場合は、『文字色』ボタンをクリックすると文字色が設定されているセレクタだけが絞り込まれます。

この状態から更に特定する方法ですが、主にエリアや要素で判断していきます。

タブブロック > 大見出し<h3> > リンク

×：タブブロックの要素ではない

アコーディオンブロック > 大見出し<h3> > リンク

×：アコーディオンブロックの要素ではない

メインエリア > 大見出し<h3>

◯：メインエリア内の大見出し

メインエリア > 大見出し<h3> > リンク

×：エリアと要素は合っているがリンクは設定されていない

ブロックエディタの設定を確認する事で上記の様に絞り込む事が出来ます。
判らない場合は、それぞれのセレクタで文字色を変えて反映されるまで試すと云う方法もありますが、エリアやブロックスタイルの設定からある程度類推する事は可能です。

該当要素の文字色を変更すると実際にプレビューも変更される事が判ります。

新規設定の追加（デザイン設定がない場合）

こちらは少々難しくなりますが、そもそもデザイン設定がされていない要素を探す場合。

ここではビルボードのタイトル『OMG inc. Recruitment』の文字色を変更してみたいと思います。
先程と同様に要素をクリックすると選択項目にセレクタ一覧が表示されます。

タイトル<h2>

△：サイト全体のタイトルに対する設定項目

ビルボードエリア > タイトル<h2>

◯：ビルボードエリア内のタイトルに対する設定項目

インエリア > タイトル<h2>

×：そもそもメインエリアの項目ではない

さて、ここで△と◯が出てきたので理由を簡単に解説します。
どちらもセレクタとしては正解で、この場合どちらに設定しても反映はされるのですが、エリアを限定しない場合、サイト全体の『タイトル<h2>』すべてに設定が反映されます。
意図しない場合は、ビルボードのエリアに限定してデザインを設定するのが良いでしょう。

前のセクションと違うのは、実際にセレクタを開いても『文字色』の設定項目が無い点です。
この場合は、『文字色』を編集する為の設定項目を新しく追加する必要があります。

右上にある緑のプラスボタンをクリックすると設定項目一覧が表示されます。
この中から『文字色』を追加します。
あとは前セクション同様文字色を設定すれば反映される事が判ります。

BiNDupのテンプレートは基本的に全てのセレクタに何かしらの設定が施されているかと思いますので、上記の方法で殆ど変更が可能かと思いますが、セレクタ自体が無い場合は新しく追加する必要があります。
おそらく稀かと思うので今回は割愛します。

その他のチェック事項

ここまでの方法で殆どのセレクタを特定してデザイン変更を行う事が可能かと思いますが、更に覚えておくと便利なチェック項目を解説します。

擬似要素について

擬似要素はCSSの知識になるのですが、セレクタを探す際に覚えていると判断し易いので簡単に解説します。
主にメニューやリストをクリックした際に擬似要素が含まれるセレクタが選択される事があります。
その名称と意味は以下の通りです。

マウスオーバー

文字通りマウスオーバーした際の設定

最初の子要素[first-child]

メニューやリストなどで最初の項目だけに設定する場合

最後の子要素[last-child]

メニューやリストなどで最後の項目だけに設定する場合

before要素

要素の前に挿入する要素

after要素

要素の後に挿入する要素

1行目[first-line]

文字通り1行目だけに設定する場合

テキスト選択時

テキストを選択した場合の設定

ちょっと難しいのですが、擬似要素にもデザインの設定が含まれている事があるのでチェックしてみてください。

ブロックDressが設定されている場合

テンプレートに於いて、ブロック専用に設定されているDressが存在します。
Dressでクリックした際に『ブロックDressが設定されています』と表示されるので判ると思いますが、該当するブロックエディタを開くと『ブロック用Dressテンプレート』が設定されている事が判ります。

ブロックDressが設定されている場合は、ブロックエディタからDressを開いて編集する様にして下さい。

リンクボタンの注意

リンクボタンのデザインはDressで管理されていない為、直接リンクパーツを編集する必要がありますのでお忘れなく。

如何でしたか？
色々書いたので難しく感じたと思いますが、簡単に云うと

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

の流れなので臆せず取り組んでみて下さい。

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