「Adobe Dreamweaver CS5」を試す -WordPressのテーマ改造スタイル編

ついに「Adobe CS5.5」が発表された。「CS5.5」の発売が待ち遠しいが、今回は改めて復習の意味もこめて、「Adobe Dreamweaver CS5」にある便利な機能を試していきたい。「WordPressのコード補完」、「CMS対応」、「CSSインスペクタ」の3つの機能を使ってWordPressのテンプレートをカスタマイズするサンプルを「WordPressのテーマ改造スタイル編」、「WordPressのテーマ改造CMS編」の2回に分けて解説していく。

「Adobe CS5」体験版はこちらから

「Adobe Dreamweaver CS5」で作るサンプル

今回のサンプルは、WordPressのテンプレートフレームワーク「Thematic」をベースとして、CS5の新機能を使って作成する。必要最小限のカスタマイズですませつつも、「ここどういう風にやるんだっけ?」と悩みがちなポイントを盛り込んだ。まだCS5を使ったことがない人は是非体験版をダウンロードして使ってみてほしい。

ではまず、WordPressをインストールしたディレクトリ直下にある「index.php」を開こう。

index.phpを開くと、[ソースコード]欄に大量のファイルが並んでいる。また右側の[>>]をクリックすると、縦に大量のファイルが一覧表示される。コードペインで表示されているindex.phpのコードはわずか18行だが、ここから様々なファイルが動的に呼ばれ、左側に表示されているデザインとなる。一つ言い忘れたが、エディタ画面は[分割]ボタンを押して分割しておくようにしよう。ソースコード欄に並ぶファイルリストの中にはいくつかCSSファイルがあるのがわかると思う。ここに並んでいるCSSを開かなくても、Dreamweaver CS5では、ファイル構成を気にすることなくCSSを編集していくことができる。

CSSインスペクタを使っての構造の把握

実際にCSSを編集していくにあたって、サンプルのようにするにはいくつかの修正が必要となる。ここでその修正点を箇条書きにしてみよう。

・ロゴは画像にしたい
・ヘッダ、フッタの背景色とタブとボディの背景色を変えたい
・文字の色やリンクの色を変えたい
・なるべくCSSは書きたくない
・タブの下についている下線は消したい

他にもいろいろやりたいことはあるが、今回はあまり欲張らず、上記5項目とした。また、このうち、ロゴ画像と、ボディの背景色は、テンプレートフレームワークの力を借りることになる。つまり若干PHPを書かなければいけないということだ。ただし、プログラミングをするわけではないので、恐れずやってみてほしい。

まずは、修正箇所をインスペクタパネルを使って見ていく。[インスペクト]ボタンをクリックしてみよう。そのままデザインビューにカーソルをあててみると、カーソルがあたっているエリアのマージン、パディング、ボックスのサイズなどが視覚的にわかるはずだ。

続いて、本文のところにカーソルを合わせてクリックしてみよう。[CSSスタイル]パネルに、クリックしたところのスタイルが表示されるはずだ。colorが「#000」と設定されているので、[選択範囲のサマリー]内のcolorをダブルクリックして編集可能状態にし、「#333」に変更してみよう。

他にも、h1の色も「#000」になっており、今回のデザインではちょっと浮いてしまうため変更。若干色を明るくする。

ライブビューを使ったデザインの即時反映

[CSSスタイル]パネルを使ってプロパティを変更して、変更を反映させると左側に表示されているデザインも色が変更される。同じような調子で、ヘッダの背景やフッタの背景も変えていこう。エディタ画面の下部にあるステータスバーより、「div#header」をクリックして選択し、[CSSスタイル]パネルから[#headerのプロパティ]を表示させる。その中の[プロパティの追加]をクリックして、プロパティ名に「background-color」で、値に「dimgray」を入力してみよう。なお、プロパティ名は途中まで入力してプルダウンボタンを押すと、候補が表示されるので入力の手間が少なくなる。背景色を入力して[エンターキー]を押すと、背景が変更されていることがデザインビューですぐに確認できる。

またタブの色は、「pink」を指定しよう。タブ部分を選んで、ステータスバーらから適切なタグを選択する。その後[CSSスタイル]パネルからプロパティとプロパティ値を設定していく。今回はプロパティ値に「pink」と入力しよう。タブがピンク色になるのがわかるはずだ。

CSSスタイルパネルを使ったCSSの修正

ここまで、Dreamweaver CS5で作業してみて、CSSインスペクタとライブビューの組み合わせの威力はなかなかのものだというのがわかっていただけたと思う。

一方で、「その場でスタイルシートとHTMLのボックスを調査できて、プロパティの変更を行なうのであれば、正直FirefoxのFirebugを使っても同じじゃないの?」と思う読者もいるだろう。確かに似たような機能がFirefoxにはあり、Firebugと既存エディタの組み合わせで同じことができるかもしれない。しかし、決定的に違うのはその後保存できるかどうかという点だ。Dreamweaverでは、CSSの反映をリアルタイムで行い、試行錯誤を重ねながら作業できることに加え、保存したくなったらその場で保存できるのである。しかも、スタイルシートの保存時に、Dreamweaver CS5の[すべてを保存]機能を使うと、ファイルの保存し忘れといった心配もなくなるのが魅力的だ。

ただし、[CSSスタイル]パネルは簡単な修正であれば直感的に行なえるが、複雑に入り組んだHTMLにあたっているスタイルの修正は困難だということが、修正を行っていくと見えてくる。

そんなケースがサンプルにもあるので見ておきたい。例えばタブの下線を消したいという要望があったとする。この場合、「#access」にあたっている下線ボーダーと「.sf-menu a」にあたっている下線ボーダーを消す必要があるのだが、[CSSインスペクタ]でクリックして[CSSパネル]から編集しても何故か下線が消えない。そういうときは、[CSSパネル]の[ルール]というフィールドを見てみよう。

ここでは、現在スタイルがあたっている様々なタグ、クラス、IDなどを一覧で見ることができる。加えて[選択範囲のサマリー]という部分もチェックしてみよう。同じ位置に多数のプロパティが階層的に定義されている場合は、同じプロパティ名が複数登場することになるのだ。ここでは、border-bottomが2つ定義されているので、2つを消せばいいことがわかる。