ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

もう失敗しない!ワードプレスのカスタムCSS使い方とはまるポイント

ワードプレスに慣れてくると、テーマのデフォルトのままのデザインだと味気ない、とか、同じテーマを使っている他のサイトとは違ったデザインにしたい、なんて感じてきますよね。

難しいデザインでなくても、例えば見出しのデザインをオリジナルなものに変えてみたり、とか、テーマでは対応できない部分の色を変えてみたり、というだけでも、結構自分独自の雰囲気を出せるものです。

そんな独自のデザインを作成するときに活躍するのがカスタムCSSです(追加CSSとも呼ばれています)。

でもカスタムCSSなんて難しいのそう?とか、少しやってみたけどうまくいかなーい!いう方も、その原理をきちんと知れば、あとはネットで必要なところを調べていくだけで結構いろいろなことができることに気づくでしょう。

本記事では、カスタムCSSが初めてとか、うまくいかない、という方のために

  • カスタムCSSとは?
  • CSSという言語を知る(HTMLとCSS、CSSの基本構造、特にセレクターの使い方など)
  • カスタムCSSを使う前の注意事項
  • CSSの書き換えで押さえておきたい2つのルール
  • カスタムCSSを使う手順
  • カスタムCSSがWeb表示に反映されない場合の対処方法
  • GutenbergのブロックでカスタムCSSを使うためのクラスやidの指定方法

について解説していきます。

カスタムCSSに慣れてくると、サイトのデザインにどんどんはまって楽しくなりますよ。

目次

カスタムCSSとは?

ワードプレスにおいて、テーマカスタマイザーではサポートしていないデザイン変更を、CSSという言語を使ってすることをカスタムCSSといいます

例えば、Twenty Seventeenというワードプレス公式デフォルトテーマで配色を見てみましょう

テーマカスタマイザー(ダッシュボードメニュー 外観>カスタマイズ)の中で変更できる配色は次の通りです。

TwentySeventeenの色設定

できる色設定としては、配色とヘッダーテキスト色の2項目のみです。

配色ではサイトのベースカラーとして、ライト(白基調)、ダーク(黒基調)のほか、カスタムを選んで色を指定すると、投稿日などの一部の色が変更されます。

ヘッダーテキスト色は、ヘッダー内のテキスト色(デフォルトでは白)を変更できます。

試しに配色のカスタムで赤みのオレンジ、ヘッダーテキスト色に紫を選んでみました

TwentySeventeenでカスタム配色とヘッダー色を変更

ヘッダーテキスト色が変わったのはすぐわかりますが、配色のカスタムで指定した赤みのオレンジは、ほんの一部(ヘッダーメニュー色と投稿日)しか適用されていません。

これでは、サイト独自の雰囲気も出しにくいですし、もっとメリハリをつけて見やすくしたくなりますよね。

そこで、サイドバーの項目タイトルを強調するためにカスタムCSSで背景色をつけてみました

TwentySeventeenサイドバータイトルに背景色をつける

このようにカスタムCSSを使えば、テーマカスタマイザーでできないデザインでも、自分で独自に追加してカスタマイズできるのです。

カスタムCSSでは、CSSという言語を使いますので、まず以下ではCSSについて紹介してから、カスタムCSSの使い方を解説していきます。

CSSという言語を知ろう

このセクションは少々長いので、すでにCSSについて十分知っているという方は、飛ばして頂いて結構です。

少しは知っているけど自信がないな、という方は、復習を兼ねて軽く読み流してみましょう。

CSSという言語は、実は単独で使うことはありません。Webサイトの中身を記述しているHTMLという言語とセットで使用します。

そもそもCSSはHTMLで記述されたコンテンツにレイアウトや装飾をするために開発された言語だからです。

ですので、CSSを知るためには

1.HTMLについて簡単に知る
2.CSSを使ってHTMLに装飾をしてみる

という順番で進めていきます。

HTMLの基本構造

HTMLというのは、タグと呼ばれる<>と</>で記述領域を囲むように、次のような構造をしています。

HTMLの基本構造

一行目はドキュメント宣言文と呼ばれており、この文章が、HTML5という形式で記述されていることを宣言しています。HTMLには古い形式としてHTML4やXHTMLなどの形式がありますが、現在の形式はHTML5ですので、普通はこの記述を1行目にします。

2行目以降は、タグと呼ばれる形式で記述されています。

