Dreamweaver CCでWordPressテーマをちょっと加工 第1回:インスペクトでWordPressサイトの構造を把握しよう

by 関口 和真

Posted on 03-13-2014

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

WordPressサイトの背景色やレイアウトを変えるといった、ちょっとしたデザインの変更であればDreamweaverで簡単にできます。本記事では、作業前の準備として、ライブビューでWordPressサイトを表示する方法、インスペクトモードでWordPressサイトの構造を把握する方法を解説します。

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

本連載では、Dreamweaver CCを利用して、WordPressサイトの見た目をちょっと変える方法を解説します。

サイトで表示する項目を変更する、などといったことを行うには、PHPやWordPressのテンプレートタグの知識が必要になります。でも、背景色やレイアウトを変更する、などといったことであれば、それらの知識は不要です。本連載では、Dreamweaverの機能を使いつつ、背景色を自由な色に変えたり、レイアウトを変更していきます。

通常のWebページと、WordPressのページの違い

WordPressは、PHPとMySQL(データーベースソフト)を利用したCMS(Contents Management System)です。通常のWebページと異なり、ページの要求がある度にPHPがHTMLを生成して、それをブラウザーで表示するようになっています。

通常のWebページの場合、静的なHTMLファイルがある。WordPressの場合、要求がある度に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サイトを表示したところ。横幅が広い状態。

Twenty Fourteenを使ったWordPressサイトを表示したところ。横幅を狭くした状態。

Twenty Fourteenを使ったWordPressサイトを表示したところ。横幅をさらに狭くした状態。

本連載では、Twenty Fourteenを使用したWordPressサイト、つまり、WordPressをインストールした際のデフォルトのサイトをベースに解説していきます。

ライブビューで表示してみる

DreamweaverでWordPressサイトの見た目を変えるためには、まずWordPressサイト自体を表示する必要があります。[ファイル]パネルからindex.phpを開きます。

index.phpを[デザインビュー]で開いたところ。

これだけでは何も表示されませんが、上部にある[ライブ]ボタンをクリックして[ライブビュー]にすると、Dreamweaverのウィンドウ内でWordPressサイトの画面を確認することができます。

WordPressサイトのリンク部分をクリックしてもページは遷移しませんが、Ctrlキー(Commandキー)を押しながらクリックすると、Dreamweaverのウィンドウ内で遷移できます。

index.phpを[ライブビュー]で開いたところ。

連続してページ遷移したい場合は、[ライブビューオプション]ボタンをクリックし、[リンク先を連続表示]にチェックを入れると、Ctrlキー(Commandキー)を押さなくても、クリックだけでページ遷移できるようになります。

[ライブビューオプション]ボタンをクリックし、[リンク先を連続表示]にチェックを入れる。

[戻る][進む]ボタンも表示されるので、これらのボタンでも遷移できます。

[戻る]ボタンも表示される。

インスペクトでテーマの構造を把握する

上部にある[インスペクト]ボタンをクリックすると「インスペクトモード」と呼ばれる状態に切り替わります。

この状態で各要素にマウスオーバーさせると、カラフルな矩形が表示されます。水色は要素のボックスの内容部分、黄色はマージン、紫色はパディングを意味します。矩形のツールチップには、マウスが指している領域のHTMLタグやclass名、id名、幅と高さが表示されます。

インスペクトモードで表示したところ。

HTMLタグ、class名、id名がわかれば、CSSでスタイルを定義したり変更したりすることが容易にできるでしょう。

矩形が表示された状態で、キーボードの[←]キーを押すとその親要素に移動し、キーボードの[→]キーを押すとその子要素に移動します。

子要素に移動したところ。

矩形が表示されている状態でクリックすると、表示をロックできます。ロックすると、そのまま他の操作を行うことが可能です。画面のどこかをクリックすると、インスペクタモードが終了して、ロックが解除されます。

インスペクトモードで様々な要素をマウスで指していくと、[CSSデザイナー]パネルの表示がコロコロ変わることに気づくと思います。[CSSデザイナー]パネルは、CSSを変更する際に役立つ便利な機能です。これは第2回「CSSデザイナーパネルで、コードを書かずに見た目を変更しよう」で解説します。

[CSSデザイナー]パネル。

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

Products: