Dreamweaverで始めるWordPressサイト構築の基礎知識：爆捗！ WordPressテーマ作成ショートカット（1）（3/3 ページ）

[岡本紳吾，hatte.Inc]

Dreamweaverのライブビュー機能で爆捗

　ファイルの同期が完了したら、ローカル側にある「index.php」を開こう。先ほどの［サイト設定］ダイアログで［テスト］にチェックを入れておいたので、index.phpを開いた時にライブビューが利用できるようになっているはずだ。

　HTMLが何も書かれていないため、プレビュー部分は真っ白になっている。画面左上にある［ライブ］というボタンをクリックすることで、ライブビューを有効にできる。

　ライブビューを有効にすると、PHPのスクリプトが実行された後の状態でプレビューがレンダリングされた。ここからがDreamweaverの本領発揮である。ライブビューを有効にすると、［ライブコード］と［インスペクト］が利用できるようになる。

　［ライブコード］はライブビューでレンダリングされる元となったソースコードが表示される。PHPなどのスクリプトが全て実行された後のHTMLのソースコードを見ることができる。

　［インスペクト］はレンダリング後の画面でCSSがどのように適用されているかを確認できる。そればかりではなく、CSSの編集を行えるようにもなっている。

　［ライブコード］と［インスペクト］を有効にしてライブビューの画面内をポインタで指してみると、指した要素のソースがハイライトされる。そしてCSSがどのように設定されているかも分かるようになっている。特にテンプレートの調整で威力を発揮しそうなのだが、ここでCSSデザイナーを開いてみてほしい。

　インスペクトした要素をクリックすると、その要素の表示を固定できる。このとき［インスペクト］モードは終了するが、CSSデザイナーでCSSをそのまま適用できる。つまり、変更した値がライブビュー側にすぐ反映されるのだ。

　CSSによっては、さまざまな要素に影響を与えることがあるため、大胆な値をあえて設定してみて影響を比べたりすることがあると思う。それが、ライブビューで簡単に実現できる。

　また、ライブビューによってバラバラになっている各ファイルが統合されているため、Webブラウザーでどのように表示されるかが分かりやすい。

　ライブビューはDreamweaverがCS6というバージョン（CC／13の前）だったころに導入され、毎回アップデートの中でも機能強化が図られてきているため、今後のバージョンでも何らかの強化が図られると考えられる。CEFの統合によってGoogle Chromeと同等の機能が利用できるのであれば、もはやライブビュー上でファイルの編集ができるようになるというのが正当な進化だといえそうだが、次期バージョンではどう変わるのだろうか。

サンプルのダウンロード

　本連載で作成したサンプルのコードやファイルはすべてGitHubからダウンロードできるので、ご参考に。

次回から、爆発的に捗るWordPressテーマの作り方

　さて、これで本連載の作業環境はひとまず整った。次回からDreamweaverやSass、Emmetなどの機能をふんだんに使い、楽して、しかも爆発的に捗（はかど）るWordPressテーマの作り方を紹介していく。

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto