![【WordPress】CSSを使ってさらに素敵なサイトを作ろう!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/bf536cfc7116411781ecf021aa969026/Group%20715.png?w=1200&fm=webp)
wordpress
更新日: 2024/6/11
【WordPress】CSSを使ってさらに素敵なサイトを作ろう!
![character_balloon](/media/character/pink_normal_left.png)
ブルーちゃん!WordPressで作ったサイトをもっとかわいくしたいんだけど、何か良い方法はあるかしら?
それなら、CSSを使ってみたらどうかな。
![character_balloon](/media/character/blue_normal_right.png)
コードを全部書くのは難しく感じるけど、元のコードを少し変えるだけでも印象を変えられるよ。
![character_balloon](/media/character/blue_up_right.png)
![character_balloon](/media/character/pink_happy_left.png)
良さそうね!もっと詳しくしりたいな!
もちろん!この記事では、WordPressでCSSを使ってさらに素敵なサイトを作る方法を紹介するよ!
![character_balloon](/media/character/blue_happy_right.png)
そもそもCSSとは?
そもそもCSSって何かしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
CSSは「カスケーディング・スタイル・シート」の略で、Webページのデザインを決める言語だよ。
あれ、HTMLとは違うの?
![character_balloon](/media/character/pink_amazed_right.png)
![character_balloon](/media/character/blue_smile_left.png)
良い気づきだね!一見似てるようで違うよ。
![character_balloon](/media/character/blue_normal_left.png)
HTMLは、タイトルや見出し、段落といったWebサイトの構造や内容を記述しているんだ。
![character_balloon](/media/character/blue_happy_left.png)
CSSは文字の色や大きさ、見出しのスタイルや背景、囲み枠などHTMLと組み合わせてデザインを整えているよ。
そうなのね!WordPressのテーマにも使われているのかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_inspiration_left.png)
うん、CSSを編集したり、新たに追加したりして好きなデザインに変えられるんだ。
WordPressでCSSを編集するには?
WordPressでCSSを編集する方法は3つあるって聞いたけど、どうすれば良いの?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
それぞれ違う場所にあるけど、最初は戸惑っちゃうよね。
![character_balloon](/media/character/blue_confidence_left.png)
でも大丈夫!「テーマのスタイルシートを直接編集」「子テーマのスタイルシートに追加」「追加CSSの利用」と、WordPressでCSSを編集する方法を2つそれぞれ説明するよ。
ブルーちゃん、お願いね!
![character_balloon](/media/character/pink_happy_right.png)
1.テーマのスタイルシートを直接編集
2.追加CSSの利用
1.テーマのスタイルシートを直接編集する方法
![character_balloon](/media/character/blue_down_left.png)
下記の手順で、テーマのスタイルシートを直接編集できるよ。
1.WordPress管理画面の「外観」内の「テーマエディター」を選択
2.元ファイルのバックアップを勧める注意画面の「理解しました」をクリック
3.初期のスタイルシート「style.css」が選択されているか確認
4.「style.css」の最後の行に記述を追加して「ファイルを更新」をクリック
![character_balloon](/media/character/blue_up_left.png)
念のためCSSを編集する前にはバックアップを取っておくと、サイトが崩壊しても復旧させやすくなるよ。
そうするわ。ところで手順3の段階で、初期のスタイルシート「style.css」が表示されなかったらどうすれば良いの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
右側の「テーマファイル」一覧から「スタイルシート(style.css)」を選ぶと編集できるよ。
分かったわ。手順4で「最後の行に記述を追加」するのはなぜかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
それはね、CSSは最後の行の記述が優先されるからなんだ。
なるほど、勉強になるわ。
![character_balloon](/media/character/pink_happy_right.png)
2.追加CSSを利用する方法
追加CSSの利用って何が良いの?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
テーマを直接変更する必要がないから、バージョンアップの影響を受けない点が大きなメリットだよ。
![character_balloon](/media/character/blue_up_left.png)
あと、プレビュー画面でデザインなどの変更が確認できたり、ミスがないかCSSの検証もできるんだ。
![character_balloon](/media/character/blue_worry_left.png)
ただ、追加CSSはテーマごとにCSSを保存する機能で、親テーマを別のテーマに変更すると追加CSSの内容が消えちゃうから気をつけてね。
そうなのね。具体的な手順はどんな感じかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_down_left.png)
追加CSSは、下記の手順で利用できるよ。
1.WordPress管理画面の「外観」内の「カスタマイズ」を選択
2.左側の「カスタマイズメニュー」から「追加CSS」を選択
3.左下の「追加CSS記述欄」を編集
4.右側のプレビュー画面で正しく反映されているか確認
5.「公開」をクリックして保存、反映させない場合は「×」をクリック
プレビュー画面で確認しながら編集できるのは良いわね。
![character_balloon](/media/character/pink_happy_right.png)
WordPressでCSSを編集してみよう!
WordPressでCSSの編集ができるのは分かったけど、コードを知らないわ。
![character_balloon](/media/character/pink_worry_right.png)
![character_balloon](/media/character/blue_normal_left.png)
そんなに難しくないから大丈夫!
![character_balloon](/media/character/blue_confidence_left.png)
基本的なコードを覚えたら、使っていくうちに慣れてくるよ
ぜひ、その基本的なコードを教えてくれる?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_inspiration_left.png)
もちろん!ここでは、WordPressで使える基本的なCSSのコードを紹介するね。
1.フォントの変更
2.文字色の変更
3.メディアクエリで画面サイズ別に表示切替
1.フォントの変更
![character_balloon](/media/character/blue_normal_left.png)
まずは文字のフォントを変えてみよう。
どうやったら変えられるの?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_down_left.png)
CSSのfont-familyプロパティを使うとできるよ。
body {
font-family: '游明朝', YuMincho, 'HG明朝E', 'MS P明朝', serif;
}
![character_balloon](/media/character/blue_up_left.png)
上記のコードを書くと、サイト全体のフォントを変えられるんだ。
なるほど。ちなみにフォントの種類はどこで選べばいいの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
Webフォントサービスを使うと、色んなフォントがあるから使うと良いよ!
![character_balloon](/media/character/blue_happy_left.png)
誰でも商用や非商用にかかわらず、無料で使えるGoogle Fontsが特におすすめかな。
2.文字色の変更
![character_balloon](/media/character/blue_normal_left.png)
次は、colorプロパティを使って文字色を変えてみよう!
どんな感じで指定するのかしら?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_down_left.png)
例えば、下記のコードだと文書全体の文字を緑色に変えられるよ。
body {color: green;}
色名でイメージと違う色だった場合、他に指定する方法ってないの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_inspiration_left.png)
そんなときは、16進数コードやRGB、RGBAなどをベースに選ぶと、理想の色を見つけやすいよ。
![character_balloon](/media/character/blue_happy_left.png)
色のコードは原色大辞典にも載っているから、参考にしてみてね。
3.メディアクエリで画面サイズ別に表示切替
パソコンとスマホだと画面サイズが違うけど、どっちでも快適に表示できるのかしら?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
もちろん、メディアクエリを使うと、表示画面のサイズに合わせてCSSを切り替えられるよ。
![character_balloon](/media/character/blue_up_left.png)
画面横幅の最大ピクセル数で指定するのが一般的だね。
そうなのね、どんな感じのコードを書いたら良いの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_down_left.png)
下記のように書くと、パソコンやタブレット、スマホの画面サイズ(横幅)を設定できるよ。
/* パソコン */
@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](/media/character/blue_up_left.png)
上記では、各端末の画面横幅サイズを設定して、文字の表示色を切り替えているよ。
![character_balloon](/media/character/blue_normal_left.png)
パソコンは「962ピクセルで青色」、タブレットは「642ピクセル~961ピクセルで黄色」、スマホは「641ピクセル以下で赤色」って感じにね。
PCやタブレット、スマホに切り替えてプレビュー画面で確認できるの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
もちろん!これで、レスポンシブデザインのサイト作成が簡単になるよ。
WordPressでCSSが反映されない原因と対処法
WordPressでCSSが反映されないことがあるんだけど、何でだろう?
![character_balloon](/media/character/pink_sad_right.png)
![character_balloon](/media/character/blue_normal_left.png)
主な原因は、「CSSの記述ミス」「キャッシュが残っている」「HTMLとCSSが正常にリンクされていない」「スタイルシートの優先順位が低い」の4つが挙げられるかな。
意外とあるのね。解決方法も知りたいわ。
![character_balloon](/media/character/pink_worry_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
もちろん、WordPressでCSSが反映されない原因と対処法を一緒に見てみよう。
1.CSSの記述ミス
2.キャッシュが残っている
3.HTMLとCSSが正常にリンクされていない
4.スタイルシートの優先順位が低い
1.CSSの記述ミス
![character_balloon](/media/character/blue_normal_left.png)
まず、CSSの記述ミスがあると、WordPressで反映されないよ。
確かにそうよね。CSSの基本書式ってどんな感じだったかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_down_left.png)
基本書式は、下記の通りだよ。
セレクタ {プロパティ: 値; プロパティ: 値; … }
![character_balloon](/media/character/blue_up_left.png)
セレクタやプロパティ、値の形式やスペルミスがないか確認しよう。
![character_balloon](/media/character/blue_worry_left.png)
あと、「{」「}」や、プロパティを複数指定する「;」は忘れがちだから要注意だよ。
2.キャッシュが残っている
キャッシュってよく聞くけど、実際何なのかしら?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
Webページを高速表示させるための仕組みだよ。
![character_balloon](/media/character/blue_confidence_left.png)
表示したWebページの内容を一時的に保存し、再び同じページにアクセスしたときに、保存しておいた内容をパッと表示できるようになるんだ。
![character_balloon](/media/character/blue_amazed_left.png)
キャッシュが残っている状態でブラウザ表示を更新しても、CSSの変更内容が反映された状態を見られないよ。
そうなのね、どうすればキャッシュを消せるのかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_inspiration_left.png)
ブラウザのキャッシュクリアする必要があるんだけど、スーパーリロードを使う方法が1番簡単だね。
「Ctrl」+「F5」を同時に押す
「Command」+「Shift」+「R」を同時に押す
それなら簡単ね、私もできるわ。
![character_balloon](/media/character/pink_happy_right.png)
3.HTMLとCSSが正常にリンクされていない
![character_balloon](/media/character/blue_amazed_left.png)
HTMLとCSSのリンクが正しくされていないと、CSSを変更してもWebページに反映されないんだ。
そうよね。特別に必要な作業って何かあるのかしら?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
WordPressでは、HTMLとスタイルシートのリンクが標準で実装されているから特にないよ。
どんなときにリンクミスが起こりやすいの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_up_left.png)
子テーマを作成したときが多く見られるかな。
![character_balloon](/media/character/blue_inspiration_left.png)
もし子テーマでCSSの変更が反映されない場合は、親テーマのフォルダ名や子テーマを構成するファイル名、ファイルの記述に間違いないか確認してね。
4.スタイルシートの優先順位が低い
![character_balloon](/media/character/blue_amazed_left.png)
スタイルシートの優先順位が低くて、追加したCSSが適用されないこともあるよ。
そうなのね。優先順位ってどんな感じなのかしら?
![character_balloon](/media/character/pink_panic_right.png)
![character_balloon](/media/character/blue_normal_left.png)
1番目は「追加CSS」、2番目は「子テーマのスタイルシート」、3番目は「親テーマのスタイルシート」って感じかな。
なるほど、同じスタイルシート内の場合はどうなるの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_down_left.png)
ルールは複雑だけど、下記の3つが特に優先順位が高くなるから覚えておこうね。
1.「!important」が指定されているCSS
2.HTMLの要素の階層が深いCSS
3.後から読み込まれるCSS
![character_balloon](/media/character/blue_normal_left.png)
最後に、WordPressでCSSを使ってさらに素敵なサイトを作る方法についてまとめるね。
まとめ
◆CSSは、WordPressでCSSを使ってさらに素敵なサイトを作る役割をする。
◆子テーマでCSSの変更が反映されない場合、親テーマのフォルダ名や子テーマを構成するファイル名、ファイルを確認する。
◆CSSの同じスタイルシート内では、「!important」が指定されているCSS、HTMLの要素の階層が深いCSS、後から読み込まれるCSSが優先順位が高い。
![character_balloon](/media/character/blue_question_left.png)
WordPressでCSS使うのってそんなに難しくないでしょ?
そうね、CSSを使って思うがままサイトをデザインしてみるわ。
![character_balloon](/media/character/pink_happy_right.png)
ブルーちゃん、教えてくれてありがとう!
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_smile_left.png)
この記事を参考に、CSSに挑戦して魅力的なWordPressサイトを作ってみてね!
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス
2025年問題とは?どのような影響があるか解説【国の対策も】
ビジネス
やる気とは?努力してもできないものはできない理由を解説
ビジネス
モチベーションの上げ方を紹介!理想と現実のギャップを生かそう!
ビジネス
ノベルティとは?コツや作り方、販促品との違いについても解説!
広報・PR
リーフレットとは?作る目的や作り方、パンフレットとの違いを解説!
広報・PR
広報とは?種類や仕事内容、PRとの違いについても解説!
広報・PR
プレスリリースの書き方は?構成要素やポイント、コツを解説!
広報・PR
ブランド戦略とは?必要な理由や戦略の立て方について解説!
広報・PR
戦略PRとは?重要な理由や実施方法、注意点などについて解説!
広報・PR
広報とPRの違いは?目的や仕事内容の違い、スキルについて解説!
広報・PR
広報とIRの違いは?IRの仕事内容や注意点についても解説!
広報・PR
【初心者向け】WordPressのショートコードの使い方を解説!
wordpress
ステークホルダーとは?重要性や良好な関係を築くポイントを解説
経営・会計
フィードバックとは?意味や効果、具体的な手法を徹底解説
ビジネス
最新の記事一覧
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス
2025年問題とは?どのような影響があるか解説【国の対策も】
ビジネス
やる気とは?努力してもできないものはできない理由を解説
ビジネス
モチベーションの上げ方を紹介!理想と現実のギャップを生かそう!
ビジネス
ノベルティとは?コツや作り方、販促品との違いについても解説!
広報・PR
リーフレットとは?作る目的や作り方、パンフレットとの違いを解説!
広報・PR
広報とは?種類や仕事内容、PRとの違いについても解説!
広報・PR
プレスリリースの書き方は?構成要素やポイント、コツを解説!
広報・PR
ブランド戦略とは?必要な理由や戦略の立て方について解説!
広報・PR
戦略PRとは?重要な理由や実施方法、注意点などについて解説!
広報・PR
広報とPRの違いは?目的や仕事内容の違い、スキルについて解説!
広報・PR
広報とIRの違いは?IRの仕事内容や注意点についても解説!
広報・PR
【初心者向け】WordPressのショートコードの使い方を解説!
wordpress
ステークホルダーとは?重要性や良好な関係を築くポイントを解説
経営・会計
フィードバックとは?意味や効果、具体的な手法を徹底解説
ビジネス