Google chromeのデベロッパーツールはCSSの編集に最適

こちらではグーグルの提供しているブラウザーであるGoogle chrome（グーグルクローム）と
それに搭載されているデベロッパーツールの説明をさせていただきます。

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

インターネットビジネスで稼ぐためにブログやサイトの編集作業をする時はもちろん、普段インターネットで閲覧したりする時も皆さんはどのブラウザーを使っているでしょうか？

私はずっと使い続けた某ブラウザーからGoogle chrome（グーグルクローム）に変えましたが、その魅力がわかり、今後ブラウザーを変えることはなさそうです。

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

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

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

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

CSSの編集にはデベロッパーツールが不可欠

このGoogle chromeの便利なところは読み込みが早いだけではありません。

デベロッパーツールが非常に使い勝手がいいのです。
このツールの説明は少し後にさせていただきます。

ワードプレスを使ってのブログの編集で困ったのは、編集したい部分のCSSの場所を探そうと思った時、どれが該当するクラスなのか、style.cssのファイル内でわからない場合があります。

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

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

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

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

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

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

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

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

その前に

ワードプレスでCSSを編集するなら事前に子テーマを作って子テーマ内で編集することをおすすめします。
下記リンク先を参考に後々のことを考えて作成することをおススメします。

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

それでではここからデベロッパーツールの主な使い方を説明させていただきます。
デベロッパーツールを使うことにより、任意のページ内のタグやクラスなどの構造を確認できたり、編集もできます。

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

まず確認したい任意のページを開き、WindowsはF12キー、MacはCommand＋Option＋Iキーを押します。

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

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

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

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

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

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

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

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

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

編集する該当箇所さえわかればあとはお好みのコード（下線のコードなど）を入力するだけです。

目的のHTMLやCSSのコードがわからなくてもこれらのコードはネット上でいくらでも見つかるので難しくありません。

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

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

・間違ったクラス名やIDを指定しているので正しい物を指定する
・記述内容が間違っている可能性があるので見直す（1文字1文字確認）
・Google chromeのキャッシュを削除した後、更新してみる（CTRL+SHIFT+DELETE）
・更新の際、F5ではなく、「SHIFT+F5」のスーパーリロードを実行する

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

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

HTMLやCSSはタグで囲ったり、出したい効果のプロパティを追加する理屈がわかれば、種類や効果などある程度はネットで見れば調べられます。

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

デベロッパーツールと並行して使いこなせるようになれるよう時間を惜しまず身に付けましょう。

考察TOPへ
HOMEへ