【WordPress】CSSを使ってさらに素敵なサイトを作ろう!のアイキャッチ画像

wordpress

更新日: 2024/5/11

【WordPress】CSSを使ってさらに素敵なサイトを作ろう!

character_balloon

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

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

character_balloon

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

character_balloon
character_balloon

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

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

character_balloon

そもそもCSSとは?

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

character_balloon
character_balloon

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

あれ、HTMLとは違うの?

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

WordPressでCSSを編集するには?

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

character_balloon
character_balloon

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

character_balloon

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

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

character_balloon
WordPressでCSSを編集する方法

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


2.追加CSSの利用

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

character_balloon

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

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

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


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


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


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

character_balloon

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

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

character_balloon
character_balloon

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

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

character_balloon
character_balloon

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

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

character_balloon

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

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

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

追加CSSを利用する方法

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


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


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


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


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

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

character_balloon

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

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

character_balloon
character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

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

1.フォントの変更


2.文字色の変更


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

1.フォントの変更

character_balloon

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

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

character_balloon
character_balloon

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

フォントの変更例

body {


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


}

character_balloon

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

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

character_balloon
character_balloon

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

character_balloon

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

2.文字色の変更

character_balloon

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

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

character_balloon
character_balloon

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

文字色の変更例

body {color: green;}

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

character_balloon
character_balloon

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

character_balloon

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

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

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

character_balloon
character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

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

/* パソコン */ @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;} }

character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

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

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

character_balloon
character_balloon

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

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

character_balloon
character_balloon

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

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

1.CSSの記述ミス


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


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


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

1.CSSの記述ミス

character_balloon

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

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

character_balloon
character_balloon

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

CSSの基本書式

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

character_balloon

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

character_balloon

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

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

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

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

Windowsのスーパーリロード

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

Macのスーパーリロード

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

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

character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

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

character_balloon
character_balloon

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

character_balloon

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

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

character_balloon

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

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

character_balloon
character_balloon

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

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

character_balloon
character_balloon

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

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

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


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


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

まとめ

character_balloon

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

まとめ

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


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


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

character_balloon

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

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

character_balloon

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

character_balloon
character_balloon

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

character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

最新の記事一覧
最新の記事一覧