Google chromeのデベロッパーツールはCSSの編集時に便利

ワードプレスのテーマでザ・トールをご利用されてる方は、とくに専門の知識なども必要とせずに標準装備されてる機能を利用すればそのままサイトやブログ運営をスタートできます。

ただ、コンテンツの幅であったりマージンなどご自身で細かいレイアウトの調整などをしたいと感じた場合はやはりCSSの編集をする必要が出てきます。

そこで今回はCSS編集時に便利なGoogle chrome（グーグルクローム）のデベロッパーツールの使い方をご説明をさせていただきます。

以降の内容は一部を除いて、適用しているテーマがザ・トールでもそれ以外でも関係ない内容なのでご安心ください。

Google chromeは表示速度、安定性がバツグン！

まず、あなたは普段インターネットで閲覧したりする時はどのブラウザーを使っているでしょうか？

私はWindowsパソコン購入初期から使い続けた某ブラウザーから数年前にGoogle chrome（グーグルクローム）に変えました。

それまで使ってた某ブラウザーはパソコン起動直後はなかなか立ち上がらず、たまに読み込みのマークがグルグル回ってうまく開けなかったり最悪フリーズとか何度もありました。

ただ同じ環境でGoogle chromeを使い始めて思ったのはとにかく最初の読み込みから速い！

ページ切り替えもスイスイ進んでくれます。

今では多くの方はご使用されてるいると思いますが、ネットビジネスの作業はとくに複数のページを開いたり切り替えたりすることも多いので、まだ使用されていない方は使い勝手や安定性の面からブラウザーにはGoogle chromeを使うことをおススメします。

CSSの編集にはデベロッパーツールが大変便利

そしてここから本題に入ります。
Google chromeの便利なところは読み込みが早いだけではありません。

搭載されてるデベロッパーツールが非常に使い勝手がいいのです。

ワードプレスを使って困ることの一つに、編集したい部分のCSSの場所を探そうと思った時、どれが該当するクラスなのか、style.css（スタイルシート）内でわからない場合があります。

該当するクラスやIDを見つける為にstylecssと作成したページを何度もにらめっこして探すだけでも場合によってはかなりの時間がかかってしまいます。

私は過去に仕事でHTMLやCSSを使ったことがありましたが、自分が作ったページならともかく、ワードプレス上ではどのような定義、構造でクラスの名前がつけられてるのか理解ができませんし、同じように思ってる方も多いと思います。

さらに厄介なのが自分が適用してる「テーマによっては」編集したい場所でもクラス名が違ったりします。

インターネットで参考になるサイトなどを探しても「○○の部分を編集したいなら●●（クラス名）を編集すればいい」と、某サイトに書いてありましたが、残念ながら私が設定してるテーマには●●という名前のクラスはありませんでした…。

そういうことを知ってるのか知らないのか自分が使ってるテーマにしか使えない話をテーマ名も書かずに普通に説明してるサイトはかなり多くあります。

同じテーマ名を元に説明したサイトがあるに越したことはないですが、そうそう都合よくみつからないので、ここはやはり自分で調べて自分でできるようになる必要があるところの一つです。

そこで「○○のテーマを説明してるサイトを探す」ではなく「該当箇所のCSSをどのように効率よく編集するか」という考え方に変え、デベロッパーツールの存在に辿り着きました。

後にデベロッパーツールの主に使う部分の説明をしますが

その前にワードプレスでCSSを編集するなら事前に子テーマを作っておくことをおすすめします。

ワードプレスの子テーマとは？

前段階が多くて申し訳ございませんが
ワードプレスでブログを運営するにあたって子テーマの準備は必要な作業と思ってください。

ワードプレスの通常のテーマを「親テーマ」と呼ぶなら、その親テーマに関連付けられた編集用のテーマが「子テーマ」になります。

例えば親テーマで直接CSSを編集して失敗すると、最悪レイアウトがグチャグチャになり取り返しがつかない事態が発生することがあり得ます。

ただ子テーマでCSSの編集をして仮に失敗しても、親テーマが残ってるならいくらでも新しい子テーマがつくれるのでやり直しがききますし親テーマに切り替えればいつでも初期状態に戻せます。