2行目の<html>で始まって、一番最後の行の</html>で終わっています。この中に、HTML文を書いていますよ、という意味です。

ちなみに、<html>の中には、lang="ja"という記述がありますが、属性といって、タグによってさまざまな属性をこのように記載することがあります。後に説明するclassidという属性以外は気にしなくてよいです。

ヘッドタグとボディタグ

<html></html>の中には、さらに2つのタグで囲まれた部分があります。

<head></head>および<body></body>です。それぞれヘッドタグボディタグと呼ばれており、その中身は次のようになります。

ヘッドタグとボディタグ

実際にブラウザの表示されるコンテンツは、ボディタグの中に記述されますので、カスタムCSSで装飾していくのは、このボディタグの中に記述された部分となります

ヘッドタグというのは、コンテンツの記述以外のさまざまな関連情報を入れるところです。

例えばサイトのタイトルを記述するタイトルタグ<title></title>、検索表示されたときにページの説明文となるメタディスクリプションなどもこのヘッドタグの中に記述されます。

HTMLの記述で覚えておいて欲しいこととしては、必ずタグには始まりと終わりがあり、その中に別のタグの始まりと終わりが記述され、その中にまた別のタグの・・・というように、入れ子構造を取るということです。

<body>タグの中はブラウザで表示するコンテンツが入るところ、と説明しましたが、実際<body>~</body>の~の部分には、例えば見出しとなる<h1>(見出し)</h1>が入ったり、文章を記述する<p>(文章)</p>がなど、さまざまなタグが入れ子構造として入り込みます。

また、タグで囲まれた部分のことを”要素”ともいいます

すなわち、入れ子構造とは、タグで形成された要素の中にまた別のタグで形成された要素が入っている構造だということですね。これを親要素の中に子要素が入っていると言います。

カスタムCSSを使ってカスタマイズ(デザイン変更)するには、自分がカスタマイズをしたい要素のタグを調べ、その要素が入っている親要素は何なのか?も把握する必要があります。

そうすることで、CSSで装飾する範囲を指定することができるのです。

今いちよくわから~ん、という方も、あとで例を見てもらえば、意味がわかりますので大丈夫です。HTML文は入れ子構造だ、ということと親要素子要素はキーワードとして覚えておきましょう

コンテンツ記述に使用される主なタグ

参考までにコンテンツを記述するための主なタグを紹介しておきます。

いずれも、HTML4の時代から使用されている基本タグです。

現在のHTML5の場合は、これに加えて、ヘッダー部分を表す<header>タグ、フッターの部分を表す<footer>タグ、記事の部分を表す<article>タグ、コンテンツ内をグループ分けする<section>タグなどありますが、もともとHTML4の頃は<div>タグですべて表していたものを、より意味づけるために新設されたタグです。

ワードプレスの記事作成でよく使われるタグとしては、見出しタグである<h1><h2><h3>・・・(数字が小さいほど大きな見出し)、段落を表す<p>、画像を入れる<img>です。

ただし、imgタグは特殊タグで、終わりを表す</img>というタグは存在しません。終わりのないタグとしては改行を表す<br>もそうですね。

HTMLにCSSを適用してみる

それでは、HTMLがおおよそわかったところで、HTMLにCSSを適用して装飾する、というのがどういうことなのかを見てみましょう。

次のようなHTMLの記述と、あるテーマでのWeb表示があったとします。

HTMLと表示例(カスタムCSS適用前)

左のHTML文を簡単に説明すると、ボディタグの中に大きく4つのエリアが設置されています。

<header>タグと<footer>タグが1つずつ、<div>タグが2つです。

それぞれのタグで形成された要素が、Web表示の中でブロック(エリアと考えればよいでしょう)として表示されます。

また、それぞれの中に、文字が記述されています。<header>タグの中には"ヘッダー部“という記述、<footer>タグの中には”フッター部”という感じです。

これをWeb表示すると右のように表示されているのは、ワードプレスのあるテーマでのデフォルト状態だと考えてください。

テーマのデフォルト状態でもすでに、あるレイアウト用のCSSが適用されています。例えば、コンテンツ部とサイドバー部がこのように横並びになっているのは、テーマの中で横並びのレイアウトとなるCSSを適用しているからです。

では、次にテーマのデフォルト表示に、さらにCSSを適用して色をつけてみようと思います。

メインコンテンツ部を青色にして文字は白文字とする、サイドバー部は緑色にして赤文字にする、というCSSを追加してみます。この場合のCSS文は下記の青枠の通りとなります。

