Dreamweaver CCでWordPressテーマをちょっと加工 第2回：CSSデザイナーパネルで、コードを書かずに見た目を変更しよう
［CSSデザイナー］パネルを利用すれば、コードを書くことなく、視覚的な操作でCSSスタイルを変更できます。本記事では、［CSSデザイナー］パネルを使ってWordPressサイトの見た目を変更する方法を解説します。
［CSSデザイナー］パネルでできること
第1回「インスペクトでWordPressサイトの構造を把握しよう」では、ライブビューでWordPressサイトを表示し、インスペクトモードでWordPressサイトの構造を把握する方法を解説しました。
今回は、Dreamweaver CCから搭載された［CSSデザイナー］パネルを利用して、WordPressサイトの見た目を変更します。［CSSデザイナー］パネルにはほぼすべてのCSSスタイルの情報が表示され、使用されているプロパティを確認できるほか、様々なプロパティを追加設定できます。
［CSSデザイナー］パネルは、Dreamweaverのパネル配置によって、そのレイアウトが変化します。ある程度のパネル幅にすると、2列表示になります。自分の使いやすい配置にして作業を進めるといいでしょう。
パネル幅が狭いと1列表示になります。
パネル幅が広いと2列表示になります。
［CSSデザイナー］パネルの［ソース］ペインには、開いているHTMLファイルに読み込まれているCSSファイルの名前が表示されます。
［@Media］ペインには、メディアクエリー用の指定が表示されます。こちらは次回解説します。
［セレクター］ペインには、使用しているセレクターの一覧が表示され、さらに、マウスでクリックしたHTMLの領域に指定されているセレクターが自動で選択された状態になります。他のセレクターを選択して、該当する領域のスタイルを変更することも可能です。
［プロパティ］ペインには、［セレクター］ペインで選択したセレクターに設定されているプロパティの値が表示されます。このペインで値を変更したり、新しいプロパティを追加することも可能です。
このペインには、未設定のプロパティも含め、ほぼすべてのCSSプロパティがカテゴリー分けされて並んでいます。［プロパティ］ペインの上に並ぶ5つのカテゴリーボタンをクリックすると、各カテゴリーにジャンプします。
また、［セットを表示］にチェックを入れると、値が設定されているプロパティだけが表示されます。
数値入力の方法
［CSSデザイナー］パネルでは、様々な方法で値を入力できます。数値を入力するところでは、四則計算を利用したり、マウスドラッグによる入力が可能です。次の図のマウスカーソルの状態で、左右にドラッグすると値が上下します。
［CSSデザイナー］パネルで見た目を変更する
それでは、実際に［CSSデザイナー］パネルを使ってWordPressサイトの見た目を変更してみましょう。前回に引き続き、Twenty Fourteenテーマを適用したWordPressサイトを利用します。Twenty Fourteenでは既にCSSによってスタイルが定義されているため、この値を変更していくことになります。
［CSSデザイナー］パネルでスタイルを変更する方法は色々とありますが、今回は［インスペクトモード］を利用した方法を紹介します。
ブログのヘッダーの背景色を変更する
［インスペクト］ボタンをクリックして、［インスペクトモード］へ変更します。ブログのタイトルが表示されているヘッダー部分にマウスを置き、カーソルキーの左（←）を1回押して、親要素を選択します。この状態でクリックしてロックします。
すると、［CSSデザイナー］パネルの［セレクター］ペインで「.masthead-fixed .site-header」が選択された状態になっているので、［プロパティ］ペインでスタイルを指定します。
単色の背景色をグラデーションに変更します。［プロパティ］ペインの「background-image」の「gradient」をクリックします。新しいカラーパレットが表示されます。単に色を選択するだけではなく、明度や透明度をスライダー操作で設定できるほか、RGBa形式、Hex形式、HSLa形式での入力も可能です。左側のカラーバーで色を設定していくと、グラデーションを作成できます。
カラースウォッチへの登録
作成した色はカラースウォッチへ登録できます。カラーパレットの「＋」記号をクリックすると、現在選択されている色が登録されます。グラデーションも同様に登録できます。
サイドバーの色を変更する
サイドバーの色も変えてみます。［インスペクト］ボタンをクリックして、［インスペクトモード］へ変更します。そして、サイドバーのあたりでクリックします。
［CSSデザイナー］パネルの［セレクター］ペインで「計算済み」を選択し、［プロパティ］ペインでスタイルを指定します。「計算済み」を選択すると、該当する領域に対するスタイル指定を計算した結果が、［プロパティ］ペインに表示されます。
スタイルがあちこちで指定されていても、計算済みを選択すれば、スタイルの継承などを考慮し、最終的に利用されるCSSプロパティの値を算出します。これにより、ブラウザーで表示されるときの状態と同じ値を表示してくれるので、便利です。
［プロパティ］ペインで「background-color」をクリックして背景色を変更し、同様に「width」の値を大きくします。サイドバーが緑色となり、幅が広くなったことが確認できます。
このようにして［CSSデザイナー］パネルを利用すると、様々なCSSプロパティをライブビューで確認しながら設定していくことができます。
CSSプロパティの一時停止と削除
CSSプロパティを設定していると、表示崩れなどの原因を突き止めるために、一時的にプロパティを無効にして確認したい場合があります。［CSSデザイナー］パネルでは、値が設定されているプロパティの横にマウスを持ってくると、［CSSプロパティを無効にする］アイコンが表示されます。
［CSSプロパティを無効にする］アイコンをクリックすると、指定したCSSプロパティが無効となります。このとき、CSSファイルでは指定したCSSプロパティがコメントアウトされます。コメントアウトで無効にしているだけなので、有効にしたいときは［CSSプロパティを有効にする］アイコンをクリックします（アイコンの見た目は、無効にする場合と同じです）。
指定したCSSプロパティを削除したい場合は、隣にある［CSSプロパティを削除］アイコンをクリックします。こちらはCSSファイルからも削除されるので、削除する場合は、一度無効にして問題無いことを確認してからの方がよいでしょう。
3回「メディアクエリーを利用してマルチデバイスに対応しよう」では、スマートフォンやタブレットなどにも対応する際に重要となる、メディアクエリーの扱いについて解説します。