CSSとは？WordPressで変更する方法を詳しく紹介【2024年最新版】

運用しているWordPressのテーマデザインを、一部だけ変更したいと考えていないでしょうか。このときCSSが役立つと知ったものの、CSSとは何なのかよく分からないとお困りの方も多いはずです。
そこでこの記事では、営業・バックオフィス・情報システムなど、さまざまな分野の法人向けサービスを比較検討できる「PRONIアイミツ」が、WordPressで用いられるマークアップ言語CSSについて詳しく紹介！また、同じマークアップ言語であるHTMLの説明や、HTML・CSSを追加変更する方法も解説します。

【関連ページ】WordPressのホームページ制作にかかる費用・相場感や、あなたの目的別にWordPressに強いホームページ制作会社をお探しいただけます。
WordPressのホームページ制作の費用・相場
WordPressに強いホームページ制作会社一覧

WordPressでテーマデザインを変更・追加するときには、少なくともマークアップ言語のHTML・CSSを使わなければなりません。しかし、具体的な役割や違い、使い方が分からずお困りの方もいるでしょう。そこでまずは、HTML・CSSの概要を分かりやすく説明します。事前知識として参考にしてください。

HTMLとは、Webページを作成するために用いるマークアップ言語です。主に以下の「文章」の項目と関連する部分を構築するために用います。

Google検索といった検索エンジンのロボットがWebサイトをクロージングする際には、HTMLで記述した部分を中心に確認が行うのが特徴です。また、文字の強調や色付けなど簡単な機能もHTMLで実装できますが、ほとんどの場合は後述するCSSで実装します。

CSSとは、Webページのデザインを構築する役割をもつマークアップ言語です。例えば、次のようなデザイン構築できます。

またCSSは「実現できないデザインはない」といわれるほど多彩なコード（タグ・セレクタ・プロパティなど）が用意されています。複数の記述を組み合わせることによって、現在利用しているWordPressのテーマデザインがつくられているのです。

WordPressでは、文章部分を作成するために用いる「HTML」、細かなデザインを行うために用いる「CSS」を使ってWebサイトが構築していきます。よって、WordPressで作成したWebページのレイアウト・デザインを変更したいのなら、CSSを理解することが必要不可欠です。ここでは、CSSの基本知識として「変更・追加する条件」「変更・追加するタイミング」「初心者にも扱えるのか」を紹介します。

まず大前提となる条件として「あなたが選ぶテーマ」ごとにCSSのデザインが設定されています。つまり、テーマ選びにこだわれば、後々CSSを変更せずに済む場合があるのです。WordPressにある外観設定のテーマ画面を利用すれば、自由にテーマデザインのプレビュー画面をチェックできます。テーマはいつでも簡単に切り替えられるので、デザインの表現を確認しつつ、満足のいくものがないかチェックしてみてください。

WordPressでCSSの変更・追加が必要になるのは、次のような問題が生じた場合です。

「デザインの一部が気に入らない」「もう少しこうだったら良いのに」といった際にCSSの変更・追加を実施します。Webサイトのデザインに不満を感じているのなら、ぜひCSSを活用してみてください。  

CSSを含むマークアップ言語は、初心者でも学べる言語として有名です。しかし、難易度はそれほど高くはないものの、記述を1つ間違えるとサイト全体のデザインが崩れる場合があります。変更・追加したい箇所が多いほど問題が発生しやすくなるので、CSSをしっかり学んだうえで変更・追加してください。また、大きな問題が起きてもすぐ元に戻せるように、バックアップをとっておく、困った際に相談できる人を確保するなど、トラブル回避の準備をしておくと安心です。

WordPressでCSSを変更・追加できる場所は「親テーマ」「子テーマ」「追加CSS」の3つです。各項目の概要とCSS編集方法について詳しく解説します。正しくCSSを適用する参考にしてみてください。

親テーマとは、WordPressのテーマに「もともと用意されている」デザインのことです。現在WordPressで使っている（使おうとしている）テーマは、親テーマとしてHTML・CSSが記述されています。
ちなみにCSSを記述できるのは親テーマにある「style.css」ファイルです。テキストデータとして開き、CSSのタグを変更・追加することによって目的の項目を調整できます。ただし、提供されているテーマがアップデートされるとCSSがまるごと書き換わることに注意しなければなりません。頻繁にアップデートしているテーマを利用する場合には、親テーマに触れないのがおすすめです。