HTMLと表示例(カスタムCSS適用後)

CSS文を追記することで、右下のようにサイト表示が変わるわけです。これがカスタムCSSで色をつけるということです

CSS文は一見複雑に見えるかもしれませんが、次のようにCSSの書式を知れば、意味がわかるようになるでしょう。

CSSの基本構造

CSSの基本構造は、次の通りです。

(CSSを適用する場所)(CSSプロパティ)(適用する値);}

(CSSを適用する場所)をセレクターと言いますので覚えておきましょう。また、青字で記述した{}:(コロン)および;(ハーフコロン)は必ず必要です。

すべて半角で記述してください。また、スペース(もちろんこれも半角)は無視されますので、見やすいように適度に入れても大丈夫です。

また、先ほどのCSS例のように、

(CSSを適用する場所)
            (CSSプロパティ)(適用する値)

のように記述してもOKです。むしろ、ワードプレスのCodexを読むと、この記述形式のほうが推奨されています。

それでは先ほどのCSS例と対比させながら解説していきます。

まずセレクターを指定することで、HTMLのどの部分を対象とするのか指定することができます。

例えば、先ほどの例でメインコンテンツ部を装飾したCSSは

.mainContent {color:white; background-color:blue;}

ですが、.mainContentというセレクターで、class="mainContent"というクラス属性のHTMLタグを指定しています。

すなわち、<div class="mainContent">~</div>の部分を指定しているのです。

HTMLタグ内のclass属性というのは、そのタグを特定するためにHTML記述者が任意につけることができる属性です。タグを区別するための目印と考えればよいでしょう。

クラス名には、半角英数字と-(ハイフン)および_(アンダーバー)を使います(頭に数字はNGです)。

次に{}内の、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"という属性のタグ内の文字が白となります。

セレクターに使うには、

  • タグはそのままタグ名を使う
  • class属性は頭に.(ドット)をつけて、.(クラス名)とする
  • id属性は頭に#をつけて、#(id名)とする

classとidの違いとは?

ここで、class属性とid属性の違いを理解しておきましょう。

class属性は、同じ名前のクラス名を1つのページ内で何度でも使用可能
id属性は、同じ名前では、1カ所しか指定できません

したがって、id属性の方が、より限定的にページ内のHTML場所を指定できるというわけです。

蛇足ですが、idはページ内に1カ所しかないので、ページ内のリンク先として指定できるメリットもあります。

例えば、目次をクリックするとそのページ内の該当箇所に飛ぶことができるのは、見出しごとにid属性をつけているからです。

子孫セレクター(半角)と子セレクタ(>)を覚えておこう

あと、セレクターの中でぜがひとも知っておいて欲しいのが子セレクターと子孫セレクターです。

セレクターの表に、次の記述があります。

(半角)・・・子孫セレクタ
  ・・・・子セレクタ

子孫セレクタと子セレクタについて次のHTML例で説明してみましょう。

子孫セレクター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を使用したセレクターとそれらの組み合わせ方法ですが、このほかにもさまざまなセレクターがあります。しかしながら、まずはここまでで解説してきたセレクターの使い方をきちんとマスターすることが大切かと思います。

一応参考までに、このほかにどのようなセレクターがあるかを紹介しておきます。

CSS3セレクター

主なCSSプロパティと値

セレクターについては少し長く書き過ぎましたので、CSSプロパティについては代表的なものを上げる程度にとどめておきましょう。

CSSプロパティは、それこそ非常に多くのものがありますし、年々増えているからです。

なので、こういうものがあるんだな程度に見ておいて、実際に使用するときには、ググって調べてみましょう。

ググって調べるときの注意点としては、新設されたCSSプロパティには、ブラウザによって適用されないものがある、ということです。次のサイトで調べると適用状況がわかります。

テキストに関するCSS

文字を装飾したり、行内のテキストの位置や改行指定に使用します。

テキスト関連のCSS

フォントに関するCSS

フォントの種類やサイズ、太さなどを指定するのに使用します。

フォントに関するCSS

色と背景に関するCSS

文字色や背景を指定するのに使います。背景は背景色だけでなく、背景画像やその位置・配置方法なども指定します。

色と背景に関するCSS

ボックスに関するCSS

ボックスというのは、<div>に代表される箱状のエリアのことです。レイアウトの基本を知るためには、欠かせない基本となるCSSです。

