23 Shares

ブログカスタマイズで重宝するブラウザ開発ツールの使い方

『あれ、記事タイトルの大きさはどこで変えればいいんだろう?』

デベロッパーツールの使い方

WordPress に限らず、無料ブログなんかでもCSSをいじってデザインを変えることはよくありますが、はじめて触るテンプレートはどこの記述がどの部分に反映されているのかわかりづらいですよね。

えいっと変更したのに見当違いのところが大文字になったり、新たに指定した記述がぜんぜん反映されなかったり。

そんなときに重宝するのが、ブラウザにあらかじめ装備されている「開発者ツール」です。これを使えばカスタマイズ作業がはかどること間違いなし!

Internet Explorer、Firefox、Chrome ぞれぞれのツールの使い方をご紹介します。

Internet Explorer 開発者ツール

Internet Explorer 9 の開発者ツール画面

Internet Explorer 9 の開発者ツール画面

Internet Explorer は個人的に表示確認のときぐらいしか使いません。で、このブログも Gush2 もそうですが、IE8以下はほぼ無視した設計になっていて、記事を読むのに差し支えないけど見た目はおかしいかもねレベルです。

だって、モバイルファーストのレスポンシブWebデザインはどうやっても崩れるんだもん。ぷんぷん。

というのはさておき、開発者ツールは「ツール」の「開発者ツール」から起動します。もしくは「F12」キーでショートカット。

IE 開発者ツールの使い方

起動直後はHTMLが呼び出されているので、<body> を展開してみましょう。

IE 開発者ツール HTML展開

左側の「+」ボタンを押すと、各要素が表示されます。

<div id=”header”> をクリックしてみます。

IE 開発者ツール CSS

右側には #header に適用されているCSSが表示されました。

このような感じで各要素を調べていくと、どこにどんな指定がされているのかわかりますね。

HTMLをたどっていくのではなく、表示されている要素をダイレクトに調べたい場合はツールメニューの左上にあるカーソルボタンを選択します。

クリックで要素を選択

記事タイトルをクリックしてみると、ツール画面でその要素が選択されます。

要素をクリックして調べる

これが基本的な使い方です。

Class と ID を一括表示させる

いちいちたどっていくのはメンドー!という時は、クラス名やID名を全部表示してみましょう。

ツールメニューの「表示」から「Class と ID 情報」をクリック。

IE 開発者メニュー 表示

重なっていてちょっと見づらいですが、このようにクラス・ID が表示されます。

IE 開発者ツール クラス名とID名表示

変更後のイメージを確認する

変更したい要素を見つけたら、いきなりCSSを書き換える前に変更後のイメージを確認してみましょう。

<h2 class=”caption”> を表示してみます。

h2要素

右側にはCSSが表示されているので、ちょっとスクロールしてカラー設定を探します。

#fff が適用されていますね。

h2要素のカラー

ここの色を変えてまわりとのバランスを見たいので、書き換えてみます。「#fff」の部分をクリックして、「#ffd700」と入力してみましょう。

h2要素のカラーを変更

フォントカラーが白から黄色に変わりました。

h2要素のカラーを変更後

いちいちCSSを書き換えて保存して更新して…という手間が省けます。実際にCSSが書き換わるわけではないので、どんどん試してみましょー。

変更しても反映されない場合、ツールメニューの「ブラウザーキャッシュの消去」ボタンを押してみてください。

開発者メニュー キャッシュクリア

Firefox Web開発

Firefox 32 の開発ツール画面

Firefox 32 の開発ツール画面

つづいて、Firefox の開発者ツールを見てみましょう。

「ツール」-「Web開発」-「インスペクタ」の順に選択すると IE と同じようなツール画面が出てきます。

Firefox インスペクタモード

使い方は似ていますが、IEよりちょっと見やすいかも。

Firefox Web開発ツールの使い方

基本的な使い方は IE と同じです。

「ページから要素を選択」すると、表示されている画面にカーソルをのせるだけでクラス名や幅・高さ、さらには余白などが視覚的に確認できます。

Firefox マウスオーバーで要素確認

