使わなくちゃ!WordPressテーマ改造にフレンドリーなChrome デベロッパーツールを。

2014年8月10日
カテゴリー WordPress

WordPressテーマ改造を優しく手伝うChromeデベロッパーツール

最近ますます、片手間に楽しんでると言いながらも、プロ顔負けなほど積極的にWordPressテーマのカスタマイズに取り組んでる人が目立ちます。

そこで「Chrome デベロッパーツール」を。

Chromeで今見てるWebページのデザインや動きを検証し、Chromeからそのままダイレクトに修正・アレンジできるツールです。

実は本職でも手に余るほど機能が充実してる「Chrome デベロッパーツール」ですが、ほんの触りだけでも使い方を知っておけば、オリジナルテーマを開発してるときはもちろん、ヨソ様が制作したテーマを改造してるときにも活躍します。

例えばこんなふうに

Chromeデベロッパーツールの動きサンプル

ウィンドウの下半分がデベロッパーツールです。見出し(What Is Happening?)を表示しない原因が、CSSのColorの記述にあることを突き止め修正する様子を追いかけてます。

デベロッパーツールでは、元ファイルに影響なくHTMLやCSSをいじくり倒せます。バグの発見→修正だけでなく、デザインのバリエーションを試すのにも利用できます。

WordPressのテーマを自分好みにカスタマイズするときは、何度も「テーマファイルに手を加えたあとブラウザで見ばえを確認」てことを繰り返しますよね。それが、デベロッパーツールを利用すればどこにも移動せずにChrome上で思う存分可能になります。

起動方法

Command、option、iで起動

起動用のショートカットは次のとおり。Chromeのメニューから起動するには「表示 > 開発/管理 > デベロッパーツール」です。

Mac Command + Option + i
Windows Ctrl + Shift + I

起動後、ドラッグで表示領域を調整できます。見やすく調整しましょう。

ウィンドウのサイズを変える様子

パネル

パネルの見方

デベロッパーツールでは、パネルによって検証できる対象が分かれてます。

他に「ページを表示するまでの通信状況」や「ページを構成するデータ」用のパネルもありますが、今回はテーマのカスタマイズ時にもっとも頻繁にいじくる「HTML&CSS」用のパネルを取りあげます。「Elementsパネル」です。

Elementsの見方

左がHTML、右にCSS

左に今見てるページのHTMLソースをツリー上に表示してます。

右はCSSです。

両方とも見やすいように整形してくれてますね。

まずはHTMLから

①虫眼鏡のアイコンをクリックして、②ページ上の表示物をクリックしてみます。すると、③クリックした箇所がHTMLソース中のどの要素にあたるのかを教えてくれます。

他人が作ったテーマの中には、HTMLの構造を読み解くのが非常に難しいものもあります。このように画面上を直接クリックして、どこがどの要素に当たるのかを探せるのは便利ですね。

HTMLソースをマウスオン

マウスオンでプレビュー

逆に、HTMLソースの方でマウスを動かすと、マウスオンした要素がページ上でどこにあるのかをハイライトしてくれます。一緒にプロパティやサイズも教えてくれてますね。

直接編集できる

h3要素を編集

もしHTMLソースを編集してみたいところがあれば、ダブルクリックで可能です。

ここでは「What’s happnening?」を「どうしたの?」に変更してみました。属性の追加も可能で、新たに「class」や「id」を振ることもできます。

右クリックでコンテクストメニューを表示

もっと大胆にHTMLを改修したいときは、右クリックからの「Edit as HTML」を使います。

階層を表示

ちなみに、選択した要素の階層をパネル下に表示してくれます。スタイルを適用するときのセレクタを考えるヒントになります。

今度は右側。CSSの方。

フォントサイズを変更

左で選択した要素に関連あるスタイルの記述を右に表示してます。HTMLと同じように、CSSもダイレクトに編集できます。ここでは「font-size」を大きくしてみました。

CSSの記述をアップで見てみましょう。

チェック、打ち消し線、ファイルの場所

それぞれの意味はこうです。

①チェック 外すとスタイルを無効化。
有効/無効で見ばえを確認できます。
①打ち消し線 効いてないスタイル。
上書きされてる場合が多いが、「backgrund」のようなスペルミスも含まれるので、記述ミスの発見に役立ちます。
③ファイル名と行数 スタイルを記述してるファイル名と行数がわかります。

特に他人が開発したテーマをカスタマイズしているときは、要素とスタイルの組み合わせを把握するのが難しいです。

デベロッパーツールを利用すれば、どの要素にどのスタイルが効いてるのか画面をクリックしながら見つけられます。

HTML、CSSの編集もリアルタイムにプレビューしてくれるので、色々とアレンジしてみて、いい感じに決まったところで、元ファイルを修正すればOKです。

元ファイルがどこにあるのかを知るには上の③を見れば明らかです。既存のスタイルを修正するなら行数をヒントに見つけられます。

デザインの変化を試すため、元ファイルに当てずっぽうで手を加えて、ブラウザのリロードを何度も繰り返すよりも、格段に素早くカスタマイズを進められます。

Computed

computedに切替

Computedのタブに切り替えると、左で選択した要素に対して最終的に効いてるスタイルを確認できます。便利なのが要素の領域をハイライトで確認できるところです。

要素の領域とサイズを視認

こんなふうに図形にマウスを重ねれば、マージン、パディング、ボーダーがどれくらいなのかを教えてくれます。

レイアウトを修正するとき、わざわざ仮のボーダーや背景色を定義して表示領域を確かめてる人も多いと思います。その必要がなくなりますね。

以上!

今回はHTML&CSSを中心にテーマのカスタマイズを進めるときに役立つ方法だけを取りあげました。デベロッパーツールは他にもJavaScriptのデバッグやブログの表示速度の改善に役立てられます。今回のに慣れたら、ぜひ掘り下げて使い方を調べてみることをオススメします。

ほな、ごゆるりと〜

こちらもcheck!ついに再開!ウェブさえのHP作成サービスはこちら

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top