ボックスに関するCSS

レイアウトに関するCSS

レイアウトに関しては、数年前までは以下のものがメインでした。

レイアウトに関するCSS

floatは、ボックスどうしを横並びにしたり、メニューとなるリンク付きテキストを横に並べたりするのに欠かせないCSSでしたが、近年は、display:flex;で始めるフレックスボックスがほぼ主流になってきています。

またさらに、display:grid; で始めるグリッドレイアウトもますます増加していくでしょう。

このあたりは奥が深いので、参考になるサイトを紹介しておきます。

カスタムCSSを使う前の注意事項

それではいよいよワードプレスにカスタムCSSを適用していく方法に入っていきますが、その前に、カスタムCSSを使う場合の注意事項を上げておきます。

後述するように、

カスタムCSSを適用する=テーマのstyle.cssに記述されているCSSを書き換える

ことになります。

こういった、ファイル内のコードを書き換える操作というのは、間違った作業をするとファイルを壊してしまう可能性があります。したがって保険として次の準備をしておきましょう。

サイトのバックアップはあらかじめとっておく

カスタムCSSに限らずですが、コードを書いていくこととなりますので、一応バックアップはとっておきましょう。

おすすめは、プラグイン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タグの中に書き込まれたりします。

このようにあちこちに書き込まれると、あとで編集するのに大変だったりする場合が出てくるんですね。ポケットは1つに集約しておいた方が、探し物は探しやすいというわけです。

また、カスタムCSS以外にカスタマイズレベルを上げていくと、style.css以外のテーマが持っているファイル(functions.phpやテンプレートファイル)を編集する機会が出てきます。でもやはり子テーマを使わないとテーマのアップデートで消されてしまうのです。

だから、将来カスタマイズの幅を広げていくことも考慮すると、

子テーマを最初から使っておくに限る!

と言えるわけなんです。

子テーマの役割やメリット、そして子テーマの作り方は、次の記事で詳しく解説しています。

CSSの書き換えで押さえておきたい2つのルール

カスタムCSSでデザインをカスタマイズするというのは、すでにテーマで設定されているデザインを変更することになります。

そのためには、テーマに記述されているCSSを新たなCSSで書き換える必要があるのですが、そのルールを正確に知っておかないと書き換えに失敗します

CSSを書いて書き換えたつもりなのにデザインが変更されない!なんで?・・・なんて、私も昔はよく失敗してはまっていました。

そうならないためにも、CSSの書き換えのための2つのルールを知っておきましょう。

先に記述されたCSSよりも後で記述されたCSSが優先される

これは単純明快ですね。

テーマのCSSはstyle.cssというテーマ内のファイルの中に記述されています

一方でカスタムCSSは子テーマのstyle.cssの中に記述していきます

そして、子テーマのstyle.cssは、親テーマのstyle.cssの後からロードされますので、子テーマの中のカスタムCSSの方が後から記述された形となるのです。

テーマのstyle.cssのロード(親テーマのCSSが読み込まれる)

子テーマのstyle.cssのロード(親テーマのCSSに追加記述される)

したがって、カスタムCSSは子テーマのstyle.cssの中に記述すればよい、ということになります。

親テーマと子テーマどうしの関係はこの順番なのですが、注意しなければならないのがプラグインです。

プラグインの中にCSSがある場合、通常は子テーマのCSSの後からプラグインのCSSが記述されます。したがって、せっかくのオリジナルのデザインがプラグインによって消されることがある、ということです。

プラグインによって書き換えられると困るような大事なカスタムCSSの場合は、後述するように!importantという記述をCSSの中にして優先度を最高にする、という手法を使います。

詳細度が高いCSSは後から記述したCSSでも書き換えられない

CSSには詳細度というものが定義されています。詳細度が高いCSSは、後から記述されたCSSが詳細度が低い場合書き換えすることができません

この詳細度を理解しておかないと、せっかく子テーマを使ってカスタムCSSを記述しても、デザインが適用されずに、あれ?なんで?とはまることになります。

詳細度は、より限定的な要素に適用されたCSSほど高くなります具体的に詳細度を低いものから並べると、

タグ指定<クラス指定<id指定<インライン指定

例えばセレクターにdivというタグを指定すると、同じページ内にあるdivタグはすべて対象となります。対象範囲が広いので詳細度は低くなります。

