WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

最近、フォーラムで、Wordpressテーマのカスタマイズに関する質問をいただくことがあります。

それで、気づいたのですが、Wordpressを始めたばかりの方は、カスタマイズする箇所を膨大な量のCSSファイルの中から探して編集している方が結構おられるようです。というか僕も、始めたばかりの頃はそうしていました。

僕は、比較的CSSをいじるのが好きな方ですが、今その方法でカスタマイズするとなると、面倒くさすぎて嫌になってしまうと思います。けれど、そのようなことをしなくても、最近のブラウザには、適切なCSS編集箇所を手軽に探し出して、テスト動作させられる環境が整っています。

Chromeの場合だと、デベロッパーツールというのですが、これを使うと結構簡単にスタイルシートのカスタマイズを行うことができます。

今回は、Wordpressを使い始めたばかりの方向けに、「とりあえずこのようにすれば大抵のCSSカスタマイズならうまくいく」という方法を紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Chromeデベロッパーツールとは

デベロッパーツールとは、Chromeブラウザに組み込まれた、開発者向けのツールのことです。

Chromeだと、以下のようになっています。

Chromeデベロッパーツール

これを表示するには、どのウェブサイトでも良いので、Chromeでサイト開いてF12ボタンを押してみてください。

ウェブページの下部分に、以下のようなエリアが表示されると思います。

デベロッパーツールエリア

デベロッパー(開発者)ツールという難解な名前と、横文字ばかりの見た目から、「難しそう」思われるかもしれません。けれど、使い方を知ると結構簡単に利用できるばかりか、CSS編集の負担を大きく減らしてくれる、便利道具となってくれます。

僕の場合は、このツールがないと、サイト編集などはしたくないというくらい、作業がはかどるツールなので、サイト編集時には手放せないツールとなっています。

今回は、そのデベロッパーツールの最も基本的なCSS編集の仕方を紹介します。

この記事では、Chromeのツールについて紹介しますが、基本的にFirefoxでも、Internet ExplorerでもSafariでも、ほとんど同じような使い方ができるようになっています。ですので、現在利用しているブラウザに当てはめて読める内容になっているかと思います。

編集したい部分のCSSセレクタを探し出す

テーマのスタイルをカスタマイズするには、CSSセレクタを探し出す必要があります。

CSSセレクタとは

CSSセレクタというのは、スタイルを変更するためのハンドル(操作レバー)みたいなものと思ってください。

以下の「.article h2」部分のことです。

この、スタイルシート操作用のハンドル(CSSセレクタ)を取得することで、HTMLの要素(見出し、リンク、他様々)の見た目を自由に変更することができるようになります。

見出しのCSSセレクタを取得する

ここで試しに、1つCSSセレクターを取得してみます。

例として、当サイトの以下の見出し部分のCSSセレクターを取得してみたいと思います。

当サイトのH2見出しのCSSセレクタを取得

この部分は、本文の見出し(h2)なのですが、この部分のスタイルシート設定をデベロッパーツールに表示させるには、以下のような操作をします。

  1. スタイルを変更したい部分を右クリック
  2. メニューから「要素を検証」を選択

右クリックから要素を検証を選択

このようにすることで、以下のようにデベロッパーツールが立ち上がります。

デベロッパーツールが立ち上がる

この時点で、まず参照するのは、ツールの右側(スタイルの設定)部分です。

スタイル部分を拡大すると、以下のようになっています。

テロパーツールのスタイル部分

スタイルは、優先度が高い順に表示されます。

CSSセレクタには、CSSセレクタの優先順位の計算方法というのがあって、結構ややこしいです。僕も完全に憶えているわけではありません。ですので、基本的には「上に掲載されている設定が優先順位が高い」と覚えておけば特に問題ないと思います。(!importantが入っているとそこが優先されるけど。)

ですので、先程の例ですと、最も優先されているCSSセレクタは、この部分になります。

テロパーツールのスタイル部分

ですので、今回は、「.article h2」に設定を変えていけばいいのかなということがわかります。(※element.styleというのは、HTML要素内に直接style=””で設定されたスタイルのこと。最も優先されるけどHTMLに書く部分なので、今回は利用しない。)

このようにデベロッパーツールを使うことによって、CSSセレクタを手軽に取得することができます。

