CSS

WordPressサイトのカスタマイズに必要なCSSを書く場所や書き方

WordPressサイトのカスタマイズに必要なCSSを書く場所や書き方

WordPressでサイトを作ったら、有料のテーマであれ無料のテーマであれ、いくら良いテーマを使っていてもカスタマイズしたくなるものです。

これが無料で使えるって！？WordPressの無料おすすめテーマ5選！
これが無料で使えるって！？WordPressの無料おすすめテーマ5選！
2020.12.3
「こんなにいいテーマが本当に無料で使えるの？」と、疑いたくなるような５テーマを厳選紹介しています。...

ところがいくら楽に作れるWordPressでも、多少のHTMLとCSSの知識がなければオリジナルのカスタマイズはできないというハードルが待ち受けています。

ですが、ここで諦める必要はありません。WordPressのカスタマイズに必要な知識は、HTMLで一からサイトを作るのに必要な知識に比べればはるかに少なくて済みます。

今回はWordPressのカスタマイズに必要なCSSの基本知識についてまとめていますので、カスタマイズの参考にしてください。

CSSとは

CSSとは、「Cascading Style Sheets」の略で、サイトのデザインやスタイルなど、サイトの見栄えを整えるためのものです。「CSSファイル」は「スタイルシート」とも呼ばれます。

WordPressで作るWebサイトって、それぞれのテーマにすでにCSSが適用されているからデザインが整っていて見栄えがいいんです。

で、このCSSを追加したり変更したりすることでオリジナルのデザインのサイトにカスタマイズできるということなんです。

WordPressにCSSを適用させるために書く場所

HTMLで作成されたWebページにCSSを適用させる方法は実は３つあるのですが、ここでは省略します。代わりに、WordPressでCSSを書くことができる３つの場所を把握しておきましょう。

WordPressでCSSを書く３ヵ所

  1. 親テーマのスタイルシート

  2. 子テーマのスタイルシート

  3. 『外観』⇒『カスタマイズ』の中の「追加CSS」

１つずつ見ていきましょう。

１．親テーマのスタイルシート

管理画面左サイドバーメニューの『外観』⇒『テーマエディター』⇒『編集するテーマを選択』⇒『選択』でスタールシート編集のページが開きますが、この方法はおすすめではありません。

理由は２つあります。１つ目は、テーマの更新を行うと元に戻ってしまい、せっかく編集したCSSも上書きされてしまうからです。２つ目は、これは大元のスタイルシートなので、間違えたりするとサイト全体がおかしくなってしまう可能性があるからです。

２．子テーマのスタイルシート

最近どのテーマにも子テーマというものが準備されていて、CSSの変更や加筆はその子テーマに行うように促されています。子テーマのスタイルシートは親テーマのスタイルシートよりも後に呼び込まれるので、子テーマに描いたスタイルが反映されるのです。

それに子テーマのスタイルシートに書いたCSSであれば、テーマの更新を行っても上書きされませんから、一からやり直す必要もありません。ですから、WordPressサイトのカスタマイズは、子テーマを準備しておいて、子テーマのスタイルシートにCSSを書くようにしてください。

３．『外観』⇒『カスタマイズ』の中の「追加CSS」

ここに書いたCSSは同ページ内上部の<head>～</head>内に記述されます。ブラウザ上では見えないところなのでここに書いても問題はありませんが、多少なりともページの読み込み速度に影響するので、やっぱり子テーマのスタイルシートをお勧めします。子テーマのスタイルシートでうまくいかないとき使うと思ってください。

CSSの基本的な書き方

CSSでデザインやスタイルを調整するためには、HTMLファイル(投稿画面)とCSSファイル(スタイルシート)の両方に記述する必要があります。が、ここではとりあえずCSSの記述だけ説明します。

CSSの記述は、セレクター{プロパティ:値;}　のように記述します。

具体的には、h2 {color:red;} のように記述します。

上のCSSは、h2タグで囲まれた部分の文字の色を赤にするという意味です。

セレクターとは

セレクターでどの部分を装飾するのかという場所を指定しています。h2と書けばh2で囲われた部分を意味します。セレクターには、HTMLタグの名前や、クラス、IDと呼ばれるクラスやIDで指定した特定の場所を書きます。

プロパティとは

セレクターで指定した場所の何を変えるのかという欄です。プロパティには様々なものが多数あります。

値とは

プロパティで指定した内容をどう変えるのかという欄です。値の欄には、色だったり数値だったりと具体的な内容を書くことになります。

まとめると、セレクターとプロパティと値で、「どこの何をどうする」という指示を出していることになります。

このように、セレクターとプロパティと値で指定するのがCSSの基本的な書き方です。

CSSで装飾する具体例

例１：装飾の基本

例えばh2タグで囲んだ部分を赤色、pタグで囲んだ部分を青色にしてみます。

HTML

<h2>h2で囲んだ部分</h2>
<p>pタグで囲んだ部分</p>

CSS

h2 {color: red;}
p{color: blue;}

これで完了です。

例２：２つ以上の装飾を行う場合

Pタグで囲まれた部分を青色で太字にしてみます。

HTML

<p>青色で太字にする部分</p>

CSS

p {
    color: blue;
    font-weight: bold;
}

例３：class属性を使った装飾の例

class属性を付与する例としていくつかあるpタグの中のclass属性で指定した「こんにちは」だけ赤色で太字にする設定にしてみます。

HTML

<p>おはようございます</p>
<p class="b red">こんにちは</p>
<p>こんばんは</p>

CSS

.b {
    font-weight: bold;
}

.red {
    color: red;
}

class属性で指定する場合は同時に複数指定でき、この例ではbとredの２つを同時に指定しています。

また、CSSでclass属性を付与する場合は、名前は自由ですが、書き初めに.(ピリオド)をつけることを忘れないようにしましょう。

CSSで使用するid属性とclass属性との違いと使い分け
CSSで使用するid属性とclass属性との違いと使い分け
2020.12.7
CSS装飾で登場するid属性とclass属性。その違いや使い分けについて説明しています。...

最後に

ここでは単純な例を紹介しましたが、これがCSSで装飾する場合の基本です。スポーツでも勉強でも、最初は基本が大切ですからね。

おすすめの記事