WordPress

更新日: 2024/11/22

【イラスト付き】【WordPress】CSSを使ってさらに素敵なサイトを作ろう！

ブルーちゃん！WordPressで作ったサイトをもっとかわいくしたいんだけど、何か良い方法はあるかしら？

それなら、CSSを使ってみたらどうかな。

コードを全部書くのは難しく感じるけど、元のコードを少し変えるだけでも印象を変えられるよ。

良さそうね！もっと詳しくしりたいな！

もちろん！この記事では、WordPressでCSSを使ってさらに素敵なサイトを作る方法を紹介するよ！

1. そもそもCSSとは？
2. WordPressでCSSを編集するには？
2-1. 1.テーマのスタイルシートを直接編集する方法
2-2. 2.追加CSSを利用する方法
3. WordPressでCSSを編集してみよう！
3-1. 1.フォントの変更
3-2. 2.文字色の変更
3-3. 3.メディアクエリで画面サイズ別に表示切替
4. WordPressでCSSが反映されない原因と対処法
4-1. 1.CSSの記述ミス
4-2. 2.キャッシュが残っている
4-3. 3.HTMLとCSSが正常にリンクされていない
4-4. 4.スタイルシートの優先順位が低い
5. まとめ

そもそもCSSとは？

そもそもCSSって何かしら？

CSSは「カスケーディング・スタイル・シート」の略で、Webページのデザインを決める言語だよ。

あれ、HTMLとは違うの？

良い気づきだね！一見似てるようで違うよ。

HTMLは、タイトルや見出し、段落といったWebサイトの構造や内容を記述しているんだ。

CSSは文字の色や大きさ、見出しのスタイルや背景、囲み枠などHTMLと組み合わせてデザインを整えているよ。

そうなのね！WordPressのテーマにも使われているのかしら？

うん、CSSを編集したり、新たに追加したりして好きなデザインに変えられるんだ。

WordPressでCSSを編集するには？

WordPressでCSSを編集する方法は3つあるって聞いたけど、どうすれば良いの？

それぞれ違う場所にあるけど、最初は戸惑っちゃうよね。

でも大丈夫！「テーマのスタイルシートを直接編集」「子テーマのスタイルシートに追加」「追加CSSの利用」と、WordPressでCSSを編集する方法を2つそれぞれ説明するよ。

ブルーちゃん、お願いね！

WordPressでCSSを編集する方法

1.テーマのスタイルシートを直接編集

2.追加CSSの利用

1.テーマのスタイルシートを直接編集する方法

下記の手順で、テーマのスタイルシートを直接編集できるよ。

テーマのスタイルシートを直接編集する方法

1.WordPress管理画面の「外観」内の「テーマエディター」を選択

2.元ファイルのバックアップを勧める注意画面の「理解しました」をクリック

3.初期のスタイルシート「style.css」が選択されているか確認

4.「style.css」の最後の行に記述を追加して「ファイルを更新」をクリック

念のためCSSを編集する前にはバックアップを取っておくと、サイトが崩壊しても復旧させやすくなるよ。

そうするわ。ところで手順3の段階で、初期のスタイルシート「style.css」が表示されなかったらどうすれば良いの？

右側の「テーマファイル」一覧から「スタイルシート（style.css）」を選ぶと編集できるよ。

分かったわ。手順4で「最後の行に記述を追加」するのはなぜかしら？

それはね、CSSは最後の行の記述が優先されるからなんだ。

なるほど、勉強になるわ。

2.追加CSSを利用する方法

追加CSSの利用って何が良いの？

テーマを直接変更する必要がないから、バージョンアップの影響を受けない点が大きなメリットだよ。

あと、プレビュー画面でデザインなどの変更が確認できたり、ミスがないかCSSの検証もできるんだ。

ただ、追加CSSはテーマごとにCSSを保存する機能で、親テーマを別のテーマに変更すると追加CSSの内容が消えちゃうから気をつけてね。

そうなのね。具体的な手順はどんな感じかしら？

追加CSSは、下記の手順で利用できるよ。

追加CSSを利用する方法

1.WordPress管理画面の「外観」内の「カスタマイズ」を選択