編集したいところのすべてのCSSセレクタがこの方法で取得できるわけではありません。けれども、テーマなどのポイントとなる部分(カスタマイズしたくなるような部分)は、大抵その部分用のスタイルが割り振られているものです。スタイルは、必ず設定されているわけではないのですが、ポイント部分のCSSセレクタの7~8割方は、この方法で取得できるかと思います。

右クリックでうまく目的の要素が選択できない場合

HTML要素などが重なっていて、うまく目的のHTML要素を選択できない場合は、以下の方法などがあります。

マウスのドラッグで選択する

右クリックでは、うまく選択できないときには、以下のようにマウスオーバーで調べることができます。

  1. 虫眼鏡マークをクリックする
  2. スタイルを調べたいHTML要素の上にマウスを乗せる

マウスオーバーで調べる

マウスオーバーをしたところの要素の大きさ、padding、marginが視覚的に表示されるのでわかりやすいです。

選択したい要素上に来たら、マウスをクリックします。

マウスをオーバーした時にしか表示されない、Wordpressのグローバルナビのサブメニューとかもこれで選択することができるようになります。

近くの要素を選択後、ソースコードから選択する

HTML要素などが重なっていて、どうしてもHTML要素を選択できない場合は、とりあえず近くの選択できる要素を選択します。

例えばこんな感じに、選択します。

とりあえず選択する

本当は、この部分の親要素(li)が取得した方のですが、HTMLソース部分を見るとタイトル(Aリンク)部分が選択されています。

HTML要素が選択される

現在は、赤枠で囲んだ部分のalinkがAリンクが選択されていますが、親要素(li)を取得する場合は青枠で囲まれた部分などをクリックしてみてください。

親要素が選択される

以下のように、親要素部分の設定を見ることができるようになります。

親要素部分のスタイルシート設定

それっぽいCSSセレクタがない場合

テーマのポイントとなる部分をカスタマイズする場合は、CSSセレクタがあらかじめ設定されていることも多いです。ただ、すべてに設定されているわけではありません。

設定されていないと、デベロッパーツールで、CSSセレクタが表示されないこともあります。

そういった場合は、CSSセレクターを自ら指定することで対応できます。

例えば今回の見出し(H2)にCSSが全く設定されていなかったとします。そういった時は、デベロッパーツールのスタイル表示エリアには、CSSセレクタが表示されません。

そういった場合は、ツールの以下の部分を参考に、CSSセレクタを追加してやります。

CSSセレクタの参考

大きくするとこんな感じ。これが、現在の要素に関連するCSSセレクタのすべてです。

CSSのパス

これを参考に、「#the-content h2」、「div.article div#the-content h2」みたいにCSSセレクタを書いてもOKです。全てを指定しても良いのですが、何個か指定すればそれで十分かと思います。(それだけを指定出来るCSSセレクタであれば1つだけでも良い)

このようにCSSセレクタをかけるようになれば、スタイルシートで変更したい部分の9割以上の箇所を設定できるようになるかと思います。

参考

CSSセレクタについて詳しくは、以下などがサンプルも豊富でわかりやすいです。読んでおくと、CSSセレクタの指定方法などがある程度わかると思います。

参考 意外と知らない!?CSSセレクタ20個のおさらい|Webpark

参考 セレクタ|CSS HappyLife ZERO

デベロッパーツール上で設定を変更してみる

編集したい箇所の、CSSセレクタが判明したら、次はスタイルの設定を書きます。

WordPressテーマなら、style.cssなどに記入していくところですが、その前に、デベロッパーツール上で、いろいろとカスタマイズを試してみることをおすすめします。

元からある設定を変更する

既に、設定してある値を変更するのは簡単です。

例えば、このサイトの以下のH2見出しを変更するとします。

A2見出し

先程のCSSセレクタの取得方法で、ツールに表示させると以下のようになります

H2見出しのCSSセレクタと設定

CSSの設定に関しては、以下のページなどで調べると使い方も載っていてわかりやすいと思います。

参考 スタイルシートリファレンス(ABC順)

例として先程の見出しの、背景色を緑色に変更するカスタマイズをしたかったとします。背景を編集するにはbackground-colorを変更します。

ツールのbackground-colorの値部分を選択すると以下のようになります。

背景色の値の変更