クリックすると、ツール画面も該当箇所に飛びます。

Firefox 開発者ツール モニター画面

上に親要素が表示されるのでわかりやすいですね。

ボックスモデルで余白を確認する

IEでも確認できますが、ここでは「ボックスモデル」をご紹介します。

確認したい要素のCSS表示領域上部にメニューが並んでいます。

Firefox CSS確認

右端の「ボックスモデル」を選択すると、その要素の余白などが確認できます。

ボックスモデル

マウスオーバーするとわかりますが、各領域はこんな感じで色分けされています。

  • 青……要素の内容
  • 緑……padding
  • 黄……border
  • 茶……margin

実際の表示画面でも同じ色分けで表示されるので、頭の中で padding が… margin が… と考えずに済みます。

要素の各領域

ブロック要素を横並びに配置してカラム落ちしたときは、余白やボーダーの値をチェックしてみましょう。

レスポンシブデザインモードで幅を切り替える

Firefox レスポンシブデザインモード

ちょっとわかりづらいですが、ツールメニューに「レスポンシブデザインモード」というのがあって、ここを押すと表示しているブログの幅を変更できます(ウィンドウ幅はそのまま)。

Firefox レスポンシブ表示

いちいちウィンドウの端をつまんでサイズを変えるより楽ですね。

UA は変わらないので、軽く表示チェックしたいときに便利。

UA
ユーザーエージェント User Agent の略。使用しているブラウザの種類やバージョンを伝える

Google Chrome デベロッパーツール

Chrome 37 のデベロッパーツール画面

Chrome 37 のデベロッパーツール画面

最後に Chrome のデベロッパーツールです。個人的に一番よく使います。

起動は、右上のトグルメニューから「ツール」-「デベロッパーツール」から。または、コンテキストメニューの「要素を検証」から行えます。

Chrome デベロッパーツール

Chrome デベロッパーツールの使い方

基本的な使い方は、IE や Firefox と同じ。

左側に表示されている要素を選択すると、右側にCSSが表示されます。

Chrome デベロッパーツール画面

CSS欄を下までスクロールすると、ボックスモデルが表示されます。

Chromeデベロッパーツール ボックスモデル

マウスオーバーで各要素を調べたいときは、左上の虫眼鏡アイコンをONにしておきましょう。

Chrome 要素を選択

スマホ表示をチェックできるエミュレーション機能

ものすごく便利なのが、エミュレータです。この機能を使うと、実機がなくてもスマホやタブレットの表示を確認することができます。

単に画面幅を変更するだけではなく UA も変わるので、スマホ用に分岐しているコードも確認できるすぐれものです。

デベロッパーツールの最下部に隠れていることもあるので、ずずずいっと引っぱり上げてみましょう。

Chrome エミュレータ

「Emulation」の「Model」から機種を選択します。

iPhone5 エミュレーション

ためしに iPhone5 を選んでみると、画面サイズや UA が自動的に設定されます。

iPhone5 エミュレーター

ブログも設定サイズで表示されます。

iPhone5の画面サイズ

あれ、表示がおかしいですね。リロードしてみましょう。

iPhone5 表示

きちんと表示されました。

エミュレーションメニューの「Sensors」から「Emulate touch screen」にチェックを入れておくと、タップ領域やスクロールなどの確認もできます。

タッチスクリーン エミュレート

実機で確認するにこしたことはありませんが、すべての端末を用意するのには無理があるのでこの機能を活用してください。

CSSを書き換えて保存して、スマホでアクセスして確認して…というのを考えると、いかに便利なのか実感できると思います。

まとめ

おかげさまで WordPress Theme Gush2 の一般公開を終え、採用していただくブログも徐々に増えてきました。

このテーマは「カスタマイズ前提」とうたっていますが、テーマカスタマイザーは導入していないので、デザインの変更は基本的にCSSを直接いじることになります。

どこを変更すればよいかわからない!レスポンシブWebデザインテーマをはじめて触る!というときは、このブラウザ開発者ツールを使ってみてください。

Gush2 ダウンロードはこちら

それでは、また。