子テーマとは、必要最小限のファイルで構成された親テーマのコピーのようなものです。例えば、親テーマと同じく「style.css」ファイルが用意されています。
子テーマを利用するのは、親テーマのアップデートによる上書き・初期化を回避するためです。親テーマはアップデートのたびに内容が書き換わる一方、子テーマではカスタマイズしたデータを維持できます。せっかく変更した親テーマのCSSデザインがアップデートのせいでゼロに戻ってしまうケースもあるため、CSSを変更する際には子テーマを用いるのが一般的です。

追加CSSとは、WordPressの管理画面に設けられているCSS記述画面のことです。通常、親テーマや子テーマのCSSを変更・追加する際には、一度自身のPC上でテキストデータを編集してアップロードする作業が必要です。一方、追加CSSを使えばWordPressの中に直接CSSを書き込めます。
ちなみに追加CSSは子テーマと同じように、テーマのアップデートがあってもCSSの記述が維持されます。ただし、数百行～数千行と大規模な変更・追加を行える子テーマに対し、追加CSSは数行～数十行といった小規模な記述向けです。行数が多く見えづらくなる場合には、子テーマのCSSを変更しましょう。

CSSを変更・追加する例として、テーマファイルエディターを使用した親テーマCSSの変更方法を紹介します。4つの手順に分けて解説しているので、変更の流れを理解していきましょう。※この例ではGoogleChromeの開発者ツールを用います。

まずはWordPressのログインURLを開き「ユーザー名（メールアドレス）」「パスワード」を入力して管理画面にログインしてください。管理画面が表示されたら、画面左側にあるツールバーから「外観＞テーマファイルエディター」を選びましょう。このページからダウンロードしているテーマのCSSを自由に編集できます。

テーマファイルエディターを開いたら、まずはCSSを編集したい親テーマを選びましょう。e.css）」をクリックしてください。すると、下画面にテーマに記述されているCSSが表示されます。CSSの編集はこの画面上から実施できます。

表示されたsyle.cssの中には、項目ごとに複数のタグがまとめられています。変更を行う際には、既存のタグから目的のものを見つけて記述の値などを書き換えてみてください。SSを変更・追加する項目を探す際には、親シートに記述されているコメントが参考になります。

style.cssの内容を目的のとおりに変更・追加したら、編集画面の下側にある「ファイルを更新」をクリックしてください。この変更によって、選択した親テーマのデザインが書き換わります。「外観＞テーマ」からCSSを変更したテーマを選び、うまくCSSが反映されているかチェックしてみてください。

CSSの変更・追加を行ったのにもかかわらず、うまく反映されないとお悩みではないでしょうか。もしかするとそれは、PCの設定が関係しているのかもしれません。想定される原因を3つ整理しました。問題解決の参考にしてみてください。

ブラウザのキャッシュが残っていると、CSSを変更したのにもかかわらずうまく変更後の情報が反映されないケースがあります。まずは、ブラウザ設定画面からキャッシュを削除してみましょう。キャッシュの削除はWindowsの場合は「Ctrl＋F5」、Macの場合は「Command＋Shift＋R」から実施できます。

変更したCSSが反映されないのは、CSSの記述を間違えているのが原因かもしれません。変更・追加を加えた項目について次のチェックを行いましょう。

記述ミスはよくあるエラーですので、ぜひ確認してみてください。

場合によってはスタイルシートの優先順位が低いため、変更・追加したCSSが反映されなかったのかもしれません。WordPressでは「追加CSS＞子テーマ＞親テーマ」という順で優先的にCSSが反映されます。つまり、子テーマで変更した項目が、追加CSSの記述のせいでうまく反映できないケースもあるのです。ます。

WordPressを用いてWebサイトの作成・運営を行うのは簡単ですが、CSSの変更・追加といった細かい調整には専門知識と経験が必要です。もし社内リソースで対応できない、CSSを学ぶ時間がないとお悩みなら、WordPressの運営やテーマ構築を外注依頼するのがおすすめです。既存テーマのCSS書き換えはもちろん、企業独自のオリジナルテーマを作成してもらえるため、理想のテーマデザインを手に入れてみてはいかがでしょうか。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

WordPressテーマのデザイン変更したいのなら、CSSを編集して部分的に変更・追加するのがおすすめです。しかし、社内ではCSSに対応できない、相談できる人を探したいと考える方も多いでしょう。もしWordPressのCSS編集やテーマ作成をプロに相談したいなら、ぜひPRONIアイミツがリストアップしているサービスをご検討ください。おすすめのサービスの資料をまとめてご請求いただくことも可能です。

【相談前にまずは会社一覧を見たいという方はこちら】
WordPressに強いホームページ制作会社一覧
【費用感を知りたいという方はこちら】
WordPressのホームページ制作の費用と相場