Dreamweaver CCでWordPressテーマをちょっと加工 第2回:CSSデザイナーパネルで、コードを書かずに見た目を変更しよう

by 関口 和真

Posted on 03-20-2014

Dreamweaver CCでWordPressテーマをちょっと加工

[CSSデザイナー]パネルを利用すれば、コードを書くことなく、視覚的な操作でCSSスタイルを変更できます。本記事では、[CSSデザイナー]パネルを使ってWordPressサイトの見た目を変更する方法を解説します。

Dreamweaver CC の体験版をダウンロード

[CSSデザイナー]パネルでできること

第1回「インスペクトでWordPressサイトの構造を把握しよう」では、ライブビューでWordPressサイトを表示し、インスペクトモードでWordPressサイトの構造を把握する方法を解説しました。

今回は、Dreamweaver CCから搭載された[CSSデザイナー]パネルを利用して、WordPressサイトの見た目を変更します。[CSSデザイナー]パネルにはほぼすべてのCSSスタイルの情報が表示され、使用されているプロパティを確認できるほか、様々なプロパティを追加設定できます。

[CSSデザイナー]パネルは、Dreamweaverのパネル配置によって、そのレイアウトが変化します。ある程度のパネル幅にすると、2列表示になります。自分の使いやすい配置にして作業を進めるといいでしょう。

パネル幅が狭いと1列表示になります。

[CSSデザイナー]パネルの1列表示。

パネル幅が広いと2列表示になります。

[CSSデザイナー]パネルの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」が選択された状態になっているので、[プロパティ]ペインでスタイルを指定します。

[セレクター]ペインで「.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プロパティを削除したい場合は、隣にある[CSSプロパティを削除]アイコンをクリックします。こちらはCSSファイルからも削除されるので、削除する場合は、一度無効にして問題無いことを確認してからの方がよいでしょう。

[CSSプロパティを削除]アイコン。

3回「メディアクエリーを利用してマルチデバイスに対応しよう」では、スマートフォンやタブレットなどにも対応する際に重要となる、メディアクエリーの扱いについて解説します。

Topics: クリエイティブ, UI/UX & Web

Products: