CSSセレクタ（クラス）の調べ方／カスタマイズにはデベロッパーツールが必須！

この記事で分かること

私がおこなっているカスタマイズの流れ
CSSコードの書き方【基本】
セレクタの調べ方（この記事ではクラス名）
デベロッパーツールの見方
SWELL風目次デザインのCSS

公開したカスタマイズを使ってくださるのは嬉しいです!

一方で、

サイト型にはしたいけどCSSいっぱで諦めた。

コード見るだけで吐き気がぁぁぁ

嫌悪感を感じる声も聞かれ、もう少し分かりやすく記事を書けないものかと伝える難しさを感じています。

今回はカスタマイズに興味はあるけどコーディングのハードルが高いと感じる方へ、少しお役に立てるといいなという情報を書いてみます。

この記事の内容を覚えると、今までただコピペしていただけの方でもCSSの意味が分かり、自分でコードを書くきっかけになるはずです。

ちょっと読んでみようと思ったら脱・初心者^^

Contents

HTMLとCSSの違いについて
1. HTML／骨組みを造る
2. CSS／装飾等のスタイルを設定
CSSカスタマイズの手順は５ステップ
CSSカスタマイズ例：Cocoonの目次のデザインを変えたい
CSSを使って目次をSWELL風にカスタマイズ
まとめ／デベロッパーツールを使えば誰でもCSSは書ける
おまけ／ポチップはじめました

HTMLとCSSの違いについて

HTMLとCSSは共にWebページ作成の基本となる言語ですが役割の違いがあります。

HTML／骨組みを造る

HTML・・・HyperText Markup Languageの略

「Webページの骨組み」になる言語。

家で例えるなら基礎、柱、梁の部分です。

文字、表、画像、リンクなどがWebページのどこに何を表示するかを指定します。

タグで囲んで使用し、まとまりを表す<div>や見出しに使う<h2>などブログを書いている人ならお馴染みのタグもすべてHTMLを使っています。

CSS／装飾等のスタイルを設定

CSS・・・Cascading Style Sheetの略

「WebページのHTMLを装飾し、見た目を整える」言語。

色塗りといった装飾の位置づけですが、アニメーションで動きを加えたりCSSでできることは多岐にわたります。

CSSだけではWebページを作ることはできず、HTMLと組み合わせて使います。

当サイトのカスタマイズで主に使用するのはこのCSSでスタイルシートとも呼ばれます。

CSSの基本

【コードの書き方】
セレクタ { プロパティ : 値 ; }

セレクタはCSSをどのHTML部分に適用させるか紐づけるところで、クラス名、ID名、HTMLタグ等を指定できます
プロパティは適用するスタイルの種類で数多くあります
値は各プロパティに対応する単位の数字、px、％等を使い指定します
セレクタにクラス名を指定するときは先頭に.（半角ドット）をつけます
プロパティを複数続けて記述するときは;（半角セミコロン）で区切ります
メモ書きするときは/* */内に記述します（コメントアウトと言います）
コード部分はすべて半角英数字を使います

カスタマイズする際の基礎知識としてHTMLとCSSの役割の違いをざっくりと、基本的な書き方は正確に覚えるようにしましょう。（コーディングは一文字でも違うと反映されないため正確さが必要となります）

他に、JavaScript（ジャバスクリプト）といったWebページに動きをつけるためのプログラミング言語があります。

目次に戻る

CSSカスタマイズの手順は５ステップ

次に私がおこなっているカスタマイズ方法をご紹介します。

Step1
カスタマイズしたい箇所のCSSセレクタ（クラス名）を調べる

デザインを変更したい箇所にどんなセレクタ（この記事ではクラス名を使用）が使われているかを、デベロッパーツールで調べます。
Step2
プロパティを調べる

自分がイメージするデザインに必要なCSSプロパティを調べます
Step3
（デベロッパーツールでシミュレーションする）

この手順は省略してもOKですが覚えておくと便利です。
Step4
スタイルシートにCSSを入力する
Step5
確認

目次に戻る

CSSカスタマイズ例：Cocoonの目次のデザインを変えたい

例えば目次のデザインを変えたいなという場合。

カスタマイズしたい箇所のCSSセレクタ（クラス名）を調べる／デベロッパーツール使用

「CSSをどのHTML部分に適用させるか」紐づけるためのセレクタ部分にはクラス名やID名、タグなどいくつか指定できます。当記事ではクラス名を使用します。

CSSセレクタの種類

*（すべての要素）
#id（ID名)
.class（クラス名）
A > B（子セレクタ）
A B（子孫セレクタ）
A + B（隣接セレクタ）
A ~ B（同じ階層のセレクタ）
A , B（複数のセレクタ）

セレクタ部分を調べるために活用できるのがGoogle Chromeの標準機能で使えるデベロッパーツール。（Google Chrome以外でも使えるブラウザがあるので試してみてください）

デベロッパーツールでできること

現在のページ（クリックした箇所）のHTMLの構造を調べる
現在のページ（クリックした箇所）に使われているCSSを調べる
このツール上で実際にCSSを入れてシミュレーションする
コードのエラーを見つける

