アピールエリアのカスタマイズやサイト型トップページの作り方を公開してから、
これ私のカスタマイズだー♪と分かるCocoonサイトがちらほら見られるようになりました。
公開したカスタマイズを使ってくださるのは嬉しいです!
一方で、
サイト型にはしたいけどCSSいっぱで諦めた。
コード見るだけで吐き気がぁぁぁ
嫌悪感を感じる声も聞かれ、もう少し分かりやすく記事を書けないものかと伝える難しさを感じています。
今回はカスタマイズに興味はあるけどCSSの使い方が分かりにくいと思っている方へ、少しお役に立てるといいなという情報を書いてみます。
- 私がおこなっているカスタマイズの流れ
- CSSコードの書き方
- セレクタの調べ方（この記事ではクラス名）
- デベロッパーツールの見方
- SWELL風目次デザインのCSS
HTMLとCSSの違いについて
HTMLとCSSは共にWebページ作成の基本となる言語ですが役割の違いがあります。
HTML
「Webページの骨組み」になる言語。
家で例えるなら基礎、柱、梁の部分です。
文字、表、画像、リンクなどがWebページのどこに何を表示するかを指定します。
タグで囲んで使用し、まとまりを表す<div>や見出しに使う<h2>などブログを書いている人ならお馴染みのタグもすべてHTMLを使っています。
CSS
「WebページのHTMLを装飾し、見た目を整える」言語。
家で例えるなら壁紙、塗装、インテリアになります。
CSSだけではWebページを作ることはできず、HTMLと組み合わせて使います。
当サイトのカスタマイズで主に使用するのはこのCSSでスタイルシートとも呼ばれます。
【コードの書き方】
セレクタ { プロパティ : 値 }
- セレクタはCSSをどのHTML部分に適用させるか紐づけるところで、クラス名、ID名、HTMLタグ等を指定できます
- プロパティは適用するスタイルの種類で数多くあります
- 値は各プロパティに対応する単位の数字、px、％等を使い指定します
- セレクタにクラス名を指定するときは先頭に.（半角ドット）をつけます
- プロパティを複数続けて記述するときは;（半角セミコロン）で区切ります
- メモ書きするときは/* */内に記述します（コメントアウトと言います）
- コード部分はすべて半角英数字を使います
カスタマイズする際の基礎知識としてHTMLとCSSの役割の違いをざっくりと、基本的な書き方は正確に覚えておくとよいですね。
カスタマイズの流れは５ステップ
次に私がおこなっているカスタマイズ方法をご紹介します。
- Step1セレクタ（クラス名）を調べる
デザインを変更したい箇所にどんなセレクタ（クラス名）が使われているかを調べます
- Step2プロパティを調べる
自分がイメージするデザインに必要なCSSプロパティを調べます
- Step3（デベロッパーツールでシミュレーションする）
この手順は省略してもOKですが覚えておくと便利です。
- Step4スタイルシートにCSSを入力する
- Step5確認
カスタマイズ例：Cocoonの目次のデザインを変えたい
例えば目次のデザインを変えたいなという場合。
カスタマイズしたい箇所のセレクタ（クラス名）を調べる
「CSSをどのHTML部分に適用させるか」紐づけるためのセレクタ部分にはクラス名やID名、タグなどいくつか指定することができます。
セレクタ部分を調べるために活用できるのがGoogle Chromeの標準機能で使えるデベロッパーツール。（Google Chrome以外でも使えるブラウザがあるので試してみてください）
詳しい使い方はこちらのサイトが参考になります。（他サイトが別タブで開きます）
- 現在のページ（クリックした箇所）のHTML・CSSを調べる
- このツール上で実際にCSSを入れてシミュレーションする
- コードのエラーを見つける
主に開発に携わる方が様々な用途に使うのですが、少しだけデザインを変えたいな～という一般ユーザーカスタマイズの場合でもHTMLとCSSの検証ができることはとても便利！
デベロッパーツールの開き方
確認したい箇所を右クリックして「検証」をクリックすると、同ページの右側にコードが並んだデベロッパーツールが展開されます。
デベロッパーツールの見方
コードがずらっと並び、上段はＨＴＭＬ、下段がＣＳＳになっています。（このレイアウトは変更可能）
何が何だか分からなくてもざっくりと見れれば大丈夫。何度か使っているとそのうち慣れてきます。
デベロッパーツールのHTMLを見るとセレクタが分かる
例えば目次部分をクリックして検証すると上段のHTMLは、
<div id=”toc” class=”toc tnt-number toc-center tnt-number border-element”>の部分（またはその近くの子要素）がフォーカスされているかと思います。
近くの子要素がフォーカスされているときは少し上に戻って親要素を探すと分かりやすいです。
ここのHTML部分から、Cocoonの目次には toc というクラス名が使われていることが分かります。（tocに続いて複数あるクラス名は設定やスタイルに使われています）
クラスとは要素につける名前みたいなもので複数つけることができるよ！
▼は親要素を表し、▼をクリックすることでその中に入っている子要素を開閉できます。（展開されると▼の向きが変わります）
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の意味は下記の通り。
カスタマイズするにはここに変更したいプロパティを入れていきます。
ここまでくればもう少し！
プロパティを調べる
プロパティは適用するスタイルの種類でたくさんありますが、簡単なカスタマイズで使うのは定番の項目だけでも十分。
すべて覚えなくても今の時代、ネットで検索すればたくさん情報があるので大丈夫です。
調べることが大事！！
など
他にもpositionを使うと要素を任意の場所に配置できたり、flexは要素の並び方を柔軟に指定できたり、animationでは要素を動かすことができます。CSSでできることはたくさん！
デベロッパーツールでシミュレーションする
直接スタイルシートに記述しても良いのですが、本番環境なのでコード記述ミスがあった場合にレイアウトが崩れてしまっては困ります。
そんなときにデベロッパーツールが活躍。
CSSプロパティをツール上で入力するとすぐにデザインが反映されプレビューで確認することができます。ここでやりたいカスマイズを試してみるのに便利ですね！
スタイルシートにCSSを入力する
CSSの編集は子テーマを使用します。
CSSの編集についてはこちらの記事にまとめましたのでご覧ください。
今回の目次カスタマイズ例はSWELL風
ちなみに今回の目次デザイン例は有料テーマSWELL風にしています。
ボックスデザインの記事にもサンプルを掲載していますが、セレクタ部分を”box〇”から目次のクラス名”toc”に変えることでコピペで応用することができます。
.toc{
margin: 2em auto;
padding:2em;
background:linear-gradient(-45deg,transparent 25%,#eee 25%,#eee 50%,transparent 50%,transparent 75%,#eee 75%,#eee);
background-size: 4px 4px;
border:none;
border-bottom: 4px double #ddd;
border-top: 4px double #ddd;
background-clip: padding-box;
min-width:700px;
}
この記事の目次にもこのデザインを入れています♪気になった方はコピペしてみてください。
ネット上で公開されているコピペできるカスタマイズも、自分のサイトに合わせたセレクタにするだけでこのように応用できるものがたくさんあります。
まとめ
- 私がおこなっているカスタマイズの流れ
- CSSコードの書き方
- セレクタ（CSSクラス）の調べ方
- デベロッパーツールの見方、便利な使い方
以上のことについてまとめました。
今回の記事で一番お伝えしたいことは
セレクタ + プロパティを調べれば
誰でもCSSは書ける
ということです。
基本的な書き方（半角を使うことや {} や ; を忘れない、単位など）を守れば、プロパティはその都度調べていくだけでCSSは完成します。
特に私はデベロッパーツールでのセレクタ（クラス名やID名)の調べ方を知ったときにカスタマイズの幅が広がったので、皆様にもお伝えできればいいなと思って記事にしました。
お役に立てると幸いです。
おまけ／ポチップはじめました
設定大変だったのだ…
ホッと一息つきたいときに、よかったらどうぞ^^
ポチップ
Comment