WordPress
更新日: 2024/11/22
【WordPress】CSSを使ってさらに素敵なサイトを作ろう!
ブルーちゃん!WordPressで作ったサイトをもっとかわいくしたいんだけど、何か良い方法はあるかしら?
それなら、CSSを使ってみたらどうかな。
コードを全部書くのは難しく感じるけど、元のコードを少し変えるだけでも印象を変えられるよ。
良さそうね!もっと詳しくしりたいな!
もちろん!この記事では、WordPressでCSSを使ってさらに素敵なサイトを作る方法を紹介するよ!
そもそもCSSとは?
そもそもCSSって何かしら?
CSSは「カスケーディング・スタイル・シート」の略で、Webページのデザインを決める言語だよ。
あれ、HTMLとは違うの?
良い気づきだね!一見似てるようで違うよ。
HTMLは、タイトルや見出し、段落といったWebサイトの構造や内容を記述しているんだ。
CSSは文字の色や大きさ、見出しのスタイルや背景、囲み枠などHTMLと組み合わせてデザインを整えているよ。
そうなのね!WordPressのテーマにも使われているのかしら?
うん、CSSを編集したり、新たに追加したりして好きなデザインに変えられるんだ。
WordPressでCSSを編集するには?
WordPressでCSSを編集する方法は3つあるって聞いたけど、どうすれば良いの?
それぞれ違う場所にあるけど、最初は戸惑っちゃうよね。
でも大丈夫!「テーマのスタイルシートを直接編集」「子テーマのスタイルシートに追加」「追加CSSの利用」と、WordPressでCSSを編集する方法を2つそれぞれ説明するよ。
ブルーちゃん、お願いね!
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は、下記の手順で利用できるよ。
1.WordPress管理画面の「外観」内の「カスタマイズ」を選択
2.左側の「カスタマイズメニュー」から「追加CSS」を選択
3.左下の「追加CSS記述欄」を編集
4.右側のプレビュー画面で正しく反映されているか確認
5.「公開」をクリックして保存、反映させない場合は「×」をクリック
プレビュー画面で確認しながら編集できるのは良いわね。
WordPressでCSSを編集してみよう!
WordPressでCSSの編集ができるのは分かったけど、コードを知らないわ。
そんなに難しくないから大丈夫!
基本的なコードを覚えたら、使っていくうちに慣れてくるよ
ぜひ、その基本的なコードを教えてくれる?
もちろん!ここでは、WordPressで使える基本的なCSSのコードを紹介するね。
1.フォントの変更
2.文字色の変更
3.メディアクエリで画面サイズ別に表示切替
1.フォントの変更
まずは文字のフォントを変えてみよう。
どうやったら変えられるの?
CSSのfont-familyプロパティを使うとできるよ。
body {
font-family: '游明朝', YuMincho, 'HG明朝E', 'MS P明朝', serif;
}
上記のコードを書くと、サイト全体のフォントを変えられるんだ。
なるほど。ちなみにフォントの種類はどこで選べばいいの?
Webフォントサービスを使うと、色んなフォントがあるから使うと良いよ!
誰でも商用や非商用にかかわらず、無料で使えるGoogle Fontsが特におすすめかな。
2.文字色の変更
次は、colorプロパティを使って文字色を変えてみよう!
どんな感じで指定するのかしら?
例えば、下記のコードだと文書全体の文字を緑色に変えられるよ。
body {color: green;}
色名でイメージと違う色だった場合、他に指定する方法ってないの?
そんなときは、16進数コードやRGB、RGBAなどをベースに選ぶと、理想の色を見つけやすいよ。
色のコードは原色大辞典にも載っているから、参考にしてみてね。
3.メディアクエリで画面サイズ別に表示切替
パソコンとスマホだと画面サイズが違うけど、どっちでも快適に表示できるのかしら?
もちろん!メディアクエリを使うと、表示画面のサイズに合わせて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が反映されない原因と対処法を一緒に見てみよう。
1.CSSの記述ミス
2.キャッシュが残っている
3.HTMLとCSSが正常にリンクされていない
4.スタイルシートの優先順位が低い
1.CSSの記述ミス
まず、CSSの記述ミスがあると、WordPressで反映されないよ。
確かにそうよね。CSSの基本書式ってどんな感じだったかしら?
基本書式は、下記の通りだよ。
セレクタ {プロパティ: 値; プロパティ: 値; … }
セレクタやプロパティ、値の形式やスペルミスがないか確認しよう。
あと、「{」「}」や、プロパティを複数指定する「;」は忘れがちだから要注意だよ。
2.キャッシュが残っている
キャッシュってよく聞くけど、実際何なのかしら?
Webページを高速表示させるための仕組みだよ。
表示したWebページの内容を一時的に保存し、再び同じページにアクセスしたときに、保存しておいた内容をパッと表示できるようになるんだ。
キャッシュが残っている状態でブラウザ表示を更新しても、CSSの変更内容が反映された状態を見られないよ。
そうなのね、どうすればキャッシュを消せるのかしら?
ブラウザのキャッシュクリアする必要があるんだけど、スーパーリロードを使う方法が1番簡単だね。
「Ctrl」+「F5」を同時に押す
「Command」+「Shift」+「R」を同時に押す
それなら簡単ね、私もできるわ。
3.HTMLとCSSが正常にリンクされていない
HTMLとCSSのリンクが正しくされていないと、CSSを変更してもWebページに反映されないんだ。
そうよね。特別に必要な作業って何かあるのかしら?
WordPressでは、HTMLとスタイルシートのリンクが標準で実装されているから特にないよ。
どんなときにリンクミスが起こりやすいの?
子テーマを作成したときが多く見られるかな。
もし子テーマでCSSの変更が反映されない場合は、親テーマのフォルダ名や子テーマを構成するファイル名、ファイルの記述に間違いないか確認してね。
4.スタイルシートの優先順位が低い
スタイルシートの優先順位が低くて、追加したCSSが適用されないこともあるよ。
そうなのね。優先順位ってどんな感じなのかしら?
1番目は「追加CSS」、2番目は「子テーマのスタイルシート」、3番目は「親テーマのスタイルシート」って感じかな。
なるほど、同じスタイルシート内の場合はどうなるの?
ルールは複雑だけど、下記の3つが特に優先順位が高くなるから覚えておこうね。
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サイトを作ってみてね!
最新の記事一覧
SEO対策が「意味ない」と言われる理由は?意味のある対策も紹介
SEO
文章作成アプリを使いこなそう!スマホで使えるおすすめのアプリ5選
SEO
Webサイト導線とは?効果的な導線の特徴と人気企業の事例を紹介
SEO
Google Discoverとは?表示せるための施策・戦略を解説
SEO
【初心者向け】HTMLのbrタグとは?基礎から使い方まで徹底解説
SEO
セッションとは?Web解析の基本概念と活用方法を解説!
SEO
査収とはどんな意味?使い方・返信マナーもわかりやすく紹介!
SEO
ローカルパックとは何?仕組みから活用方法まで徹底解説!
SEO
マンダラチャートとは?作り方や活用方法をわかりやすく解説
SEO
SEOキーワードの入れ方は?検索上位させる方法を解説!
SEO
読了とは?正しい意味や使い方、類義語・対義語について徹底解説!
SEO
検索エンジンの仕組みとは?Googleを例にわかりやすく紹介!
SEO
コンテンツファームとは?ペナルティを受ける危険性も解説!
SEO
メディックアップデートとは?実施の背景や影響を徹底解説!
SEO
Webサイト運営に必須のSEO用語集40選!初心者向けに解説
SEO
ホワイトハットSEOとは?Googleが推奨するSEO戦略を解説
SEO
Web集客の基本を知ろう!初心者でも始められる5つの方法を紹介
SEO
NPSの計算方法を徹底解説!3つの導入メリットと活用方法&注意点
SEO
無料あり!おすすめMEOツール11製品を紹介!選び方と活用法も
SEO
SEOの評価基準とは?検索順位を上げるための基本方針を解説!
SEO
最新の記事一覧
SEO対策が「意味ない」と言われる理由は?意味のある対策も紹介
SEO
文章作成アプリを使いこなそう!スマホで使えるおすすめのアプリ5選
SEO
Webサイト導線とは?効果的な導線の特徴と人気企業の事例を紹介
SEO
Google Discoverとは?表示せるための施策・戦略を解説
SEO
【初心者向け】HTMLのbrタグとは?基礎から使い方まで徹底解説
SEO
セッションとは?Web解析の基本概念と活用方法を解説!
SEO
査収とはどんな意味?使い方・返信マナーもわかりやすく紹介!
SEO
ローカルパックとは何?仕組みから活用方法まで徹底解説!
SEO
マンダラチャートとは?作り方や活用方法をわかりやすく解説
SEO
SEOキーワードの入れ方は?検索上位させる方法を解説!
SEO
読了とは?正しい意味や使い方、類義語・対義語について徹底解説!
SEO
検索エンジンの仕組みとは?Googleを例にわかりやすく紹介!
SEO
コンテンツファームとは?ペナルティを受ける危険性も解説!
SEO
メディックアップデートとは?実施の背景や影響を徹底解説!
SEO
Webサイト運営に必須のSEO用語集40選!初心者向けに解説
SEO
ホワイトハットSEOとは?Googleが推奨するSEO戦略を解説
SEO
Web集客の基本を知ろう!初心者でも始められる5つの方法を紹介
SEO
NPSの計算方法を徹底解説!3つの導入メリットと活用方法&注意点
SEO
無料あり!おすすめMEOツール11製品を紹介!選び方と活用法も
SEO
SEOの評価基準とは?検索順位を上げるための基本方針を解説!
SEO