それにもし親テーマで編集した後にテーマのアップデートを行うと編集内容がリセットされてしまいます。

普段から子テーマでしか編集をされていない場合は親テーマのアップデートの影響は受けません。（アップデートの内容によっては仕様が変わり一部影響が出て微調整は必要となります。）

そういうデメリットを回避する為に、ワードプレスを少しでも安全に利用する為にも
子テーマを事前に作り適用することは最優先といっても過言ではありません。

子テーマの作り方はネットで探せばすぐにみつかりますし難しくありませんのでここでは省略させていただきます。

なおザ・トールをご利用されてる方はインストール時に既に子テーマを適用されてるかと思います。
編集する際もテーマエディターを開かず、カスタマイザー内から直接できます。

関連記事

CSSや各コードの設置

ザ・トールでは基本的に必要な機能はカスタマイザーからの簡単な操作でほとんどできます。 ただ、どうしても独自でCSSの設定したり、必要なコードを「header」や「body」タグの中に挿入したい機会もあるかと思います。  […]

子テーマを適用したらいよいよデベロッパーツールを使うCSSの編集へと着手できます。

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

それでではここからデベロッパーツールの主な使い方を説明させていただきます。

デベロッパーツールを使うことにより、任意のページ内のタグやクラスなどの構造を確認できたり、編集もできます。

ここではワードプレスを前提とした話なのでデベロッパーツールは目標の確認だけに使用し、CSSの直接の編集はワードプレスの子テーマのファイルで作業することを推奨します。

まずクラス名などを確認したい場所があるページを開き、WindowsはF12キー、MacはCommand＋Option＋Iキーを押します。

するとデベロッパーツールが起動します。

ツールメニュー一番右の●3つが縦に並んでるアイコンをクリックすることでデベロッパーツールの表示する場所を変更できます。

ツールメニューの左から2番目はスマートフォンなどの携帯端末でのプレビューが確認できます。

ツールメニュー一番左がコードの構造を確認できるアイコンです。
ここをクリックして表示されてるページの編集したい場所にカーソルを移動してみてください。

上の画像は私が運営してる他のブログですが、右側のサイドメニュー下のアーカイブにカーソルをあわせると「archives-2」というIDが割り当てられているのが確認できます。
（固定ページのタイトルなどワードプレスでは選択してるテーマ関係なく共通してるクラス名もあります。）

選択してる状態でクリックするとその場所が固定され、ツール内のコードも反転され、前後、どの入れ子など細かい階層が確認できます。

例としてここのアーカイブのテキストに下線を引いてみたいので、利用しているテーマの「style.css」のファイルに以下のように追記して保存します。

#archives-2{
text-decoration: underline;
}

更新後、アーカイブ内のテキストに下線が追加されました！

このようにデベロッパーツールを使えば、編集する箇所に該当するクラス名などがわかるので、あとはお好みの効果を施すコード（下線のコードなど）を入力するだけです。

CSSを編集しても内容が更新されない場合

CSSを編集し、更新しても更新内容が反映されてない場合が稀にあります。
私もかなり悩まされましたが対処方法はだいたい次のいずれかです。

ワードプレスの管理画面で編集できる箇所は限られています。

ちょっと凝ったデザインやレイアウトをするためにCSSを編集しようと思ったら、
今回のようにデベロッパーツールで編集したい場所を確認してCSSを記入していけばスイスイデザインが進みます。

実際、サイトの作り方は人それそれなので、どうように色を変えたり隙間を空けたりするか細かく設定するためにCSSの編集は必須です。

HTMLやCSSそのものは使いたい効果をタグ囲ったりプロパティを追加するだけです。
理屈がわかれば、該当するコードはネットで見れば調べられます。

このようにネットビジネスでワードプレスを使用している方ならある程度は自分で調べてスキルを身に着ける必要があるのはご理解していると思います。

デベロッパーツールと並行して使いこなせるようになれるよう時間を惜しまず自分の納得いくデザインにできるようにチャレンジしてみてください！