もう失敗しない!カスタムCSS使い方とはまるポイントを徹底解説(ワードプレス)
ワードプレスに慣れてくると、
『テーマのデフォルトのままのデザインだと味気ない』
『同じテーマを使っている他のサイトとは違ったデザインにしたい』
『少しでも自分独自のデザインをいれてみたい』
なんて感じてきませんか?
難しいデザインでなくても、
見出しのデザインをオリジナルなものに変えてみたり、
テーマでは対応できない部分の色を変えてみたり、
余白をもう少し増やしてみたり
・・・・・・・・・・
デザインをちょっと変更するのに活躍するのがカスタムCSSです。
でも『カスタムCSSなんて難しそう?』『少しやってみたけどうまくいかない!』いう声もよく聞きます。
それは原理をきちんと知らずに、ネットで検索したCSSをそのままコピペするとありがちなんですね。
だから
- まず、最低限の原理を知る
- それから必要なものをググってコピペする
(コピペで不十分なら原理に基づいて自分流に変える)
がカスタムCSSの正しい手順なんですね。
そこで本記事では、カスタムCSSが初めてとか、うまくいかない、という方のためにカスタムCSSの原理を解説します。具体的には、
- カスタムCSSとは?
- CSSという言語を知る(HTMLとCSS、CSSの基本構造、特にセレクターの使い方など)
- カスタムCSSを使う前の注意事項
- CSSの書き換えで押さえておきたい2つのルール
- カスタムCSSを使う手順
- カスタムCSSがWeb表示に反映されない場合の対処方法
- GutenbergのブロックでカスタムCSSを使うためのクラスやidの指定方法
といった、使いこなすための原理と方法です。
HTMLもよく知らない、という初心者の方向けに丁寧に解説したので、少し長めの記事になっています。ご了承ください。
その分読み終えたときには、あなたもカスタムCSSの使い手ですよ。
- 1. カスタムCSSとは?
- 2. CSSという言語を知ろう
- 3. カスタムCSSを使う前の注意事項
- 4. CSSの書き換えで押さえておきたい2つのルール
- 5. カスタムCSSを使う手順
- 6. カスタムCSSを適用してもWeb表示に反映されない場合
- 7. Gutenbergのブロックにclassやidを指定する方法
- 8. まとめ
カスタムCSSとは?
ワードプレスにおいて、CSSという言語を使ってデザイン変更することをカスタムCSSといいます。テーマカスタマイザーではつくれないデザインを実現できます。
例として、テーマTwenty Seventeenで配色設定を見てみましょう。
テーマカスタマイザー(ダッシュボードメニュー 外観>カスタマイズ)の中の”色”で変更できる項目は、サイトのベースカラーとヘッダーテキスト色の2項目のみです。
”配色”ではサイトのベースカラーとして、ライト(白基調)・ダーク(黒基調)または、カスタム色指定できます。
”ヘッダーテキスト色”は、ヘッダー内のテキスト色(デフォルトでは白)を変更できます。
試しにサイトベースカラーに赤みのオレンジ、ヘッダーテキスト色に紫を選んでみました。
ヘッダーテキスト色が変わったのはすぐわかりますが、ベースカラーに選んだ赤みのオレンジは、ほんの一部(ヘッダーメニュー色と投稿日)しか適用されていません。
これでは、サイト独自の雰囲気も出しにくいですし、メリハリもつきにくいですよね。
そこで、サイドバーの項目タイトルを強調するためにカスタムCSSで背景色をつけてみました。
サイドバーのタイトルに背景色をつけるだけで、ぐっとアクセントがつきますよね(色のセンスはとりあえず無視してください(汗))。
このようにカスタムCSSを使えば、テーマカスタマイザーでできないデザインでも、自分で独自に追加してカスタマイズできるのです。
カスタムCSSでは、CSSという言語を使いますので、以下ではまずCSSについて紹介してから、カスタムCSSの使い方を解説していきます。
CSSという言語を知ろう
このセクションは少々長いので、すでにCSSについて十分知っているという方は、飛ばして頂いて結構です。
少しは知っているけど自信がないな、という方は、復習を兼ねて軽く読み流してみましょう。
CSSという言語は、実は単独で使うことはありません。Webサイトの中身を記述しているHTMLという言語とセットで使用します。
そもそもCSSはHTMLで記述されたコンテンツにレイアウトや装飾をするために開発された言語だからです。
ですので、CSSを知るためには
1.HTMLについて簡単に知る
2.CSSを使ってHTMLに装飾をしてみる
という順番で進めていきます。
HTMLの基本構造
HTMLというのは、タグと呼ばれる<>と</>で記述領域を囲むように、次のような構造をしています。
一行目はドキュメント宣言文と呼ばれており、この文章が、HTML5という形式で記述されていることを宣言しています。HTMLには古い形式としてHTML4やXHTMLなどの形式がありますが、現在の形式はHTML5ですので、普通はこの記述を1行目にします。
2行目以降は、タグと呼ばれる形式で記述されています。
<>~</>で文章を囲み、その文章に意味付けをします(マークアップと呼ばれます)。
まずは2行目の<html>で始まって、一番最後の行の</html>で終わっています。この中に、HTML文を書いていますよ、という意味です。
ちなみに、<html>の中には、lang="ja"という記述がありますが、属性といって、タグによってさまざまな属性をこのように記載することがあります。後に説明するclassとidという属性以外は気にしなくてよいです。
実はHTML5は、2021年1月に廃止されました。といっても使えなくなったわけではなく、従来W3Cという団体で規定してきたHTMLが、WHATWGという団体の管理下となったのです。これに伴いW3Cの規定したHTML5に関するドキュメントが廃止となったというわけです。
だから、現在では正式にHTML5という標準はなくなったわけですが、以前のHTML形式と区別するのに呼び方として残っていると考えればよいでしょう。
詳しくはこちらのサイトで説明されています。
最新のHTMLの正式な標準はWHATWGの規定したHTML Living Standardとなります。
ヘッドタグとボディタグ
<html>と</html>の中には、さらに2つのタグで囲まれた部分に分かれています。
<head>と</head>および<body>と</body>です。それぞれヘッドタグ、ボディタグと呼ばれており、その中身は次のようになります。
実際にブラウザで表示されるコンテンツは、ボディタグの中に記述されます。
したがって、カスタムCSSで装飾していくのは、このボディタグの中に記述された部分となります。
ヘッドタグというのは、コンテンツの記述以外のさまざまな関連情報を入れるところです。
例えばサイトのタイトルを記述するタイトルタグ<title></title>、検索表示されたときにページの説明文となるメタディスクリプションなどもこのヘッドタグの中に記述されます。
HTMLは入れ子構造である
HTMLの記述で覚えておきたいのは、一部の例外を除いてタグには始まりと終わりがあり、その中に別のタグの始まりと終わりが記述され、その中にまた別のタグの・・・というように、入れ子構造を取るということです。
<body>タグの中はブラウザで表示するコンテンツが入るところ、と説明しましたが、実際<body>~</body>の~の部分には、
・見出しとなる<h1>(見出し)</h1>
・文章を記述する<p>(文章)</p>
・画像を表す<img>タグ
など、さまざまなタグが入り込みます。
また、タグで囲まれた部分のことを”要素”ともいいます。
すなわち、HTMLはタグで形成された要素の中にまた別のタグで形成された要素が入っている入れ子構造だとも言えます。これを親要素の中に子要素が入っていると表現します。よく使う言葉なので覚えておきましょう。
HTMLはタグで囲んで要素をつくる。
親要素の中に子要素の入った入れ子構造をとる。
カスタムCSSの第1歩はHTML要素を特定すること
カスタムCSSを使ってカスタマイズ(デザイン変更)するには、自分がカスタマイズをしたい部分がHTMLの中のどの要素タグなのかを調べることから始まります。
どのHTMLタグの部分を変更するのか?
そのHTMLタグの親要素は何か?
こうして、CSSで装飾する範囲を指定するのです。
『今いちよくわから~ん』という方も、あとで例を見てもらえば、意味がわかりますので大丈夫です。
コンテンツ記述に使用される主なタグ
参考までにコンテンツを記述するための主なHTMLタグを紹介しておきます。
いずれも、HTML4の時代から使用されている基本タグです。
HTML5の場合は、これに加えて、ヘッダー部分を表す<header>タグ、フッターの部分を表す<footer>タグ、記事の部分を表す<article>タグ、コンテンツ内をグループ分けする<section>タグなどが追加されましたが、もともとHTML4の頃に<div>タグですべて表していたものを、より意味づけるために新設されたタグです。
ワードプレスの記事作成でよく使われるタグとしては、見出しタグである<h1>、<h2>、<h3>・・・(数字が小さいほど大きな見出し)、段落を表す<p>、画像を入れる<img>です。
ただし、imgタグは特殊タグで、終わりを表す</img>というタグは存在しません。終わりのないタグとしてはほかにも、改行を表す<br>や横線を引く<hr>などがあります。
このようにそれぞれのタグが何を表すかを知ることも大切ですが、その前にまずはブロック要素とインライン要素を理解することが必須です。これを知っているかどうかで、HTMLの理解度がグッと変わりますので以下の記事をぜひ参照ください。
HTMLにCSSを適用してみる
それでは、HTMLがおおよそわかったところで、”HTMLにCSSを適用して装飾することとはどういうことなのか”を見てみましょう。
次のようなHTMLの記述と、ワードプレスのあるテーマでのWeb表示があったとします。
左のHTML文では、ボディタグの中に大きく4つの要素が設置されています。
<header>タグと<footer>タグが1つずつ、<div>タグが2つです。
このHTMLをあるワードプレステーマでのデフォルト表示が、上のWeb表示例としましょう。
では、次にこのデフォルト表示に、カスタムCSSを適用して色をつけましょう。
メインコンテンツ部を青色にして文字は白文字とする、
サイドバー部は緑色にして赤文字にする、
というCSSを追加してみます。この場合のCSS文は下記の青枠の通りとなります。
カスタムCSSを適用することで、右下のようにサイト表示が変わりました。
カスタムCSSで色をつける記述をしたからです。
このようにカスタムCSSを使うことで、HTMLのある要素(のある部分)のデザインを変更することができるのです。
CSS文は一見複雑に見えるかもしれませんが、以下順番に解説していきます。
CSSの基本構造
CSSの基本構造は、次の通りです。『どこに』『何を』『どうする』を記述します。
(CSSを適用する場所){(CSSプロパティ):(適用する値);}
(CSSを適用する場所)・・・『どこに』(HTMLの要素を指定する。セレクターと呼びます。)
(CSSプロパティ) ・・・『何を』(何のデザインを変更するのか指定する)
(適用する値) ・・・『どうする』(デザインを具体的に指定する)
青字で記述した{}と:(コロン)および;(ハーフコロン)は必ず必要です。
すべて半角で記述してください。また、スペース(もちろんこれも半角)は無視されますので、見やすいように適度に入れても大丈夫です。
また、先ほどのCSS例のように、
(CSSを適用する場所){
(CSSプロパティ):(適用する値);
}
のように記述してもOKです。むしろ、ワードプレスのCodexを読むと、この記述形式のほうが推奨されています。
CSS例の解説
それでは先ほどのCSS例と対比させながら解説していきます。
.mainContent {color:white; background-color:blue;}
まずセレクターを指定することで、HTMLのどの部分を対象とするのか指定することができます。
この例では.mainContentというセレクターを記述することで、class="mainContent"というクラス属性のHTMLタグを指定しています。
すなわち、<div class="mainContent">~</div>の部分を指定しているのです。
HTMLタグ内のclass属性というのは、そのタグを特定するためにHTML記述者が任意につけることができる属性です。タグを区別するための目印と考えればよいでしょう。
クラス名には、半角英数字と-(ハイフン)および_(アンダーバー)を使います(頭は英語で始める)。
次に{}内の、color:white; と background-color:blue; ですが、それぞれ適用したいCSSプロパティとその値を示しています。
CSSプロパティで何のデザインなのかを指定し、適用する値でどのようにデザインするのかを指定します。
今回の例では、
colorというCSSプロパティで文字色を指定し、値をwhiteと指定することで白に指定しています。
background-colorというCSSプロパティで背景色を表し、値をblueと指定することで背景色を青に塗りつぶします。
このように、セレクターを適正に指定して、変更したいCSSプロパティと値を記述すれば、あなたの好きなデザインに変更できる、というわけです。
主なセレクター
上の例では、クラス属性を指定しましたが、このほか下記のように様々な指定方法があります。
セレクターを理解することは、カスタムCSSを使いこなす上で、一番のキーポイントですので、少し詳しく説明していきます。
合わせて次の記事も参照ください。
クラス名をセレクターに使用する場合
このセレクターの表の上から3つ目を見れば、クラス名をセレクターに指定するには、頭に.(ドット)をつけてやればよいことがわかります。
例えばclass="mainContent"というclass属性を指定する場合は、頭に.(ドット)をつけて.mainContentとセレクターを記述すればよいのです。
タグとid属性をセレクターに使う場合
セレクターにはclass指定を一番よく使いますが、次に使うのはタグ名での指定とidでの指定です。
タグの場合は、そのままタグ名をセレクターとします。
例えば、div {color: white; }と指定すると、HTML内のすべてのdivタグ内の文字色が白となります。
idの場合は、頭に#をつければid指定となります。
例えば#header {color:white;}と指定すれば、id="header"という属性のタグ内の文字が白となります。
主なセレクターの指定方法
- HTMLタグ指定は、そのままタグ名を使う
- class属性の指定は、頭に.(ドット)をつけて、".(クラス名)“とする
- id属性の指定は、頭に#をつけて、"#(id名)"とする
classとidの違いとは?
ここで、class属性とid属性の違いを理解しておきましょう。
class属性は、同じ名前のクラス名を1つのページ内で何度でも使用可能。
id属性は、同じ名前では、1カ所しか指定できません。
したがって、id属性の方が、より限定的にページ内のHTML場所を指定できるというわけです。
蛇足ですが、idはページ内に1カ所しかないので、ページ内のリンク先として指定できるメリットもあります。
例えば、目次をクリックするとそのページ内の該当見出しに飛ぶことができるのは、見出しごとにid属性をつけているからです。
子セレクター(>)と子孫セレクタ(半角)を覚えておこう
あと、セレクターの中でぜがひとも知っておいて欲しいのが子セレクターと子孫セレクターです。
セレクターの表に、次の記述があります。
> ・・・・子セレクタ
(半角)・・・子孫セレクタ
意味は次のとおりです。
- 子セレクタ・・・・親要素の1つ下の階層の子要素が対象
- 子孫セレクタ・・・親要素の下にある全ての子要素が対象
次のHTML例で具体的に説明してみましょう。
このHTMLの中で<div>だけに着目すると、
id="contents"の中にclass="item"があり、
さらにその中にclass="section"の<div>が2つ入っている
という3層構造となっています。
それぞれの<div>を指定する方法としては、idやclassでの指定ができますよね。例えば、
#contents をセレクターとすると、<div id="contents">~</div>、
.item をセレクターとすると、<div class="item">~</div>、
.section をセレクターとすると、2か所の<div class="section">~</div>
となりますが、ここで、他の指定方法として子セレクタを使ってみましょう。
子セレクターでの指定
class="item"は、id="contents"の中にあるので、子セレクタを使って次のように書くと指定できます。
#contents>div
こう書くと、id="contents"のすぐ下の階層(1階層下)のdiv という意味になります。
(親要素)>(目的の場所) のように、親と子を>(もちろん半角)でつないでやればよいのです。
1階層下だけを指定しているので、class="item"のdivは対象となりますが、class="section"のdivは対象となりません。
同様に
.item>div
とすると、class="section"のdiv(2カ所)を指定することになります。
子孫セレクターでの指定
これに対して、子孫セレクタ(半角)を使うとどうなるでしょうか?
#contents div
にように>でなく、半角をあけて指定すると、#contentsの中にあるすべてのdivを指定することとなります。
すなわち、class="item"のdiv、およびclass="section"のdiv(2カ所)が指定されるのです。
CSSの書き方のところで半角は無視されるので自分が見やすくなるように適度に使ってよい、と説明しましたが、セレクターの途中の半角については子孫セレクターという意味があるので注意しましょう。
ワードプレスでよく使う子孫セレクター事例
子セレクタも子孫セレクタも非常によく使いますし、ワードプレスのテーマの中のCSSでもあちこちに見られます。
例えば、ブログ用の見出しの装飾と固定ページに使う見出しの装飾を分けたい場合では、個別投稿ページを表すclass="single"と固定ページを表すclass="page"を使って、
.single h1 {background-color: #0ff;}
.page h1 {background-color: #ff0;}
と指定してやると、個別投稿ページの見出し<h1>はシアンブルー、固定ページの見出し<h1>は黄色の背景色に装飾することができるわけです。
セレクターの内部で半角をなしにすると意味が違う
子孫セレクタの半角を忘れると違う意味になります。
例えば、半角のある場合として
div .section
では、<div>の中にあるすべてのclass="section"を指定することになりますが、
div.section
のように半角をなくしてしまうと、class="section"のある<div>タグという意味になります。
この指定方法もよく使われますので、混同しないようにしましょう。
同じような例で他のものをあげると、
.item .section
は、class="item"の下にあるすべてのclass="section"を指定しますが、
.item.section
は、class="item section"のタグを指定します。半角をなくすと両方の要素を持つものを指定することとなります。
1つのタグに複数のclassを指定することもできます。
class="item"とclass="section"と2つのclass属性を持つタグの場合はclass="item section"と記述します。
ここまで解説してきたのは主にタグ、class、idを使用したセレクターとそれらの組み合わせ方法ですが、このほかにもさまざまなセレクターがあります。しかしながら、まずはここまでで解説してきたセレクターの使い方をきちんとマスターすることが大切かと思います。
一応参考までに、このほかにどのようなセレクターがあるかを紹介しておきます。
主なCSSプロパティと値
セレクターについては少し長く書き過ぎましたので、CSSプロパティについては代表的なものを上げる程度にとどめておきましょう。
CSSプロパティは、それこそ非常に多くのものがありますし、年々増えているからです。
なので、こういうものがあるんだな程度に見ておいて、実際に使用するときには、ググって調べてみましょう。
ググって調べるときの注意点としては、新設されたCSSプロパティには、ブラウザによって適用されないものがある、ということです。次のサイトで調べると適用状況がわかります。
テキストに関するCSS
文字を装飾したり、行内のテキストの位置や改行指定に使用します。
この中で、初心者が使い方をよく間違うtext-alignとvertical-alignについては、次の記事を参照ください。
フォントに関するCSS
フォントの種類やサイズ、太さなどを指定するのに使用します。
色と背景に関するCSS
文字色や背景を指定するのに使います。背景は背景色だけでなく、背景画像やその位置・配置方法なども指定します。
ボックスに関するCSS
ボックスというのは、<div>に代表される箱状のエリアのことです。レイアウトの基本を知るためには、欠かせない基本となるCSSです。
レイアウトに関するCSS
レイアウトに関しては、2010年代後半までは以下のものがメインでした。
floatは、ボックスどうしを横並びにしたり、メニューとなるリンク付きテキストを横に並べたりするのに欠かせないCSSでしたが、近年は、display:flex;で始めるフレックスボックスがほぼ主流になってきています。
またさらに、display:grid; で始めるグリッドレイアウトもますます増加していくでしょう。
このあたりは奥が深いので、参考になるサイトを紹介しておきます。
その他よく使うCSS
positionプロパティ
ボックスどうしを重ねて表示(例えば画像要素の上に段落要素でテキスとを重ねる)や親要素から切り離して自由に配置するのに使います。
::before、::afterといった疑似要素
CSSでアイコンや文字を付け足したり、ボックスの中に疑似的にボックスを加えるのに使います。
カスタムCSSを使う前の注意事項
カスタムCSSとは、テーマで準備されたCSS(style.cssに記述されています)を書き換える作業となります。
カスタムCSSを適用する
=テーマのstyle.cssに記述されているCSSを書き換える
こういった、ファイル内のコードを書き換える操作というのは、間違った作業をするとファイルを壊してしまう可能性があります。したがって保険として次の準備をしておきましょう。
サイトのバックアップはあらかじめとっておく
おすすめは、プラグインAll in One WP Migrationです。私は、All in One WP Migrationでサイトデータをまるごとダウンロードしています。
FTPソフトでサーバーにアクセスできるようにしておく
カスタムCSSなど、ファイル内のコードをいじっていく場合は書き間違えると、最悪の場合サイトやダッシュボードが表示されない、なんてこともありえます(とはいえ、CSSくらいではそこまではないですが・・・)。
よもやダッシュボードが表示されない場合は、プラグインでバックアップをとっていても復旧できません。
もしもの場合に備えて、FileZillaなどでサーバーへ直接アクセスできるようにしておきましょう。
子テーマを利用する
カスタムCSSは、基本的には子テーマのstyle.cssの中に記述していくことをおすすめします。
親テーマのstyle.cssに書き込むと、テーマのアップデートによってせっかく記述したオリジナルのCSSが消えてしまうからです。
子テーマstyle.cssへの記述以外にも、次の方法でもテーマのアップデートで消されることはありません。
- プラグインSimple Custom CSSなどを使って記述をする
- 親テーマのままで、外観>カスタマイズの中の追加CSSに記述する
しかし私は、次の理由から、子テーマを使う方法を推奨しています。
- CSSはstyle.cssというファイルに集約しておくほうが便利
- 将来カスタムCSS以外にfunctions.phpやテンプレートファイルを編集する場合に備える
実は、プラグインを使ったり、テーマカスタマイザーの追加CSSに記述したCSSは、style.cssファイルに書き込まれるわけではなく、それぞれ独自に<head>タグの中に<style>~</style>を作成して記述されたり、プラグインによってはインライン指定といって直接HTMLタグの中にCSSを書き込んだりします。
このようにあちこちに書き込まれると、あとで編集するのに大変だったりするんですね。
ポケットは1つに集約しておいた方が、探し物は探しやすいというわけです。
また、カスタムCSS以外にカスタマイズレベルを上げていくと、style.css以外のテーマが持っているファイル(functions.phpやテンプレートファイル)を編集する機会が出てきます。でもやはり子テーマを使わないとテーマのアップデートで消されてしまうのです。
だから、将来カスタマイズの幅を広げていくことも考慮すると、
子テーマを最初から使っておくに限る!
と言えるわけなんです。
子テーマの役割やメリット、そして子テーマの作り方は、次の記事で詳しく解説しています。
CSSの書き換えで押さえておきたい2つのルール
もう一度次のことを思い出しましょう。
カスタムCSSを適用する
=テーマのstyle.cssに記述されているCSSを書き換える
CSSを書き換えるためには、書き換えのルールを正確に知っておかないと失敗します。
カスタムCSSを書いたのにデザインが変更されない!なんで?・・・なんて、私も昔はよく失敗してはまっていました。
そうならないためにも、CSSの書き換えのための次の2つのルールを知っておきましょう。
- 後から書いたCSSが優先される(上書きのルール)
- 詳細度が低いCSSを後から記述しても書き換えできない(詳細度優先のルール)
順に解説していきます。
先に記述されたCSSよりも後で記述されたCSSが優先される
これは単純明快ですね。
テーマのCSSはstyle.cssというテーマ内のファイルの中に記述されています。
一方でカスタムCSSは子テーマのstyle.cssの中に記述していきます。
そして、子テーマのstyle.cssは、親テーマのstyle.cssの後からロードされますので、子テーマの中のカスタムCSSの方が後から記述された形となるのです。
テーマのstyle.cssのロード(親テーマのCSSが読み込まれる)
↓
子テーマのstyle.cssのロード(親テーマのCSSに追加記述される)
したがって、子テーマのstyle.cssの中にカスタムCSSを記述すれば『先に記述されたCSSよりも後で記述されたCSSが優先される』というルールが自然と適用されることになります。
親テーマと子テーマどうしの関係はこの順番なのですが、注意しなければならないのがプラグインです。
プラグインにCSSがある場合、プラグインのCSSが最後にロードされるのです。
テーマのstyle.cssのロード(親テーマのCSSが読み込まれる)
↓
子テーマのstyle.cssのロード(親テーマのCSSに追加記述される)
↓
プラグインのCSSをロード
したがって、カスタムCSSでつくったのオリジナルのデザインがプラグインによって消されることがある、のです。
プラグインによって書き換えられると困るような大事なカスタムCSSの場合は、後述するように!importantという記述をCSSの中にして優先度を最高にする、という手法を使います。
詳細度が低いCSSを後から記述しても書き換えできない
詳細度とは
CSSには詳細度というものが定義されています。
実は、詳細度が低いCSSを後から記述しても書き換えすることができません。
したがって、この詳細度を理解しておかないと、せっかく子テーマを使ってカスタムCSSを記述しても、デザインが適用されずに、あれ?なんで?とはまることになります。
詳細度は、より限定的な要素に適用されたCSSほど高くなります。
具体的に詳細度を低いものから並べると次のようになります。
タグ指定<クラス指定<id指定<インライン指定
例えばセレクターにdivというタグを指定すると、同じページ内にあるdivタグはすべて対象となります。対象範囲が広いので詳細度は低くなります。
divをクラス指定すれば、クラスのついていないdivタグは対象から外れますのでより限定的となり、タグ指定よりも詳細度が上がります。
さらにクラスは同じページ内で複数個所につけることができますがidは1カ所しかできず、より限定的になるので、クラスよりもid指定の方が詳細度が上がるわけです。
インライン指定というのは、セレクターを使用せずにHTMLタグの中に直接CSSを書き込む方法です。
HTMLを直接限定するので最も詳細度が高くなります。
インライン指定というのセレクターを使用せずにHTMLタグの中に直接CSSを書き込むこと方法のことです。
例えば、<p>(文章)</P>の文字色を青にしたい場合、p {color: blue;}と記述するのがタグ指定の記述ですが、インライン指定ではstyle属性を使って<p>タグの中に次のように記述します。
<p style="color: blue;">(文章)</p>
以上が詳細度の高さ低さの基本で、あとはこれらの組み合わせとなります。具体的に見てみましょう。
詳細度を考慮して親テーマのCSSを書き換える方法
もう一度次のHTML文を見てみます。親テーマによって各文字色は黒に指定されているとします。
”セクション1”という文字の色は現在黒ですが、これを青にしたい場合、一番簡単な記述がこれです。
.section {color: blue;}
しかし、もし先に親テーマで次のようなCSSで指定されていると書き換えできずに文字は黒色のままとなります。
div.section {color: black;}
div.sectionというセレクターは、class="section"のついているdivタグという意味でしたね。
なのでdiv.sectionとした方が.sectionよりもより限定的となり詳細度が高くなるので、書き換えができないのです。
だから、この場合テキストの色を黒から青に書き換えするには次のように記述する必要があるのです。
div.section {color: blue;}
これなら親テーマのCSSと詳細度が同じなので、後から記述したカスタムCSSで書き換え可能となります。
ほかにも、.item>.sectionだったり、#contents .sectionといったセレクターが使われている場合でも.sectionより詳細度が高く書き換えができません。
以上から次のことがいえます。
カスタムCSSで親テーマのCSSを書き換えしたい場合、親テーマのCSSの詳細度と同等以上の詳細度を使う必要がある
具体的には先に見たように、親テーマのCSSのセレクターと同じセレクターを使えばよいのです。
親テーマのCSSがある場合、親テーマCSSと同じセレクターで指定すればよい
インライン指定されたCSSは最強
先に説明したようにインライン指定でのCSSは、セレクターの詳細度をどれだけあげても書き換えすることができません。すなわちインライン指定が最強、ということですね。
ワードプレスでインライン指定が使用されるのは次のような場合です。
・ビジュアルエディター(classicエディターでもGutenbergでも)で、文字色や太字化などの装飾をする場合。
・プラグインによりインライン指定でCSSが追加される場合。
しかし、次の手法でインライン指定のCSSでも書き換え可能です。
書き換えさせたくない場合に使用する!important
実は詳細度を無視して、一番優先される記述方法があります。それはCSSの記述の最後に!importantとつけることです。
例えば、次のように記述します。
.section {color: blue !important;}
このように書くと、.sectionよりも詳細度の高いセレクターが使用されていようが、インライン指定でcolorが指定されていようが、文字色を青色に書き換えすることができます。
しかし逆にいえば書き換え不能となりますので、!importantはむやみに使わず、どうしても書き換えされたくないCSSを記述する場合に使うものと考えておきましょう。
例えば、パソコン用とスマホ用で画像を変更したい場合、そのCSSに!importantをつけます。
(この手法は、imgタグにsrcset属性で画像切り換えができるようになってからは古い手法となりましたが。)
方法としては、パソコン用とスマホ用の画像を記述する2種類の<img>タグをHTMLの中に記述しておいて、パソコン用画面の場合はスマホ用画像を非表示に、スマホ用画面ではパソコン用画像を非表示とします。
この場合、もしあとから導入した画像関連のプラグインでこのCSSを書き換えられてしまうと、2種類の画像が同時に表示されてしまい、意図したレイアウトから大きく外れてしまいますよね。これを防ぐために!importantをつけておくのです。
カスタムCSSを使う手順
それでは、いよいよワードプレスでカスタムCSSを使っていく手順を紹介します。
手順概要
ブラウザにはGoogle Chromeを使います。Google Chromeにある開発者ツールという便利な機能を使いながらの作業となります。
手順概要は以下の通りです。
1.Google Chrome開発者ツールを使用して、デザインを変更したい部分のHTMLとCSSの記述を探します。
2.探したCSSの内容をGoogle開発者ツールで書き換えてみて、実際にサイト表示がどうなるかを確認します(この段階では実際にサイトのコードが書き変わるわけではありません)。
3.書き換えたいCSSが決まったら、WordPressのカスタムCSSを記述するエリアに記述してみて、サイトが実際に変更されることを確認します。
具体的な手順
簡単な例として、この記事の初めのほうで取り上げた、テーマTwenty Seventeenでの”サイドバーの項目タイトルに背景色をつける”という作業をしていきます。
サイドバータイトル項目の背景色をシアン色にするには、
(タイトル項目要素を示すセレクタ) {background-color: #00ffff;}
というCSSです。
なので課題は、この(タイトル項目要素を示すセレクタ)を探すことですね。
background-colorといったCSSを知らなくても、”CSS 背景色” などどググると簡単にこの種のCSSは見つかります。例えば私がよく参照するのに使うのはMDN web docsです。
CSSをググって調べたときに注意しておきたいブラウザの対応状況ですが、MDN web docsではページの最後にブラウザの対応状況も記載されているので便利なんです。先に紹介したCan I useのほうが詳細に調べるのに便利ですが、MDN web docsでも概要がわかります。
色を表すカラーコード(今回でいうとシアン色を表す#00ffff)については、次の記事を参照ください。
すでに”カスタムCSSを使う前の注意事項”で説明したように、子テーマを使用します。今回は親テーマはTwenty Seventeenですが、Twenty Seventeenの子テーマのほうを有効化しておきましょう。
Twenty Seventeenの子テーマの作り方は、以下の記事で解説しています。
Google Chrome 開発者ツールを開ける
変更前のWebページを表示させておきます。
この状態でGoogle Chrome 開発者ツールを開けます。
開ける方法としてはいくつかありますが、簡単なのはショートカットキーです。
Windowsならば、”F12キー”、MacならばCommand+Shift+Iで開けることができます。
または、ブラウザの中にカーソルを置きながら、右クリックして”検証”を選んでください。
すると画面の中に開発者ツールが開きます。
この例では右側に開いていますが、画面の下に表示されることもあります。表示場所の変更方法は下記のように、①3点メニューをクリック ②開いたDock sideで表示方法を選択 と進めれば可能です。
Google Chrome 開発者ツールの便利な使い方
開いている開発者ツールの画面を少し説明します。
上の段はElementsタブが選択されていると、画面にはHTMLが表示されています。
下の段はstylesタブが選択されて、CSSが表示されています。
Elementsタブとstylesタブは初期値では自動的に選択されているはずですが、もし違うタブになっていたら選択しなおしてください。
下の段に表示されているCSSというのは、上の段のHTMLの中で選択されている要素のCSSです。上の例では、HTMLの中のグレーに網掛されている<body class="・・・>の部分ですのことです。
Google Chrome 開発者ツールが便利なのは、このCSSを開発者ツールの中で書き換えてみると、それがWebページに反映されることです。
もちろんこの書き換えは、開発者ツールの中だけのことなので、ソースファイルを書き換えたりはしていません。したがって、このWebページをブラウザでリロード(再読み込み)すれば元に戻ってくれるので、気軽にいろいろとお試しできるわけですね。
したがって、今このWebページの中で、サイドバーの項目タイトルに背景色をCSSとして加えたければ、
1.該当の項目タイトル部分に相当するHTML要素を、上の段の中で探す。
2.そのHTML部分のCSSを表示させて、そのCSSを書き換えてみる。
という作業をGoogle開発者ツールの中でしていけばよいことになります。
変更したい場所のHTMLとCSSを探す
ではまず、変更したい要素のHTMLとCSSを探してみましょう。
①開発者ツールの左上の要素選択ボタンをクリック
すると、要素選択ボタンが有効化され青い表示に変化します。
②Webページ内のデザインを変更したい場所をクリック
もちろん、①の状態(要素選択ボタンが青い表示の状態)のままクリックします。
今回背景色をつけたいのは、サイドバーの中の”アクセス”とか、”検索”といったタイトル部です。そこで、”アクセス”という文字のところまでカーソルを動かしてみましょう。
実際に作業してみればわかりますが、Webページ内でカーソルをあちこち動かすと、カーソルを置いた場所付近の要素が青塗り表示に変わります。
”アクセス”という文字の要素にうまくカーソルが当たると、下図のように”アクセス”という文字周辺が、青く塗られます(青の下にピンクっぽく塗られているところがありますが、今は無視してください)。
すると、上の画像のように、この青塗りされた要素に適用されている主なCSSも同時に表示されています。この例では、セレクターがh2.widget-titleで適用されているCSSとしてはcolor:"321111; などがあるのがわかります。
ではカーソルをこの位置に置いたままクリックしましょう。
すると、開発者ツールの中で、このクリックした部分のHTMLがグレー色で網掛け表示されます。
(同時に、要素選択ボタンは青い表示でなくなり、無効化に戻ります)
これを見れば、サイドバー項目タイトルの”アクセス”のHTMLは、
<h2 class="widget-title">アクセス</h2>
だとわかりますね。セレクターとしては先ほど見たようにh2.widget-titleが使用されているはずです。
今この状態では、Google開発者ツールの下段のstylesタブ表示では、この要素に適用されているCSSが表示されていますので、そこに新しく
h2.widget-title {background-color: #00ffff;}
というCSSを追加入力していきます。
Google Chrome 開発者ツール上でCSSを書き換えてみる
CSSの追加入力は、次のように進めます。
①下段の右上にある+マークをクリックしてCSS入力欄を表示
セレクターとしてh2.widget-titleが自動入力されて、{}内は空の状態です。
②{}内を適当にクリックしてCSSを入力可能とする
③CSSプロパティを入力
CSSプロパティとしてbackgroud-colorを入力してリターン([Enter]キー)
④CSSの値を入力
値としてシアン色を示すカラーコード#00ffffを入力します。
すると、Webページの表示は次のようになります。
このように、今書き込んだCSSによって、”アクセス”だけでなく、サイドバーのタイトルである”検索”や”このサイトについて”にもシアン色の背景色が適用されます。
これは、セレクターh2.widget-titleで指定したことでこれらのタイトルも対象となっているからです。
今回、Google Chrome 開発者ツールの中に追加CSSを記述するのに下段右上の+マークから記入欄を表示させて入力しましたが、すでに記述されているCSSの中を編集するように追加記述する方法もあります。
例えば、今回の下段のCSSをスクロールしていくと該当のセレクターh2.widget-titleを使った記述が見つかります。
このセレクターの{}のなかに、今回の追加CSSを記述することができます。
このように、既存のCSSを編集できるわけです。追加だけでなく、すでにあるCSSの値を書き換えたりもできます。やりやすい方法で追加CSSを記述していきましょう。
適用範囲をサイドバーだけに限定する
これで一見目的は達成できたように思えますが、h2.widget-titleで指定されるタイトルが複数ある、ということをもう少し掘り下げて考えてみましょう。
もともと、サイドバーに表示されている”アクセス”や”検索”、”このサイトについて”という項目は、ウィジェットによって表示されている項目です。
そこで、同じウィジェットをフッターにも追加してみるとどうなるかを確認しました。結果は以下の通りです。
このように、フッターエリアのタイトルにも同じCSSが適用されています。
ウィジェットのタイトル部に、class="widget-title"というクラスが自動的につけられるのでこのようなことになるのです。
もちろん、このままでもよいのですが、仮にサイドバーのタイトルだけに背景色をつけたい場合はどうすればよいのか考えていきましょう。
同じclass="widget-title"が付与されていても、サイドバーとフッターエリアとでは、それぞれのタイトルが入っている親要素が異なることを利用すれば限定できそうです。
そこでサイドバーの親要素を調べてみましょう。
再びGoogle開発者ツールの要素選択ボタンをクリックして、サイドバーエリアが選択できるようにカーソルを動かしてみましょう。
上のようにうまく選択できた状態でクリックしましょう。開発者ツールの上段にサイドバーのHTMLが固定されます。
<aside id="secondary" class="widget-area"・・・・・>~</aside>がサイドバーを表す要素となっており、その中に<h2 class="widget-title">アクセス</h2>も子孫要素として入っていることがわかります。
したがって、サイドバーの中のタイトルのみに背景色をつけたければ子孫セレクターを使って、
#secondary h2.widget-title {background-color: #00ffff;}
とすればサイドバー内のタイトルだけに限定できるのです。
では先ほど追加したCSSを編集しましょう。もう一度<h2 class="widget-title">に戻って、先ほど追加したCSSのセレクター付近をクリックすれば入力編集できるようになります。
このとき、フッターエリアのタイトルの背景色が消え、サイドバーのみに適用されていることが確認できます。
以上で、変更箇所をサイドバーの中のタイトルに限定することができました。
親要素を調べて、子孫セレクターを使ってCSSの適用要素を限定する、という手法は、カスタムCSSにおいて非常によく使います。
例えば、あるブログ記事のページだけ背景色を変えたい、とか、固定ページと個別ブログページのデザインを分けたい、とかいう場合は、各ページのHTMLの<body>タグの中のクラスやidを調べて、子孫セレクターでそのページに限定する、といった使い方です。
CSSを子テーマのstyle.cssに記述する
うまく動作したCSSを、子テーマのstyle.cssの中に記述して確定させます。
Google開発者ツールから該当部のCSSをコピーします。
子テーマのstyle.cssを開けます。
ダッシュボードメニューの外観>テーマエディター へ入ります。
初めてこの画面に入る場合、次のように警告が出ますが、”理解しました”をクリックして進めましょう。
テーマエディターでは、テーマの中にあるファイルを編集することができます。
style.cssが選択されていることを確認したら、コピーしておいたCSSをヘッダーの下にペーストして”ファイルを更新”します。
カスタムCSSを適用してもWeb表示に反映されない場合
これでWebページを表示してみればカスタムCSSが適用されるはずなのですが、ときどきすぐに反映されない場合があります。
もちろん、根本的にCSSの記述の間違いや、詳細度の低いもので書き換えをしようとしている場合もありますが、その場合はGoogle開発者ツール上でもWeb表示に反映されませんので、間違いだとすぐわかりますよね。
CSSの記述ミス
よくある間違いが、半角英数を全角で記述することです。特にスペースや{}も含めてもう一度チェックしましょう。
CSSはスペルミスをしてもエラー表示をしてくれません(Google Chromeの開発者ツールで警告マークが出ることはあります)。
キャッシュが原因
CSS記述に問題がないのに反映されない場合は、キャッシュとして古いページが保存されているというのが原因だと考えられます。
キャッシュというのは、Web表示のソースとなるファイルをいちいち読み込むのでなく、あらかじめ読んだものをデータとして保管しておき、それを表示させる機能です。
プラグインなどを使ってサーバー側にキャッシュされている場合と、ブラウザ側でキャッシュされている場合があります。
サーバー側キャッシュのクリア
サーバー側にキャッシュされている場合は、使っているプラグインなどでリセットするしかありませんので、プラグインを個々に確認してください。
ブラウザ側キャッシュのクリア
ブラウザ側のキャッシュについては、CTRL+F5(MacはCommand+F5)を押すと、キャッシュがクリアされてページがリロードされます(スーパーリロードといいます)。
これ以外にGoogle開発者ツールにおすすめの設定があります。
Google開発者ツールの右上の設定(歯車マーク)をクリックすると、preferencesタグが選択された状態で開きます。ここでスクロールして項目Networkを探し、"Disable cache(while DevTools is open)“にチェックを入れる。
この設定の便利なところは、Google開発者ツールを開いているときはキャッシュが無効化し、閉じると有効に戻ることです。
普段ブラウザで閲覧するときはGoogle開発者ツールを開かないのでキャッシュが有効化された状態となります。この方が閲覧時は便利ですよね。
そして、カスタムCSSの適用作業をするときは常にGoogle開発者ツールを開いておけば、自動的にキャッシュが無効化される、ということです。
プラグインが原因
Google Chrome 開発者ツールではデザインが反映されるのに、子テーマのstyle.cssに記述するとWeb表示に反映されない場合で、キャッシュを無効にしてもダメ、そんなときは、プラグインが悪さをしている可能性があります。
そんなときは、とりあえず、CSSの記述の最後に!importantをつけて反映されるかどうか確認してみましょう。
それで反映されれば、子テーマの後から、プラグインによってさらにCSSが追加記述されたと考えられます。
プラグインを外すか、とりあえず!importantをつけたままにしておく、ということになります。
Gutenbergのブロックにclassやidを指定する方法
カスタムCSSの適用方法は以上ですが、最後にブロックエディター(Gutenberg)のブロックにカスタムCSSを適用するためのクラスとidの付与方法を解説しておきましょう。
ブロックエディターのブロックには、右側のブロックパネル(情報パネルでブロックタブが選択された状態)の一番下に”高度な設定”というのがあります。
それを開くと下記のようになっていますので、そのブロックにクラスやidを設定したければ、HTMLアンカーというところにid名、追加CSSクラスというところにクラス名を入力すればよいのです。
このとき、セレクターのようにidの頭に#をつけたり、クラス名の頭に.をつけてはいけません。
あとは、それぞれのクラス名やid名を使ってカスタムCSSのセレクターに用いれば、そのブロックにカスタムCSSを適用することができる、というわけです。
例えば私は、.my-border {border: solid 1px #ddd;}というCSSを子テーマに書き込んでおき、枠線をつけたいブロックの追加CSSクラス欄にmy-borderを入力することで薄い枠線をつけたりしています。
自分なりのブロック装飾をカスタムCSSを準備しておき、そのセレクターのクラス名をブロックの追加CSSクラス欄に書き込むようにすると便利です。
まとめ
カスタムCSSについて、その定義と使い方のほか、使う上でのさまざまな注意事項を解説してきました。
簡単にまとめますと、
- カスタムCSSとはCSSを使ってワードプレスをカスタマイズすること
- CSSは、HTMLの要素に対してデザインをする言語
- CSSの書式は、(セレクター){(CSSプロパティ):値;}
- CSSの主なセレクターには、タグ、クラス、idとこれらの組み合わせがある
- CSSで子孫セレクターや子セレクターを使うと、HTML要素をより限定的に指定できる
- CSSプロパティはググって調べればよいが、適用ブラウザもわかるMDN web docsがおすすめ
- カスタムCSSを使う前には必ずバックアップをとっておく
- FTPソフトでサーバーにアクセスできるようにするとより安心である
- 子テーマを使うようにする
- CSSは、詳細度が同じ場合、後に記述したもので先のCSSが書き換えされる
- 詳細度の低いCSSでは、詳細度の高いCSSを書き換えできない
- CSSの書き換えで押さえておきたい2つのルール
- カスタムCSSを使う手順概要としては、目的の要素のHTMLをさがし、そこに新しいCSSを適用する
- Google Chrome 開発者ツールを使えば、目的の要素のHTMLを探すことができ、CSSの書き換えのお試しもできる
- Google Chrome 開発者ツールのお試しでうまくデザイン変更できたCSSをコピーして子テーマのstyle.cssに記述する
- キャッシュによってカスタムCSSがすぐにWebページに反映されないことがある
- プラグインなどでサーバーによるキャッシュを設定している場合はリセットしてWeb表示する
- ブラウザキャッシュの無効化には、Google開発者ツールのキャッシュ無効化機能が便利である
- キャッシュが原因でない場合はプラグインのCSSで上書きされている可能性があるので!importantをつける
- Gutenbergのブロックでは高度な設定の中でクラス名やid名を記述することができる
このなかで、初心者の方が特によくはまるポイントとしては次の点だと思います。
詳細度を理解せずに、CSSの書き換えをしようとして失敗する
⇒詳細度を理解して、詳細度が同等以上のCSSを適用しましょう。
キャッシュで古いWeb表示がされているために、CSS書き換えに失敗したと思いあたふたする
⇒サーバーキャッシュはリセットする。ブラウザキャッシュはGoogle Chromeの開発者ツールで無効にして使う。
せっかく記述したCSSが、プラグインによって上書きされてしまう
⇒必要に応じて!importantをCSSに記述しましょう。
以上けっこう長く解説してきましたが、あなたが今後カスタムCSSをうまく使っていく指針となれば幸いです。