クラス指定ならば、クラスのついていないタグは対象から外れますのでより限定的となり、タグ指定よりも詳細度が上がります。

そしてクラスは同じページ内で複数個所につけることができますがidは1カ所しかできませんので、クラスよりもid指定の方が詳細度が上がるわけです。

インライン指定というのは、セレクターを使用せずにHTMLタグの中に直接CSSを書き込みますので、最も詳細度が高くなります。

インライン指定とは?

インライン指定というのセレクターを使用せずにHTMLタグの中に直接CSSを書き込むこと方法のことです。
例えば、<p>(文章)</P>の文字色を青にしたい場合、p {color: blue;}と記述するのがタグ指定の記述ですが、インライン指定ではstyle属性を使って<p>タグの中に次のように記述します。

<p style="color: blue;">(文章)</p>

以上が詳細度の高さ低さの基本で、あとはこれらの組み合わせとなります。例えば、もう一度次のHTML文を見てみましょう。

子孫セレクターHTML例

ここで、”セクション1”という文字の色は現在黒ですが、これを青にしたい場合、一番簡単な記述が

.section {color: blue;}

ですね。しかし、もし先に親テーマで次のようなCSSで指定されていると書き換えできずに文字は黒色のままとなります。

div.section {color: black;}

div.sectionというセレクターは、class="section"のついているdivタグという意味でしたね。なのでdiv.sectionとした方が.sectionよりも詳細度が高くなるので、書き換えができないのです。

ほかにも、.item>.sectionだったり、#contents .sectionといったセレクターが使われている場合でも.sectionより詳細度が高く書き換えができません。

このように、カスタムCSSで親テーマのCSSを書き換えしたい場合、親テーマのCSS詳細度と同等以上の詳細度を使う必要がある、ということを覚えておきましょう。

また、インライン指定でのCSSは、セレクターの詳細度をどれだけあげても書き換えすることができません。すなわちインライン指定が最強、ということですね。

ワードプレスでインライン指定が使用されるのは次のような場合です。

ビジュアルエディター(クラシックでもGutenbergでも)で、文字色や太字化などの装飾をする場合。

プラグインによっては、インライン指定でCSSが追加される場合。テーマのCSSの詳細度にかかわらず、プラグイン指定のデザインとするためです。

書き換えさせたくない場合に使用する!important

実は詳細度を無視して、一番優先される記述方法があります。それはCSSの記述の最後に!importantとつけることです。

例えば、次のように記述します。

.section {color: blue !important;}

このように書くと、.sectionよりも詳細度の高いセレクターが使用されていようが、インライン指定でcolorが指定されていようが、文字色を青色に書き換えすることができます

しかし逆にいえば書き換え不能となりますので、!importantはむやみに使わず、どうしても書き換えされたくないCSSを記述する場合に使うものと考えておきましょう。

例えば、パソコン用とスマホ用で画像を変更したい場合、そのCSSに!importantをつけます。

方法としては、パソコン用とスマホ用の画像を記述する2種類の<img>タグをHTMLの中に記述しておいて、パソコン用画面の場合はスマホ用画像を非表示に、スマホ用画面ではパソコン用画像を非表示とします。

この場合、もしあとから導入した画像関連のプラグインでこのCSSを書き換えられてしまうと、2種類の画像が同時に表示されてしまい、意図したレイアウトから大きく外れてしまいますよね。これを防ぐために!importantをつけておくのです。

カスタムCSSを使う手順

手順概要

ブラウザにはGoogle Chromeを使います。Google ChromeにあるGoogle開発者ツールという便利な機能を使いながらの作業となります。

手順概要は以下の通りです。

1.Google開発者ツールを使用して、デザインを変更したい部分のHTMLとCSSの記述を探します

2.探したCSSの内容をGoogle開発者ツールで書き換えてみて、実際にサイト表示がどうなるかを確認します(この段階では実際にサイトのコードが書き変わるわけではありません)。

3.書き換えたいCSSが決まったら、WordPressのカスタムCSSを記述するエリアに記述してみて、サイトが実際に変更されることを確認します。

具体的な手順

具体例をあげて詳細な手順を解説していきます。

簡単な例として、この記事の初めのほうで取り上げた、テーマTwenty Seventeenでの”サイドバーの項目タイトルに背景色をつける”という作業をしていきます。

TwentySeventeenサイドバータイトルに背景色をつける

サイドバータイトル項目の背景色をシアン色にするには、