2.左側の「カスタマイズメニュー」から「追加CSS」を選択

3.左下の「追加CSS記述欄」を編集

4.右側のプレビュー画面で正しく反映されているか確認

5.「公開」をクリックして保存、反映させない場合は「×」をクリック

プレビュー画面で確認しながら編集できるのは良いわね。

WordPressでCSSを編集してみよう！

WordPressでCSSの編集ができるのは分かったけど、コードを知らないわ。

そんなに難しくないから大丈夫！

基本的なコードを覚えたら、使っていくうちに慣れてくるよ

ぜひ、その基本的なコードを教えてくれる？

もちろん！ここでは、WordPressで使える基本的なCSSのコードを紹介するね。

WordPressで使える基本的なCSSのコード

1.フォントの変更

2.文字色の変更

3.メディアクエリで画面サイズ別に表示切替

1.フォントの変更

【WordPress】CSSを使ってさらに素敵なサイトを作ろう！の画像_12枚目

まずは文字のフォントを変えてみよう。

どうやったら変えられるの？

CSSのfont-familyプロパティを使うとできるよ。

フォントの変更例

body {


  font-family: '游明朝', YuMincho, 'HG明朝E', 'MS P明朝', serif;


}

上記のコードを書くと、サイト全体のフォントを変えられるんだ。

なるほど。ちなみにフォントの種類はどこで選べばいいの？

Webフォントサービスを使うと、色んなフォントがあるから使うと良いよ！

誰でも商用や非商用にかかわらず、無料で使えるGoogle Fontsが特におすすめかな。

2.文字色の変更

【WordPress】CSSを使ってさらに素敵なサイトを作ろう！の画像_14枚目

次は、colorプロパティを使って文字色を変えてみよう！

どんな感じで指定するのかしら？

例えば、下記のコードだと文書全体の文字を緑色に変えられるよ。

文字色の変更例

body {color: green;}

色名でイメージと違う色だった場合、他に指定する方法ってないの？

そんなときは、16進数コードやRGB、RGBAなどをベースに選ぶと、理想の色を見つけやすいよ。

色のコードは原色大辞典にも載っているから、参考にしてみてね。

3.メディアクエリで画面サイズ別に表示切替

【WordPress】CSSを使ってさらに素敵なサイトを作ろう！の画像_16枚目

パソコンとスマホだと画面サイズが違うけど、どっちでも快適に表示できるのかしら？

もちろん！メディアクエリを使うと、表示画面のサイズに合わせてCSSを切り替えられるよ。

画面横幅の最大ピクセル数で指定するのが一般的だね。

そうなのね。どんな感じのコードを書いたら良いの？

下記のように書くと、パソコンやタブレット、スマホの画面サイズ（横幅）を設定できるよ。

メディアクエリでの画面サイズ別の表示切替例

/* パソコン */

@media only screen and (min-width: 962px)  {

body {

　color: blue;

　}

}



/* タブレット */

@media only screen and (min-width: 642px) and (max-width: 961px) {

body {

　color: yellow;

　}

}



/* スマホ */

@media screen and (max-width: 641px) {

body {

　color: red;

　}

}

上記では、各端末の画面横幅サイズを設定して、文字の表示色を切り替えているよ。

パソコンは「962ピクセルで青色」、タブレットは「642ピクセル～961ピクセルで黄色」、スマホは「641ピクセル以下で赤色」って感じにね。

PCやタブレット、スマホに切り替えてプレビュー画面で確認できるの？

もちろん！これで、レスポンシブデザインのサイト作成が簡単になるよ。

WordPressでCSSが反映されない原因と対処法

WordPressでCSSが反映されないことがあるんだけど、何でだろう？

主な原因は、「CSSの記述ミス」「キャッシュが残っている」「HTMLとCSSが正常にリンクされていない」「スタイルシートの優先順位が低い」の4つが挙げられるかな。

意外とあるのね。解決方法も知りたいわ。

もちろん、WordPressでCSSが反映されない原因と対処法を一緒に見てみよう。

WordPressでCSSが反映されない原因

1.CSSの記述ミス

