Dreamweaver CCでWordPressテーマをちょっと加工 第1回：インスペクトでWordPressサイトの構造を把握しよう
WordPressサイトの背景色やレイアウトを変えるといった、ちょっとしたデザインの変更であればDreamweaverで簡単にできます。本記事では、作業前の準備として、ライブビューでWordPressサイトを表示する方法、インスペクトモードでWordPressサイトの構造を把握する方法を解説します。
本連載では、Dreamweaver CCを利用して、WordPressサイトの見た目をちょっと変える方法を解説します。
サイトで表示する項目を変更する、などといったことを行うには、PHPやWordPressのテンプレートタグの知識が必要になります。でも、背景色やレイアウトを変更する、などといったことであれば、それらの知識は不要です。本連載では、Dreamweaverの機能を使いつつ、背景色を自由な色に変えたり、レイアウトを変更していきます。
通常のWebページと、WordPressのページの違い
WordPressは、PHPとMySQL（データーベースソフト）を利用したCMS（Contents Management System）です。通常のWebページと異なり、ページの要求がある度にPHPがHTMLを生成して、それをブラウザーで表示するようになっています。
そのため、見た目を変えるCSSを作るためには、PHPが生成するHTMLの構造を確認しておく必要があります。
WordPressをローカル環境で動作させる
DreamweaverでWordPressのテーマを編集するために、PC上でWordPressを動かすための環境が必要です。「Dreamweaver CS5とWordPressを連携させる方法」を参考にしながら、WordPressをインストールし、Dreamweaverでサイト定義を行い、テストサーバーの定義を行ってください。
本連載では、XAMPPを用いて、執筆時点（2014年3月）の最新版であるWordPress 3.8.1を利用します。
デフォルトテーマのTwenty Fourteen
テーマは、WordPressサイトの見た目を扱うもので、見た目を変更するということは、このテーマのファイルを修正することになります。2014年3月現在、WordPressをインストールすると、デフォルトで「Twenty Fourteen」という名前のテーマが使用されます。
Twenty FourteenはレスポンシブWebデザインに対応したテーマで、スマートフォン、タブレット、PCなどのデバイスや画面解像度ごとに見た目が変化します。
また、アイコン部分にWebフォントを用いているため、アイコンを大きくしたり、色を変えたりするのも容易です。ブログ用としてだけではなく、通常のWebサイトにも使えるテーマとなっています。
本連載では、Twenty Fourteenを使用したWordPressサイト、つまり、WordPressをインストールした際のデフォルトのサイトをベースに解説していきます。
ライブビューで表示してみる
DreamweaverでWordPressサイトの見た目を変えるためには、まずWordPressサイト自体を表示する必要があります。［ファイル］パネルからindex.phpを開きます。
これだけでは何も表示されませんが、上部にある［ライブ］ボタンをクリックして［ライブビュー］にすると、Dreamweaverのウィンドウ内でWordPressサイトの画面を確認することができます。
WordPressサイトのリンク部分をクリックしてもページは遷移しませんが、Ctrlキー（Commandキー）を押しながらクリックすると、Dreamweaverのウィンドウ内で遷移できます。
連続してページ遷移したい場合は、［ライブビューオプション］ボタンをクリックし、［リンク先を連続表示］にチェックを入れると、Ctrlキー（Commandキー）を押さなくても、クリックだけでページ遷移できるようになります。
［戻る］［進む］ボタンも表示されるので、これらのボタンでも遷移できます。
インスペクトでテーマの構造を把握する
上部にある［インスペクト］ボタンをクリックすると「インスペクトモード」と呼ばれる状態に切り替わります。
この状態で各要素にマウスオーバーさせると、カラフルな矩形が表示されます。水色は要素のボックスの内容部分、黄色はマージン、紫色はパディングを意味します。矩形のツールチップには、マウスが指している領域のHTMLタグやclass名、id名、幅と高さが表示されます。
HTMLタグ、class名、id名がわかれば、CSSでスタイルを定義したり変更したりすることが容易にできるでしょう。
矩形が表示された状態で、キーボードの［←］キーを押すとその親要素に移動し、キーボードの［→］キーを押すとその子要素に移動します。
矩形が表示されている状態でクリックすると、表示をロックできます。ロックすると、そのまま他の操作を行うことが可能です。画面のどこかをクリックすると、インスペクタモードが終了して、ロックが解除されます。
インスペクトモードで様々な要素をマウスで指していくと、［CSSデザイナー］パネルの表示がコロコロ変わることに気づくと思います。［CSSデザイナー］パネルは、CSSを変更する際に役立つ便利な機能です。これは第2回「CSSデザイナーパネルで、コードを書かずに見た目を変更しよう」で解説します。