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

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

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

私はずっと使い続けた某ブラウザーからGoogle chrome(グーグルクローム)に変えましたが、その魅力がわかり、今後ブラウザーを変えることはなさそうです。
前に使ってた某ブラウザーはパソコン起動直後はなかなか立ち上がらず、たまに読み込みのマークがグルグル回ってうまく開けなかったり最悪、フリーズとか何度もありました。

ただGoogle chromeを使い始めて思ったのはとにかく最初の読み込みから速い!
ページ切り替えもスイスイ進んでくれます。
多くの方はご使用されてるいると思いますが、ネットビジネスの作業はとくに複数のページを開いたり切り替えたりすることも多いので、まだの人はブラウザーにGoogle chromeを使うことをおススメします。

Google chromeを入手


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

このGoogle chromeの便利なところはそれだけではありません。
デベロッパーツールが非常に使い勝手がいいです。
このツールの説明は少し後にします。

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

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

さらに厄介なのが自分が設定してるテーマによって編集したい場所でもクラス名が違ったりします。
インターネットで参考になるサイトなどを探しても「○○の部分を編集したいなら●●(クラス名)を編集すればいい」と、とあるサイトに書いてありましたが、残念ながら私が設定してるテーマには●●という名前のクラスはありませんでした。
そういうことを知ってるのか知らないのか自分が使ってるテーマにしか使えない話をテーマ名も書かずに普通に説明してるサイトはかなり多くあります

同じテーマ名を元に説明したサイトがあるに越したことはないですが、そうそう都合よくみつからないので、ここはやはり自分で調べて自分でできるようになる必要があるところの一つです。
「○○のテーマを説明してるサイトを探す」から「CSSをどのように効率よく編集するか」という考え方に変え、デベロッパーツールの存在に辿り着きました。

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

その前に

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

ワードプレスの子テーマの作り方

子テーマの作り方

ワードプレスでCSSなどを編集する時は先に子テーマを作っておくことが必須です。 子テーマは親テーマに関連付けられたテーマで、親テーマはアップデートをするとCSSなどの編集内容が失ってしまいますが、子テーマはそうした問題も回避でき、躊躇するようなところも好きに色々試せます。(17/10/18)
記事を読む

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

こちらではデベロッパーツールの主な使い方を説明します。
デベロッパーツールを使うことにより、任意のページのタグ、クラスなどの構造を確認できたり、編集もできます。
ここではワードプレスを前提とした話なのでデベロッパーツールは確認だけに使用し、CSSの直接の編集はワードプレスの子テーマのファイルで作業することを推奨します。

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

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

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

ネットビジネスで生活する道 Google chromeのデベロッパーツール
ツールメニューの左から2番目はスマートフォンなどの携帯端末でのプレビューが確認できます。

ネットビジネスで生活する道 Google chromeのデベロッパーツール
ツールメニュー一番左がコードの構造を確認できるアイコンです。
ここをクリックして表示されてるページの任意の場所にカーソルを移動してみてください。

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

ネットビジネスで生活する道 Google chromeのデベロッパーツール
選択してる状態でクリックすると選択された場所が固定され、ツール内のコードも反転され、前後、どの入れ子かなど細かい階層が確認できます。

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

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

ネットビジネスで生活する道 ワードプレス
更新後、テキストに下線が追加されました。
該当箇所さえわかればお好みのコードを入力するだけです。

 

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

私もかなり悩まされましたが対処方法はだいたい次のいずれかです。

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

ワードプレスの管理画面で編集できる箇所は限られています。
このようにデベロッパーツールで編集したい場所を確認してCSSを記入していけばスイスイデザインが進みます。
どうように色を変えたり隙間を空けたりするか細かく設定するためにCSSは必須です。
HTMLやCSSはタグで囲ったり、出したい効果のプロパティを追加する理屈がわかれば、種類や効果などある程度はネットで見れば調べられます。
デベロッパーツールと並行して使いこなせるようになれるよう時間を惜しまず身に付けましょう。



考察TOPへ
HOMEへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です