『あれ、記事タイトルの大きさはどこで変えればいいんだろう？』
WordPress に限らず、無料ブログなんかでもCSSをいじってデザインを変えることはよくありますが、はじめて触るテンプレートはどこの記述がどの部分に反映されているのかわかりづらいですよね。
えいっと変更したのに見当違いのところが大文字になったり、新たに指定した記述がぜんぜん反映されなかったり。
そんなときに重宝するのが、ブラウザにあらかじめ装備されている「開発者ツール」です。これを使えばカスタマイズ作業がはかどること間違いなし！
Internet Explorer、Firefox、Chrome ぞれぞれのツールの使い方をご紹介します。
Headline
Internet Explorer 開発者ツール
Internet Explorer は個人的に表示確認のときぐらいしか使いません。で、このブログも Gush2 もそうですが、IE8以下はほぼ無視した設計になっていて、記事を読むのに差し支えないけど見た目はおかしいかもねレベルです。
だって、モバイルファーストのレスポンシブWebデザインはどうやっても崩れるんだもん。ぷんぷん。
というのはさておき、開発者ツールは「ツール」の「開発者ツール」から起動します。もしくは「F12」キーでショートカット。
IE 開発者ツールの使い方
起動直後はHTMLが呼び出されているので、<body> を展開してみましょう。
左側の「＋」ボタンを押すと、各要素が表示されます。
<div id=”header”> をクリックしてみます。
右側には #header に適用されているCSSが表示されました。
このような感じで各要素を調べていくと、どこにどんな指定がされているのかわかりますね。
HTMLをたどっていくのではなく、表示されている要素をダイレクトに調べたい場合はツールメニューの左上にあるカーソルボタンを選択します。
記事タイトルをクリックしてみると、ツール画面でその要素が選択されます。
これが基本的な使い方です。
Class と ID を一括表示させる
いちいちたどっていくのはメンドー！という時は、クラス名やID名を全部表示してみましょう。
ツールメニューの「表示」から「Class と ID 情報」をクリック。
重なっていてちょっと見づらいですが、このようにクラス・ID が表示されます。
変更後のイメージを確認する
変更したい要素を見つけたら、いきなりCSSを書き換える前に変更後のイメージを確認してみましょう。
<h2 class=”caption”> を表示してみます。
右側にはCSSが表示されているので、ちょっとスクロールしてカラー設定を探します。
#fff が適用されていますね。
ここの色を変えてまわりとのバランスを見たいので、書き換えてみます。「#fff」の部分をクリックして、「#ffd700」と入力してみましょう。
フォントカラーが白から黄色に変わりました。
いちいちCSSを書き換えて保存して更新して…という手間が省けます。実際にCSSが書き換わるわけではないので、どんどん試してみましょー。
変更しても反映されない場合、ツールメニューの「ブラウザーキャッシュの消去」ボタンを押してみてください。
Firefox Web開発
つづいて、Firefox の開発者ツールを見てみましょう。
「ツール」－「Web開発」－「インスペクタ」の順に選択すると IE と同じようなツール画面が出てきます。
使い方は似ていますが、IEよりちょっと見やすいかも。
Firefox Web開発ツールの使い方
基本的な使い方は IE と同じです。
「ページから要素を選択」すると、表示されている画面にカーソルをのせるだけでクラス名や幅・高さ、さらには余白などが視覚的に確認できます。
クリックすると、ツール画面も該当箇所に飛びます。
上に親要素が表示されるのでわかりやすいですね。
ボックスモデルで余白を確認する
IEでも確認できますが、ここでは「ボックスモデル」をご紹介します。
確認したい要素のCSS表示領域上部にメニューが並んでいます。
右端の「ボックスモデル」を選択すると、その要素の余白などが確認できます。
マウスオーバーするとわかりますが、各領域はこんな感じで色分けされています。
- 青……要素の内容
- 緑……padding
- 黄……border
- 茶……margin
実際の表示画面でも同じ色分けで表示されるので、頭の中で padding が… margin が… と考えずに済みます。
ブロック要素を横並びに配置してカラム落ちしたときは、余白やボーダーの値をチェックしてみましょう。
レスポンシブデザインモードで幅を切り替える
ちょっとわかりづらいですが、ツールメニューに「レスポンシブデザインモード」というのがあって、ここを押すと表示しているブログの幅を変更できます（ウィンドウ幅はそのまま）。
いちいちウィンドウの端をつまんでサイズを変えるより楽ですね。
UA は変わらないので、軽く表示チェックしたいときに便利。
- UA
- ユーザーエージェント User Agent の略。使用しているブラウザの種類やバージョンを伝える
Google Chrome デベロッパーツール
最後に Chrome のデベロッパーツールです。個人的に一番よく使います。
起動は、右上のトグルメニューから「ツール」－「デベロッパーツール」から。または、コンテキストメニューの「要素を検証」から行えます。
Chrome デベロッパーツールの使い方
基本的な使い方は、IE や Firefox と同じ。
左側に表示されている要素を選択すると、右側にCSSが表示されます。
CSS欄を下までスクロールすると、ボックスモデルが表示されます。
マウスオーバーで各要素を調べたいときは、左上の虫眼鏡アイコンをONにしておきましょう。
スマホ表示をチェックできるエミュレーション機能
ものすごく便利なのが、エミュレータです。この機能を使うと、実機がなくてもスマホやタブレットの表示を確認することができます。
単に画面幅を変更するだけではなく UA も変わるので、スマホ用に分岐しているコードも確認できるすぐれものです。
デベロッパーツールの最下部に隠れていることもあるので、ずずずいっと引っぱり上げてみましょう。
「Emulation」の「Model」から機種を選択します。
ためしに iPhone5 を選んでみると、画面サイズや UA が自動的に設定されます。
ブログも設定サイズで表示されます。
あれ、表示がおかしいですね。リロードしてみましょう。
きちんと表示されました。
エミュレーションメニューの「Sensors」から「Emulate touch screen」にチェックを入れておくと、タップ領域やスクロールなどの確認もできます。
実機で確認するにこしたことはありませんが、すべての端末を用意するのには無理があるのでこの機能を活用してください。
CSSを書き換えて保存して、スマホでアクセスして確認して…というのを考えると、いかに便利なのか実感できると思います。
まとめ
おかげさまで WordPress Theme Gush2 の一般公開を終え、採用していただくブログも徐々に増えてきました。
このテーマは「カスタマイズ前提」とうたっていますが、テーマカスタマイザーは導入していないので、デザインの変更は基本的にCSSを直接いじることになります。
どこを変更すればよいかわからない！レスポンシブWebデザインテーマをはじめて触る！というときは、このブラウザ開発者ツールを使ってみてください。
それでは、また。