(タイトル項目要素を示すセレクタ) {background-color: #00ffff;}

というCSSです。

なので課題は、この(タイトル項目要素を示すセレクタ)を探すことですね。

背景色の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開発者ツールを開ける

変更前のWebページを表示させておきます。

デザイン変更前のサイト表示

この状態でGoogle開発者ツールを開けます。

開ける方法としてはいくつかありますが、簡単なのはショートカットキーです。

Windowsならば、”F12キー”、MacならばCommand+Shift+I開けることができます。

または、ブラウザの中にカーソルを置きながら、右クリックして”検証を選んでください。

すると画面の中にGoogle開発者ツールが開きます。

Google開発者ツールを開いたWeb表示

この例では右側に開いていますが、画面の下に表示されることもあります。表示場所の変更方法は下記のように、①3点メニューをクリック ②開いたDock sideで表示方法を選択 と進めれば可能です。

Google開発者ツールの開く場所選択

Google開発者ツールの便利な使い方

開いているGoogle開発者ツールの画面を少し説明します。

上の段はElementsタブが選択されていると、画面にはHTMLが表示されています。

下の段はstylesタブが選択されて、CSSが表示されています。

Google開発者ツール画面の説明

Elementsタブとstylesタブは初期値では自動的に選択されているはずですが、もし違うタブになっていたら選択しなおしてください。

ここで下の段に表示されているCSSというのは、上の段のHTMLの中で選択されている要素のCSSです。上の例では、HTMLの中のグレーに網掛されている<body class="・・・>の部分ですのことです。

Google開発者ツールで便利なのは、このCSSをGoogle開発者ツールの中で書き換えてみると、それがWebページに表示されることです

もちろんこの書き換えは、Google開発者ツールの中だけのことなので、ソースファイルを書き換えたりはしていません。したがって、このWebページをブラウザでリロード(再読み込み)すれば元に戻ってくれるので、気軽にいろいろとお試しできるわけですね。

したがって、今このWebページの中で、サイドバーの項目タイトルに背景色をCSSとして加えたければ

1.該当の項目タイトル部分に相当するHTML要素を、上の段の中で探す。
2.そのHTML部分のCSSを表示させて、そのCSSを書き換えてみる

という作業をGoogle開発者ツールの中でしていけばよいことになります。

変更したい場所のHTMLとCSSを探す

ではまず、変更したい要素のHTMLとCSSを探してみましょう。

開発者ツールの左上の要素選択ボタン要素選択ボタンをクリックします。すると、要素選択ボタンが有効化され青い表示に変化します。

要素選択ボタンの有効化(青く変化する)

要素選択ボタンが有効な状態のまま(青い状態のまま)で、Webページ内のデザインを変更したい場所をクリックします。

今回背景色をつけたいのは、サイドバーの中の”アクセス”とか、”検索”といったタイトル部です。そこで、”アクセス”という文字のところまでカーソルを動かしてみましょう。

実際に作業してみればわかりますが、Webページ内でカーソルをあちこち動かすと、カーソルを置いた場所付近の要素が青塗り表示に変わります。

アクセス”という文字の要素にうまくカーソルが当たると、下図のように”アクセス”という文字周辺が、青く塗られます(青の下にピンクっぽく塗られているところがありますが、今は無視してください)。

カーソルを置いて目的の要素を選択する(青塗りとなる)

すると、上の画像のように、この青塗りされた要素に適用されている主なCSSも同時に表示されています。この例では、セレクターがh2.widget-titleで適用されているCSSとしてはcolor:"321111; などがあるのがわかります。

ではカーソルをこの位置に置いたままクリックしましょう。

すると、Google開発者ツールの中で、このクリックした部分のHTMLがグレー色で網掛け表示されます。
(同時に、要素選択ボタン要素選択ボタンは青い表示でなくなり、無効化に戻ります

要素選択クリック後のGoogle開発者ツール

これを見れば、サイドバー項目タイトルの”アクセス”のHTMLは、

<h2 class="widget-title">アクセス</h2>

だとわかりますね。セレクターとしては先ほど見たようにh2.widget-titleが使用されているはずですね。

今この状態では、Google開発者ツールの下段のstylesタブ表示では、この要素に適用されているCSSが表示されていますので、そこに新しく

h2.widget-title {background-color: #00ffff;}

というCSSを追加入力していきます。

Google開発者ツール上でCSSを書き換えてみる

CSSの追加入力は、次のように進めます。

①下段の右上にある+マークをクリックすると、CSS入力欄が表示されます。

CSS入力欄の追加

セレクターとしてh2.widget-titleが自動入力されて、{}内は空の状態です。

②{}内を適当にクリックするとCSSプロパティが入力できるようになります。

{}括弧内をクリック

③CSSプロパティを入力

CSSプロパティとしてbackgroud-colorを入力してリターン([Enter]キー)

CSSプロパティの入力

④CSSの値を入力

値としてシアン色を示すカラーコード#00ffffを入力します。

CSSの値を入力

すると、Webページの表示は次のようになります。

Google開発者ツール上で適用されたCSSの表示

このように、今書き込んだCSSによって、”アクセス”だけでなく、サイドバーのタイトルである”検索”や”このサイトについて”にもシアン色の背景色が適用されます。

これは、セレクターh2.widget-titleのよって、これらのタイトルも対象となっているからです。

CSSの書き換え方法

今回、Google開発者ツールの中に追加CSSを記述するのに下段右上の+マークから記入欄を表示させて入力しましたが、すでに記述されているCSSの中を編集するように追加記述する方法もあります。

例えば、今回の下段のCSSをスクロールしていくと該当のセレクターh2.widget-titleを使った記述が見つかります。

該当箇所(予想セレクタ)のCSS

このセレクターの{}のなかに、今回の追加CSSを記述することができます。

CSSの追記欄を表示する
CSSプロパティと値の入力

このように、既存のCSSを編集できるわけです。追加だけでなく、すでにあるCSSの値を書き換えたりもできます。やりやすい方法で追加CSSを記述していきましょう。

適用範囲をサイドバーだけに限定する

これで一見目的は達成できたように思えますが、h2.widget-titleで指定されるタイトルが複数ある、ということをもう少し掘り下げて考えてみましょう。

もともと、サイドバーに表示されている”アクセス”や”検索”、”このサイトについて”という項目は、ウィジェットによって表示されている項目です。

そこで、同じウィジェットをフッターにも追加してみるとどうなるかを確認しました。結果は以下の通りです。

フッターエリアにもカスタムCSSが適用されてしまう

このように、フッターエリアのタイトルにも同じCSSが適用されています。

ウィジェットのタイトル部に、class="widget-title"というクラスが自動的につけられるのでこのようなことになります。

もちろん、このままでもよいのですが、仮にサイドバーのタイトルだけに背景色をつけたい場合はどうすればよいのか考えていきましょう。

同じclass="widget-title"が付与されているとしても、サイドバーとフッターエリアとでは、それぞれのタイトルが入っている親要素が異なることを利用します。

そこでサイドバーの親要素を調べてみます

再びGoogle開発者ツールの要素選択ボタン要素選択ボタンをクリックして、サイドバーエリアが選択できるようにカーソルを動かしてみましょう。

サイトバーエリアの選択

上のようにうまく選択できた状態でクリックしましょう。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を編集してidをつける

このとき、フッターエリアのタイトルの背景色が消え、サイドバーのみに適用されていることが確認できます。

サイドバー部のみにCSSが適用されたWeb表示

以上で、変更箇所をサイドバーの中のタイトルに限定することができました。

このように、親要素を調べて、子孫セレクターを使ってCSSの適用要素を限定する、という手法は、カスタムCSSにおいて非常によく使います。

例えば、あるブログ記事のページだけ背景色を変えたい、とか、固定ページと個別ブログページのデザインを分けたい、とかいう場合は、各ページのHTMLの<body>タグの中のクラスやidを調べて、子孫セレクターでそのページに限定する、といった使い方です。

CSSを子テーマのstyle.cssに記述する

うまく動作したCSSを、子テーマのstyle.cssの中に記述して確定させます。

Google開発者ツールから該当部のCSSをコピーします。

該当部のCSSをコピー

子テーマのstyle.cssを開けます。

ダッシュボードメニューの外観>テーマエディター へ入ります。

外観>テーマエディターへ

初めてこの画面に入る場合、次のように警告が出ますが、”理解しました”をクリックして進めましょう。

テーマエディターの警告表示

テーマエディターでは、テーマの中にあるファイルを編集することができます。

style.cssが選択されていることを確認したら、コピーしておいたCSSをヘッダーの下にペーストして”ファイルを更新”します。

子テーマのstyle_cssへCSSをペースト

カスタムCSSを適用してもWeb表示に反映されない場合

これでWebページを表示してみればカスタムCSSが適用されるはずなのですが、ときどきすぐに反映されない場合があります。

もちろん、根本的にCSSの記述の間違いや、詳細度の低いもので書き換えをしようとしている場合もありますが、その場合はGoogle開発者ツール上でもWeb表示に反映されませんので、間違いだとすぐわかりますよね。

キャッシュが原因

CSS記述に問題がないのに反映されない場合は、キャッシュとして古いページが保存されているというのが原因だと考えられます。

キャッシュというのは、Web表示のソースとなるファイルをいちいち読み込むのでなく、あらかじめ読んだものをデータとして保管しておき、それを表示させる機能です。

プラグインなどを使ってサーバー側にキャッシュされている場合と、ブラウザ側でキャッシュされている場合があります。

サーバー側にキャッシュされている場合は、使っているプラグインなどでリセットするしかありませんので、プラグインを個々に確認してください。

ブラウザ側のキャッシュを無効化するには、Google開発者ツールにおすすめの設定があります

Google開発者ツールの右上の設定(歯車マーク)をクリックすると、preferencesタグが選択された状態で開きます。ここでスクロールして項目Networkを探し、"Disable cache(while DevTools is open)“にチェックを入れる

キャッシュの無効化

これだけです。この設定の便利なところは、Google開発者ツールを開いているときはキャッシュが無効化し、閉じると有効に戻ることです。

普段ブラウザで閲覧するときはGoogle開発者ツールを開かないのでキャッシュが有効化された状態となります。この方が閲覧時は便利ですよね。

そして、カスタムCSSの適用作業をするときは常にGoogle開発者ツールを開いてキャッシュを無効化しておけばよい、ということです。

プラグインが原因

Google開発者ツールではデザインが反映されるのに、子テーマのstyle.cssに記述するとWeb表示に反映されない場合で、キャッシュを無効にしてもダメ、そんなときは、プラグインが悪さをしている可能性があります。

そんなときは、とりあえず、CSSの記述の最後に!importantをつけて反映されるかどうか確認してみましょう。

それで反映されれば、子テーマの後から、プラグインによってさらにCSSが追加記述されたと考えられます。

プラグインを外すか、とりあえず!importantをつけたままにしておく、ということになります。

Gutenbergのブロックにclassやidを指定する方法

カスタムCSSの適用方法は以上ですが、最後にブロックエディター(Gutenberg)のブロックにカスタムCSSを適用するためのクラスとidの付与方法を解説しておきましょう。

ブロックエディターのブロックには、右側のブロックパネル(情報パネルでブロックタブが選択された状態)の一番下に”高度な設定”というのがあります。

それを開くと下記のようになっていますので、そのブロックにクラスやidを設定したければ、HTMLアンカーというところにid名、追加CSSクラスというところにクラス名を入力すればよいのです。

Gutenbergブロックの高度な設定

このとき、セレクターのように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開発者ツールを使えば、目的の要素のHTMLを探すことができ、CSSの書き換えのお試しもできる
  • Google開発者ツールのお試しでうまくデザイン変更できたCSSをコピーして子テーマのstyle.cssに記述する
  • キャッシュによってカスタムCSSがすぐにWebページに反映されないことがある
  • プラグインなどでサーバーによるキャッシュを設定している場合はリセットしてWeb表示する
  • ブラウザキャッシュの無効化には、Google開発者ツールのキャッシュ無効化機能が便利である
  • キャッシュが原因でない場合はプラグインのCSSで上書きされている可能性があるので!importantをつける
  • Gutenbergのブロックでは高度な設定の中でクラス名やid名を記述することができる

このなかで、初心者の方が特によくはまるポイントとしては次の点だと思います。

詳細度を理解せずに、CSSの書き換えをしようとして失敗する
⇒詳細度を理解して、詳細度が同等以上のCSSを適用しましょう

キャッシュで古いWeb表示がされているために、CSS書き換えに失敗したと思いあたふたする
⇒サーバーキャッシュはリセットする。ブラウザキャッシュはGoogle Chromeの開発者ツールで無効にして使う。

せっかく記述したCSSが、プラグインによって上書きされてしまう
⇒必要に応じて!importantをCSSに記述しましょう。

以上けっこう長く解説してきましたが、あなたが今後カスタムCSSをうまく使っていく指針となれば幸いです。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる