WordPressカスタマイズの基本となりますが、WordPressサイトの外観を決定しているWordPressテーマのCSSファイルを編集することで、Webデザインに関する細かなカスタマイズが可能になります。
このCSSファイルの操作とメディアクエリの利用でWordPressテーマをレスポンシブデザインへと変更することもできますが（モバイルフレンドリーの基本ですね）、HTML側の各要素のIDやclassがしっかりと指定されていないと、CSS編集のみではうまく変更できない場合もあります。
さて、今回は「初心を忘れずに」ということで、WordPressサイトのCSSを編集する方法について初心者の方向けにお伝えしていきます。WordPressのカスタマイズの基本です。
WordPressサイトのCSSを編集する方法には、「WordPress管理画面からテーマCSSファイルを編集する」という方法と、「CSSをローカルのエディタで編集しFTPで上書きアップロードする」という方法があります。
WordPressテーマによっては、WordPress管理画面からのCSSファイルの操作だけではうまく変更できない場合があります（テーマカスタマイザーによって、スタイルが直書きされたりする場合ですね）。この場合は、「外観」の「カスタマイズ」でなんとかなる場合もあります。
WordPress管理画面からテーマCSSファイルを編集する
WordPressにログインすると管理画面が表示されます。
WordPress管理画面の左側に操作メニューが表示されてますので、その中の「外観」から「テーマの編集」を選択します。
style.css
すると、基本的には最初からCSSファイルが選択されています。
テーマの編集
テーマ名：スタイルシート (style.css)
という風に表示されていると思います。
この画面でCSS（style.css）を編集します。
WordPressテーマにもよりますが概ね1000行以上あります。
また、style.cssの他に複数のCSSを組み合わせている場合もあります。ほとんどの部分をBootstrapに委ねているケースもありますので、そのような場合は、classなどを見つけて「上書きする形」でCSSを追加します。
でも、レスポンシブ用に画面サイズごとの設定（メディアクエリ）があった場合、レイアウト崩れなどの原因にもなるので、記述場所には注意してください（要素の幅などの変更の場合）。
…
今回のテーマは単に「CSSを編集する」までの話であったはずですが、いきなり脱線気味です。
この管理画面のスタイルシート (style.css)を編集することでWordPressをカスタマイズすることができます。
例）文字色をカスタマイズする場合
では、WordPressをカスタマイズする場合の例として、文字色を変更する場合について少しだけ例をお伝えします。
例えばWordPressサイトの文字色を変えたい場合は、
color:#000000;
などを編集すると文字色が変化します。
しかしながら、どの部分の文字色の設定なのかは、CSSをよくよく見る必要があります。
例えば
h3 { color: #000000;}
ならばh3の小見出しのフォントカラーですが、WordPressサイトにはコンテンツ部分のh3とウィジェットエリアのh3など、h3にも種類があります。
ひとまず全てのh3に共通するものは上記のCSSで設定しておいて、部分部分によって.widget-title h3とか、.entry-content h3などの書き方で、それぞれの部分のWebデザインを変化させているものがほとんどです。
全体の基本となる文字色はbodyやhtmlに指定してあることがほとんどです。
body { color: #000000;}
html { color: #000000;}
WordPressテーマのCSSをローカルのエディタで編集しFTPで上書きアップロードする
WordPressの管理画面で操作できる範囲は実は限定的であるケースがあります。
先ほどの「外観」⇒「テーマの編集」で表示されるのはWordPressテーマファイルのメインCSSです。基本的にはこのファイル単体しか表示されません。
しかしながら、実はテーマファイルをの構成を深く見ていくと複数のCSSで構成されている場合があります。
優先されるCSS
<head>内で呼び出される順番によって、優先されるCSSの記述が決定します。
こうしたことから、メインのCSS（WordPressテーマ内のstyle.css）を編集しても、優先されるCSSファイルにいわば「設定が上書き」される影響で、「WordPressのCSSを編集しても反映されない」という事が起こることがあります。
そんなときは、最も優先されるCSSを新たに設置するか、<head>内にあるCSSの順番を工夫するなどの方法も良いですが、下手にすると、すべてのCSS設定がぐちゃぐちゃになってしまうこともあります。
こうした場合に、FTPソフトで該当CSSファイルをローカルにダウンロードして、ローカル環境のエディタで編集後、上書きアップロードするほうが安全なケースがあります。
WordPressテーマの中のCSS
WordPressテーマの中のCSSは
WordPressインストールディレクトリ/wp-content/themes/テーマ名/
のどこかにありますが、それぞれのWordPressテーマによってどの場所にどれだけのCSSファイルがあるかはバラバラです。
WordPress管理画面からのCSS編集によるカスタマイズでうまくいかない場合は、そうしたCSSを探してみてください。
WordPressテーマにおけるCSSの構成
先に少し触れていましたが、WordPressテーマは複数のCSSで外観を決定している場合がよくあります。
WordPressテーマは、Bootstrapで一旦ベースとなるCSSを設定し、それからオリジナルのCSSを適用していくというような作りになっているものも数多くあります。
場合によっては、テーマ内のカスタマイズ機能で、全体の色合いを選択できたり、「見出しのボーダー色」など個別に設定していける場合もあります。
WordPressテーマによりますが、複雑な場合は、
①Bootstrapで基本的なCSSを設定、②管理画面のスタイルシート (style.css)でテーマ独自の共通部分を設定、③テーマカスタマイザーで全体的なレイアウトや配色を決定した時などに適用されるCSSを設定、④テーマカスタマイザー内の追加 CSS・カスタムCSSで記述したものをインラインスタイル等を吐き出して最優先にする、
というような構造になっている場合があります。
上ほど基本設定的なものとなり、下に行くほど上書きされて最優先されていくといったイメージです。
WordPressテーマの中のCSSの構成と優先順位
- Bootstrapなどによる基本設定
- テーマファイルのスタイルシート (style.css)でテーマ独自設定
- テーマカスタマイザーで選択するレイアウトや配色パターン
- テーマカスタマイザー内の追加 CSS・カスタムCSSで設定するCSS
こうした場合、テーマファイルのスタイルシート (style.css)を編集しても、同一のclass等であればその後の③や④で上書きされるため、編集内容が適用されません。
テーマ内で追加 CSS・カスタムCSSを設定できる場合もある
WordPressテーマによっては、カスタマイズ機能やテーマの詳細設定画面において、独自の「追加 CSS」「カスタムCSS」を設定できる場合があります。これは、「style.css」を筆頭に、複数のCSSがあったとしても最優先されるCSSを吐き出したり、インラインスタイルを吐き出すような仕組みが導入されているというような形になります。
テーマのカスタマイズ機能等にCSSを記述するエディタが表示されます。
既存のCSSとclass等が重複した場合は、こちらが優先されるようになっています（上書きされるようなイメージです）。テーマによっては、CSSが重複した場合、稀に優先されないことがありますが、その場合は!importantで対応する必要があります。
WordPressのホームページ（ウェブサイト）を運用する中で、デザインの微調整やレイアウトの最適化を行う場面は数多く存在します。基本的なCSSの記述場所についてはすでに触れましたが、実際の運用環境では、テーマ独自の機能や各種プラグイン、さらにはエディタの仕様が複雑に絡み合い、単純にCSSを追記するだけではデザインが反映されないトラブルが頻発します。ここでは、テーマに備わっているカスタムCSS機能の深掘りと、複雑なスタイル干渉を解決するためのより専門的な手法について解説していきます。
テーマ独自のカスタムCSS機能の活用
近年主流となっている多機能なWordPressテーマの多くは、テーマ固有の設定パネルやカスタマイザーの中に「追加CSS」や「カスタムCSS」を入力できる専用の領域を設けています。この機能を深く理解して活用することは、安全なホームページ（ウェブサイト）運用のために非常に重要です。
カスタマイザーとテーマ設定パネルの違い
WordPress標準のカスタマイザーに用意されている「追加CSS」は、画面右側のプレビューを見ながらリアルタイムでデザインの変更を確認できるという大きな利点があります。一方で、テーマ独自のオプションパネルに設置されたカスタムCSS入力欄は、サイト全体に適用されるものだけでなく、特定の投稿や固定ページのみに出力されるよう細かく制御できる機能を持つ場合があります。用途に応じてこれらを使い分けることで、不要なコードの読み込みを減らし、ページの表示速度を最適化できます。
データベース保存による更新時の安全性
テーマ内のカスタムCSS機能に入力したコードは、直接ファイルに書き込まれるのではなく、WordPressのデータベース内に安全に保存されます。そのため、親テーマのアップデートを実行してファイルが上書きされても、入力したCSSデータは消失しません。子テーマを用意する手間を省きつつ、テーマの機能拡張の恩恵を安全に受け続けることができるため、事業用のホームページ（ウェブサイト）では特に重宝される機能です。
プラグインやエディタによるスタイル干渉の回避策
テーマの機能を利用しても、どうしてもデザインが反映されないケースがあります。ここからは、現在のWordPress環境が抱えやすい構造的な問題と、その技術的な解決策について解説します。
functions.phpを用いたスタイルのフィルタリング
追加したCSSが効かない原因の多くは、利用しているテーマやプラグインが独自のスタイルシートを優先的に出力していることにあります。特に、プラグインが出力するCSSの読み込み順序が後回しになっていたり、IDなどを利用した強力なセレクタが指定されていたりすると、管理画面からCSSを追記しても上書きできません。
このようなケースでは、functions.phpを編集して原因となっているスタイルシートの読み込み自体を制御（デキュー）したり、出力のタイミングをフックで変更する処理が必要になります。不要なスタイルを事前にフィルタリングしてから独自のCSSを適用することで、表示の不具合を確実に取り除くことが可能です。
ブロックエディタのインラインスタイルによる弊害
現在のWordPressで標準となっているブロックエディタ（Gutenberg）では、編集画面の右側パネルから文字の大きさや色を直感的に変更できます。しかし、ここでフォントサイズを直接指定すると、HTML要素に対して直接スタイルが書き込まれる（インラインスタイルが出力される）仕組みになっています。
インラインスタイルはCSSの優先度が極めて高いため、パソコン版の画面に合わせて大きな文字サイズを設定してしまうと、スマートフォン版の小さな画面でもその大きなサイズが強制され、レイアウトが著しく崩れてしまう場合があります。
CSSクラスを用いたレスポンシブ対応の管理
上記のようなスマートフォン表示の崩れを防ぐためには、ブロックエディタで直接フォントサイズや色を指定するのではなく、「高度な設定」パネルから独自の追加CSSクラスを付与する運用が推奨されます。要素に対して特定のクラス名を与え、実際のデザインや文字サイズはメディアクエリを用いて外部のCSSで管理します。
これにより、パソコン閲覧時とスマートフォン閲覧時で異なるスタイルを柔軟に適用できるようになり、多様なデバイスに対応した快適なホームページ（ウェブサイト）を長期的に維持できます。
（初回投稿日 2015年10月16日）
WordPressカスタマイズ・修正
ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress（ワードプレス）のテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧・復元に対応しております。
WordPressでのホームページ制作（WordPressサイト制作）
ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作（WordPressサイト制作）を推進させていただいております。
企業のWebマーケティングを加速するWordPressでのホームページ制作（WordPressサイト制作）ならお任せください！新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。
WordPress（ワードプレス）でのホームページ制作・ウェブサイト制作
Related page
-
今回は、WordPressサイトのトップページをブログタイプから固定ページに設定するカスタマイズ方法をお伝えします。 WordPressはブログCMSのため、WordPress サイト（WordPressベースのホームページ）の大半のテーマ（テンプレート）は、基本的にブログ投稿がリスト表示されるWebデザインになっています。 WordPressテーマによって
-
WordPressテーマのfooter.phpを編集してフッターをカスタマイズする方法をお伝えします。 WordPressテーマのheader.phpを編集してヘッダーをカスタマイズするのとほとんど共通していますが、今回は、WordPressカスタマイズの基本として、WordPressサイトのフッター部分の編集についてお伝えします。 一般的なWordPres
-
今回は、WordPressサイトの添付(画像)ファイルページをカスタマイズする方法として、WordPressテーマのimage.php、attachment.phpなどを編集して添付ファイルページ・画像添付テンプレートをカスタマイズする場合についてお伝えいたします。 WordPressには投稿と固定ページがありますが、これらのページのサブページとして「添付フ
-
WordPressテーマのauthor.phpを編集してauthor(作成者)ページをカスタマイズする
今回は、WordPressテーマのauthor.phpを編集してauthorページ(作成者ページ）のリストをカスタマイズする方法についてお伝えします。 WordPressには投稿者（ページ作成者）ごとに投稿（記事）を分類する機能がついています。WordPressをインストールした直後はWordPress管理者のみですが、WordPressユーザー設定でWor
-
WordPressをカスタマイズする場合の方法のひとつとして、WordPressサイトのヘッダーウィジェットを使ってヘッダーをカスタマイズする方法についてお伝えします。 WordPressテーマにウィジェット機能がある場合、WordPress管理画面の「外観」→「ウィジェット」から、各エリアのウィジェットを設定、編集することができます。 テーマ内にヘッダーエ