この入力部分に、緑色(#339900)を入力すると以下のようになります。

背景色を緑色に変更

色を入力した瞬間に、リアルタイムで、設定が反映されます。

見出しに背景色緑色がリアルタイムに反映される

あとは、先程の設定部分を選択してコピーします。

設定を選択する

これを、テーマのstyle.cssの最後や、子テーマのstyle.cssに追記して設定していない部分を削除すれば、以下のようになります。

あとは、ファイルを保存して、アップロードして、ブラウザをリロードすれば設定が反映されます。(Wordpress管理画面からの編集でも良いけど、一度ローカルで編集した方が堅実です。)

親テーマを編集する場合、テーマ自体の設定が書かれている部分を書き換えても設定は反映されます。けれど、いろいろカスタマイズをしているうちに、どこを編集したのかわからなくなります。ですので、慣れないうちは、style.cssに追記するのをおすすめします。というか子テーマを使ったほうがいいと思います。詳しくは「Wordpress 子テーマ」で検索してみてください。

参考

良い色などを探すには、以下のページなどが参考になります。

参考 色見本と配色サイト – color-sample.com

新しい設定を追加する

先程の、「.article h2」に新しいスタイルの設定を追加する方法も紹介しておきます。

カスタマイズ用の設定を見つける

やりたいことが頭の中にあるのに、コードがわからない場合は、以下のページなどを参考にしてください。

参考 スタイルシートリファレンス(目的別)

参考 CSS逆引きリファレンス(目的別プロパティ辞典)-HOME PAGE ZERO ガイド-

というか、Googleで以下のように検索する方が楽かもしれません。

CSS 目的

ex. CSS 角を丸く

ex. CSS 中央ぞろえ

新しい設定の追加

とりあえず、カスタマイズのイメージが固まって、機能を追加するにはデベロッパーツールのスタイルエリアの何もないところをクリックします。

新しい設定の追加

すると以下のように、新しい設定の入力欄が表示されます。

新しい設定の入力欄

この部分に、設定を書いていきます。今回は例として見出しの角を丸くしてみたいと思います。

見出しの角を丸くする

上の画像のように、新しい設定を追加すると、リアルタイムで設定が反映されます。

見出しの角を丸くした結果

とりあえず、設定を追加したい部分は、このような作業を繰り返し行います。

そして、設定が完了したら、先程と同様に、設定を選択&コピーします。

追加した設定も含めてコピー

あとは、テーマのstyle.cssに貼り付けて、変更していない部分を削除するだけです。

デベロッパーツールで、カスタマイズをすると、コードを補完してくれる機能があります。

デベロッパーツールのコード補完機能

こういった機能もついているので、コードをすべて憶える必要がなく、手軽に入力ができます。

新しいCSSセレクタを用意して設定を書く

新しい設定を書くには、以下の「+」ボタンを押して設定を追加していてください。

新しい設定を追加する

このようにすることで、いろいろな設定を試すことができます。

まとめ

このように、テーマのスタイル編集に慣れないうちは、デベロッパーツールでテスト&コピー&ペーストを繰り返して、「この設定を行うとどうなるのか?」などを理解していくのが最も手っ取り早いかと思います。

尚、冒頭でも書いたように、今回はChromeのデベロッパーツールについて書きましたが、他のブラウザ(Firefox、Opera、IE、Safari)でも同様の操作で、同様のことを行うことができます。

どのブラウザでも良いので、トライ&エラーを手軽に何度でも行えるデベロッパーツールを使ったCSSの編集は、初めてテーマを編集する人ほど、是非利用してもらいたい方法です。

今回紹介した方法で、すべてのケースに対応できるわけではありません。けれど、簡単なスタイルシートの編集なら、9割がた対応できるのではないかと思います。

『WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方』へのコメント

  1. 名前:ボヘミアン 投稿日:2015/03/27(金) 22:15:40 ID:148d3fe83

    デベロッパーツール、便利ですよね。デバイスモードでPCからスマホやタブレットのスタイルも確認できますし、本当に助かります。

  2. わいひら 名前:わいひら 投稿日:2015/03/27(金) 22:52:45 ID:3dfbd7042

    Chromeのデバイスモードは本当に便利ですよね。
    僕は普段、Firefoxのレスポンシブデザインビューを使用していたので、割と最近になって気づいたのですけど、Chromeのスマホ操作感の再現はすごいですね。
    モバイルの動作確認にはもはや欠かせません。