主に開発に携わる方が様々な用途に使うのですが、少しだけデザインを変えたいな～という一般ユーザーカスタマイズの場合でもHTMLとCSSの検証ができることはとても便利！

便利を超えて必須ツールです。

デベロッパーツールの開き方

確認したい要素を右クリックして「検証」をクリックすると、同ページの右側にコードが並んだデベロッパーツールが展開されます。（F12キーでも開けます）

ここはサイトがどういったHTMLやCSS等で構成されているかといった情報の宝庫。

デベロッパーツールの見方

コードがずらっと並び、上段はHTML、下段がCSSになっています。（このレイアウトは変更可能）

最初は何が何だか分からなくてもざっくりと見れれば大丈夫。何度か使っているとそのうちだんだん慣れてきます。

デベロッパーツールのHTMLを見るとセレクタが分かる

例えば目次部分をクリックして検証すると上段のHTMLは、

<div id=”toc” class=”toc tnt-number toc-center tnt-number border-element”>の部分（またはその近くの子要素）がフォーカスされているかと思います。

近くの子要素がフォーカスされているときは少し上に戻って親要素を探すと分かりやすいです。

POINT（大切！）

class=”toc tnt-number toc-center tnt-number border-element”>

ここのHTML部分から、Cocoonの目次には toc というクラス名が使われていることが分かります。（tocのあとに半角スペースで区切られて複数あるクラス名は細かいスタイルの設定に使われています）

どの要素にどんなクラス名がつけられているのか、このクラスの見つけ方を覚えておきましょう！

クラスとは要素につける名前みたいなもので複数つけることができます。

デベロッパーツールでみるHTMLの構造

上段HTML内、右向きの▼は親要素を表し、右向きの▼をクリックすることでその中に入っている子要素を開閉できます。（開かれると下向きに▼変わります）

Cocoonの目次の場合、一番外に側の親要素のクラス名がtoc、tocを展開すると中にtoc-title（目次のタイトル）、toc-content（目次の項目）、さらにその中にolタグ（番号付きの箇条書き）などが入っているのが確認できます。親要素の中に入っているものを子要素と呼びます。

デベロッパーツールでみるCSS

下段には現在適用されているCSSが表示されます。

.toc {
    border: 1px solid #ccc;
    font-size: .9em;
    padding: 1em 1.6em;
    display: table;
}

このCSSの意味は下記の通り。
カスタマイズするにはここに変更したいプロパティを入れていきます。

使われているクラス名が分かれば第一歩！

CSSプロパティを調べる

プロパティは適用するスタイルの種類でたくさんありますが、簡単なカスタマイズで使うのは定番の項目だけでも十分。

すべて覚えなくても今の時代、ネットで検索すればたくさん情報があるので大丈夫です。

調べることが大事！！

よく使うプロパティ

border：枠線を引く（線の太さ、色、線の種類を指定できます）
background-color：背景色をカラーコードで指定する
color：文字色をカラーコードで指定する
border-radius：角の丸みをpxまたは%で指定する
padding：要素の内側余白
margin：要素の外側余白 …など

他にもpositionを使うと要素を任意の場所に配置できたり、flexは要素の並び方を柔軟に指定できたり、animationでは要素を動かすことができます。CSSでできることはたくさん！

デベロッパーツール（検証ツール）でシミュレーションする

直接スタイルシートに記述しても良いのですが、本番環境なのでコード記述ミスがあった場合にレイアウトが崩れてしまっては困ります。

そんなときにデベロッパーツールが活躍。

CSSプロパティをツール上で入力（ドロップダウンメニューから選択できます）するとすぐにデザインが反映されプレビューで確認できます。

ここでやってみたいカスマイズを試してみるとよいですよ。

あくまでテスト環境でのシュミレーションなので、該当ページを再読み込みするとリセットされます。適用させる場合はスタイルシートに入力して確定しましょう。

スタイルシートにCSSコードを入力する

CSSの編集は子テーマを使用します。

CSSの編集についてはこちらの記事にまとめましたのでご覧ください。

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

HTML？CSS？どこに書いたらいいの？戸惑う方も多いかと思いますので、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめました。特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。見たい...

目次に戻る

CSSを使って目次をSWELL風にカスタマイズ

ちなみに今回の目次デザイン例は有料テーマSWELL風にしています。

ボックスデザインの記事にもサンプルを掲載していますが、セレクタ部分を”box〇”から目次のクラス名”toc”に変えることでコピペで応用できます。

/*****SWELL目次風*****/
.toc{
       border:none;/*目次枠線リセット*/
}

.toc{
	--border-color-1:#fafafa; /*ストライプの色*/
	--border-color-2:#ddd;/*上下枠線の色*/
	margin: 2em auto;
	padding:2em;/*内側余白*/
	background:linear-gradient(-45deg,transparent 25%,var(--border-color-1) 25%,var(--border-color-1) 50%,transparent 50%,transparent 75%,var(--border-color-1) 75%,var(--border-color-1));
	background-size: 4px 4px;
	border-bottom: 4px double var(--border-color-2);
	border-top: 4px double var(--border-color-2);
	background-clip: padding-box;
}