2.キャッシュが残っている

3.HTMLとCSSが正常にリンクされていない

4.スタイルシートの優先順位が低い

1.CSSの記述ミス

まず、CSSの記述ミスがあると、WordPressで反映されないよ。

確かにそうよね。CSSの基本書式ってどんな感じだったかしら？

基本書式は、下記の通りだよ。

CSSの基本書式

セレクタ {プロパティ: 値; プロパティ: 値; … }

セレクタやプロパティ、値の形式やスペルミスがないか確認しよう。

あと、「{」「}」や、プロパティを複数指定する「;」は忘れがちだから要注意だよ。

2.キャッシュが残っている

キャッシュってよく聞くけど、実際何なのかしら？

Webページを高速表示させるための仕組みだよ。

表示したWebページの内容を一時的に保存し、再び同じページにアクセスしたときに、保存しておいた内容をパッと表示できるようになるんだ。

キャッシュが残っている状態でブラウザ表示を更新しても、CSSの変更内容が反映された状態を見られないよ。

そうなのね、どうすればキャッシュを消せるのかしら？

ブラウザのキャッシュクリアする必要があるんだけど、スーパーリロードを使う方法が1番簡単だね。

Windowsのスーパーリロード

「Ctrl」＋「F5」を同時に押す

Macのスーパーリロード

「Command」+「Shift」＋「R」を同時に押す

それなら簡単ね、私もできるわ。

3.HTMLとCSSが正常にリンクされていない

HTMLとCSSのリンクが正しくされていないと、CSSを変更してもWebページに反映されないんだ。

そうよね。特別に必要な作業って何かあるのかしら？

WordPressでは、HTMLとスタイルシートのリンクが標準で実装されているから特にないよ。

どんなときにリンクミスが起こりやすいの？

子テーマを作成したときが多く見られるかな。

もし子テーマでCSSの変更が反映されない場合は、親テーマのフォルダ名や子テーマを構成するファイル名、ファイルの記述に間違いないか確認してね。

4.スタイルシートの優先順位が低い

スタイルシートの優先順位が低くて、追加したCSSが適用されないこともあるよ。

そうなのね。優先順位ってどんな感じなのかしら？

1番目は「追加CSS」、2番目は「子テーマのスタイルシート」、3番目は「親テーマのスタイルシート」って感じかな。

なるほど、同じスタイルシート内の場合はどうなるの？

ルールは複雑だけど、下記の3つが特に優先順位が高くなるから覚えておこうね。

同じスタイルシート内で優先順位が高いCSS

1.「!important」が指定されているCSS

2.HTMLの要素の階層が深いCSS

3.後から読み込まれるCSS

まとめ

最後に、WordPressでCSSを使ってさらに素敵なサイトを作る方法についてまとめるね。

まとめ

◆CSSは、WordPressでCSSを使ってさらに素敵なサイトを作る役割をする。

◆子テーマでCSSの変更が反映されない場合、親テーマのフォルダ名や子テーマを構成するファイル名、ファイルを確認する。

◆CSSの同じスタイルシート内では、「!important」が指定されているCSS、HTMLの要素の階層が深いCSS、後から読み込まれるCSSが優先順位が高い。

WordPressでCSS使うのってそんなに難しくないでしょ？

そうね、CSSを使って思うがままサイトをデザインしてみるわ。

ブルーちゃん、教えてくれてありがとう！

この記事を参考に、CSSに挑戦して魅力的なWordPressサイトを作ってみてね！

【イラスト付き】【WordPress】CSSを使ってさらに素敵なサイトを作ろう！

そもそもCSSとは？

WordPressでCSSを編集するには？

1.テーマのスタイルシートを直接編集する方法

2.追加CSSを利用する方法

WordPressでCSSを編集してみよう！

1.フォントの変更

2.文字色の変更

3.メディアクエリで画面サイズ別に表示切替

WordPressでCSSが反映されない原因と対処法

1.CSSの記述ミス

2.キャッシュが残っている

3.HTMLとCSSが正常にリンクされていない

4.スタイルシートの優先順位が低い

まとめ

最新の記事一覧

最新の記事一覧