WordPressでCSSを編集する方法（編集、追加、サイト外観のカスタマイズ）

WordPressのCSSを編集したいけれどどうやって始めればいいか分からないという方。CSSのスタイリングにより、サイト全体、もしくは特定のページの外観を調整することができます。色を追加したり、特定の要素を並べたり、レイアウトをデザインしたり、基本的にはWordPressテーマ内の要素の外観を全て変えることができます。

WordPressの開発環境にもっと馴れ親しみたいという方や、サイトの外観をより細かく調整したいという方はWordPressにCSSを追加する方法（もしくは既存のものを編集する方法）を理解する必要があります。

テーマを編集し、独自のCSSを追加することで、サイト上の全ての要素を最適化することができます。今日はその方法について詳しくご紹介します。

準備はいいですか？早速見ていきましょう。

CSSの編集とは？

CSSはCascading Style Sheets（カスケーティング・スタイル・シート）の略で、 HTMLとともにもっとも一般的なウェブ言語です。CSSはHTML要素をスタイリングするのに使用されているためこの二つの言語は切り離せない関係にあります。HTMLはサイトの外観の基礎を構築するのに使用され、CSSはそれをより細かにスタイリングするのに使用されます。

CSSを利用するとサイトをレスポンシブ対応にしたり、色を追加したり、フォントを変更したり、レイアウトを変更したり、サイトの外観を全体的に微調整したりすることができます。HTMLとJavaScriptと同様にCSSはフロントエンドの、クライアントサイドの言語です。つまり、バックエンドサーバーではなく、ユーザーエンドで実行されます。

WordPressの開発について詳しく学ぶ上で、HTML、CSS、JavaScript、PHPは必ず知っておかなければならない言語です。コアCMS、さらには多くのテーマやプラグインはこれらで構築されています。

ウェブデザイナーや開発者でなくてもCSSを少し使えれば、サイト上の要素を動かしたり、スタイリングしたり、テーマがよりサイトにマッチするようにデザインを調整したりできて便利です。

WordPressとCSS

WordPressの話となると、CSSは少し異なる特性を持ち、（テンプレートファイル、テンプレートタグ、そしてもちろんCSSスタイルシートで構成される）テーマによってコントロールされます。上記の全てがテーマにより生成されるものですが、全て編集することが可能です。

テンプレートファイルにより、サイトが複数のセクションに区切られます（header.phpやarchive.phpなど）。テンプレートタグはデータベースからテンプレートファイルやその他のコンテンツを呼び出すのに使われます。これらのファイルは主にPHPとHTMLで作成されていますが、必要に応じてCSSを追加することもできます。

しかし、今回一番重要なのはスタイルシート（style.css）です。サイトの外観を調整するには、このファイル内でコードを追加、編集する方法を学ばなければなりません。

WordPressテーマをCSSでカスタマイズする方法

CSSを使ってテーマをカスタマイズしてサイトの外観を変更したいのであれば、コードを追加するか、既存のものを編集する必要があります。テーマファイルを一切触らずにCSSを追加する方法はありますが、既存のテーマコードを編集するにはサイトのスタイルシートにアクセスする必要があります。

変更を加える際に知っておかなければならないことがあります。テーマをアップデートするとstyle.css、functions.phpやその他のテーマのテンプレートファイルに加えられたあらゆる変更は失われます。そのため一般的に、子テーマを使用せずにエディタからサイトに直接変更を加えるのは避けるべきです。

スタイルシートはサイトの「指示の一覧」のようなもので、どのようにスタイリングされるか、CSSコードがどのように取り扱われるかを具体的に指定します。ここでほとんどの編集を行うことになりますが、header.phpやfooter.phpなど他のテーマテンプレートファイルを扱う方法もご説明します。

WordPressサイトのスタイルシートにアクセスする方法は2通りあります。WordPressの管理画面からかFTPクライアント経由のいずれかです。今回はその両方の方法をご説明します。

これらの作業を自分で行うのがためらわれるという方は代わりに作業を行ってくれるWordPress開発者への依頼を検討してみましょう。

WordPressのCSSを管理画面から編集

CSSスタイルシートにアクセスする最も簡単で便利な方法はWordPressの管理画面です。FTPプログラムやコードエディタをインストールする必要は一切ありません。あらゆるファイルを、標準搭載のシンタックスハイライトや関数ドキュメンテーションを用いて直接編集することができます。

コアファイルに大きな変更を加える前には必ずWordPressサイトをバックアップしましょう。CSSに慣れていないと間違ってサイトの外観を壊してしまうというのはよくあることで、元に戻す方法が分からないこともあるでしょう。

バックアップと子テーマを作成したら、バックエンドにログインします。メニューから「外観」>「テーマの編集」をクリックしエディタを開きます。

ファイルを直接編集することに対する警告のポップアップが表示されます。慌てずに、「理解しました」をクリックしましょう。大きな変更を加える前に子テーマを使用することとサイトのバックアップをとることを警告しているだけです。これからご紹介する手順に従えば安全に編集ができます。

デフォルトでスタイルシートが開かれるはずですが、そうでない場合、右側のメニューを探しテーマファイルを開きましょう。

style.cssの他にも、functions.php、header.php、single.phpなどのテンプレートファイルがあります。これらは全て、サイト上の特定のページがどのように機能するかを決めるものです。

しかし、これらのファイルを実際に編集する前にPHPの知識をつけておく必要があります。

なお、ここで行うCSSへの変更のほとんどはサイト全体に適用されるということを覚えておきましょう。例えば、H1のフォントを変更した場合、サイト上の全てのページに適用されます。特定のページだけのスタイリングをするには、特別なシンタックスを使用する必要があります。

テーマファイルを直接編集する

テーマエディタにアクセスできず、FTP経由で作業を行いたい場合にはどうすればよいでしょうか？バックエンドのエディタを使用する方が簡単ですが、テーマやプラグインによってはそれが無効化されていることがあります。そんな時にはFTPでサイトに接続する必要があります。

ファイル転送プロトコル（FTP）を利用すると、ウェブサイトのファイルに遠隔でアクセスし編集することができます。最初に行うべきことはFileZillaなどのFTPクライアントのダウンロードです。

次に、利用中のホスティングサービスに問い合わせ、FTP認証情報（通常は、ホスト名、ポート、ユーザー名/パスワード）を確認します。管理画面があれば、ログインすると確認できる場合もあります。

Kinstaのお客様の場合、認証情報はMyKinstaダッシュボードの「サイト」>「SFTP/SSH」から確認できます。

確認したら、FTPクライアントを開き、その情報を入力します。うまくいかない場合は、ホスト名の欄に入力するURLの前に「sftp://」をつけてみましょう。

接続したら、wp-contentフォルダをクリックして開き、テーマフォルダ（Twenty Twenty テーマなど）を開き、style.cssファイルが見つかるまでスクロールします。

ファイルをダブルクリックして（もしくは右クリックして「表示/編集」を選択）開き、編集します。保存してサーバーに再びアップロードするのをお忘れなく。

home.php、single.php、archive.phpなど、他のテンプレートファイルを編集したい場合も同じフォルダ内にあります。

FTP経由もしくは管理画面から行うテーマファイルの編集は必要ないこともあります。実際、数行コードを追加する程度であれば、この方法は避けた方がよいでしょう。

数行のコードを追加するだけであれば、以下をどうぞ。おすすめのWordPressサイトへのCSS追加方法をご紹介します。

WordPressにカスタムCSSを追加する方法

既存のCSSコードを編集するのではなく、独自のCSSを追加したいだけという人は、次の方法のいずれかを使用することを強くお勧めします。WordPressのカスタマイザーか、専用のプラグインです。

これらの方法でCSSコードを追加する方が断然簡単です。間違った場所に新しいCSSを配置してしまったり、後ほど修正を加えたいときにどこに配置したか分からなくなってしまったりする心配がありません。

また、これらの方法で追加されたCSSはテーマがアップデートされても失われません（ただし、テーマを変更した場合は失われることがあります）。

つまり、子テーマを利用する必要がなく、何か問題が起きた場合も追加したCSSを削除するだけでOKです。

ただし、その場合でも、主要なアップデートの際にCSSが失われるという事例が時々報告されているので、サイトのバックアップはとっておきましょう。とは言え、テーマファイルを直接編集するよりはるかに安全です。

単にstyle.cssにコードを付け加えてそれで終わりにすることもできますが、子テーマを作るのが嫌な場合や、テーマの既存のCSSに大きな変更を加えて、全てが消えてしまう事態を避けたい場合は、追加CSSの機能を利用するか、プラグインをインストールした方がいいでしょう。

1. WordPressのカスタマイザーでCSSを編集する

テーマエディタを使用する代わりにこちらの方法をお試しください。WordPressのバックエンドにログインして、「外観」>「カスタマイズ」をクリックし、カスタマイズ画面を開きます。サイトのライブプレビューが表示され、左側には色やメニュー、ウィジェットなどの要素をカスタマイズできるメニューが表示されます。

メニューの一番下には、追加CSSのボックスが表示されます。

これをクリックして開きます。コード入力のためのボックスと、説明の記載された新しい画面が開きます。追加CSSの画面では、テーマエディタと同じように、シンタックスハイライトと、コードが間違っている時に知らせてくれる確認機能が利用できます。

コードを記述すると、エラーが発生していない限り自動で右側のプレビューエリアに表示されます（エラーが起きていても公開することは可能です）。

編集が完了したら、コードを公開するか、有効化する日時を設定するか、後ほど作業を再開するために下書きに保存するかを選べます。他の人と共有するためのプレビューリンクを取得することも可能です。

このように、追加CSSの画面はテーマエディタよりもあらゆる面ではるかに便利で、コアファイルを編集するよりもずっとコードを追加するのに適しています。

ここで記述したCSSコードはデフォルトのテーマのスタイリングに上書きされ、テーマがアップデートされても失われません。ライブプレビューで確認できない場合は、CSSコードで正しいセレクタを使用しているかどうか再度確認しましょう。

テーマエディタと同様にCSSはデフォルトではサイト全体に適用されますが、特定のページにターゲットを絞ったコードを記述することもできます。

デメリットの一つは、テーマを変えた場合記述したコードは全て消えてしまうという点です。新しいテーマに変更する前にCSSをバックアップしておくのは忘れないようにしましょう。せっかく時間をかけた作業が台無しになってしまうかもしれません。

この方法がうまくいかないという場合や、どんなテーマでも利用でき、より簡単に特定のページだけに適用できるようにしたい場合は、プラグインの利用を検討してみましょう。

2. プラグインを使用してWordPressにカスタムCSSを追加する

WordPressにCSSを追加するのにプラグインを使用するのが好ましい理由はいくつかあります。機能自体は追加CSSメニューと似ていますが、プラグインの場合、テーマを切り替え/アップデートした場合も変更が失われないことが多いです。

また、優れたUIやオートコンプリート機能などの追加機能が便利だと感じる方もいるでしょう。プラグインの中にはCSSを自分で記述するのではなく、ドロップダウンメニューから選んで構築できるものまであります。

Simple Custom CSS

Simple Custom CSSはその使いやすさ、ミニマルなインターフェース、軽量なバックエンドから、最も人気なCSS編集プラグインです。簡単に言うと、たくさんの機能が搭載された、非常に軽量なWordPressプラグインです。

セットアップはあっという間に完了し、パフォーマンスへのネガティブな影響は一切ありません。どのテーマにも利用でき、シンタックスハイライトとエラーチェックの機能も利用できます。

Simple Custom CSS and JS

Simple Custom CSS and JSも便利な代替ツールです。ヘッダー、フッター、フロントエンド、さらには管理バックエンドにもターゲットを絞ることができます。

SiteOrigin CSS

SiteOrigin CSS WordPress plugin

SiteOrigin CSSもまた一般的なCSSエディタが利用できるプラグインです。CSSエディタとビジュアルエディタを自由に切り替えることができます。

WP Add Custom CSS

特定のページにCSSを追加するのに苦戦しているという方は、WP Add Custom CSS を利用すると、編集画面にカスタムCSSボックスが追加されます。さらにサイト全体に適用されるスタイリングも可能です。

CSS Hero

ビジュアルCSSエディタを検討したい方もいるでしょう。複雑なコーディングは不要で、簡単に入力できるフィールドと全てのプログラミング作業を代わりに行ってくれるドロップダウンメニューが利用できます。

CSS Heroは非常に便利な機能（アニメーションの追加、端末別の編集、ノンディストラクティブ編集などなど）が利用できる有料のビジュアルエディタプラグインです。

CSSを学べるサイト

CSSについて学ぶ準備はできていますか？以下にご紹介する初心者向けのサイトを使えば、基礎が身につき、自分でCSSコードを記述するのに必要なシンタックスが学べます。

少し気後れしてしまうかもしれませんが、高度なことをやるのでない限り、CSSはそれほど難しくありません。背景の変更や、フォントのスタイルの設定など、シンプルな調整はとても簡単で、インターネット上でたくさんの実例を参照することができます。

また、インターネット上の大半のプログラミングの解説やコースは無料で閲覧できます。無料、もしくはお手頃な価格でたくさんの情報を得られます。

初心者向けのおすすめのCSS解説サイトをいくつかご紹介します。

• W3Schools CSS Tutorial: このサイトには詳細な説明、例、リファレンスなど、非常に多くの情報が掲載されています。W3Schoolsの解説はできる限りシンプルに、分かりやすく作られているので、完全な初心者であってもとっつきやすいでしょう。
• Codeacademy Learn CSS: ６つの無料の実践的なレッスンを通して、CSSの基礎が学べます。単純な動画による解説ではなく、実際のコードを記述する形式のインタラクティブなレッスンです。プロ版では、クイズや自由形式のプロジェクトも盛り込まれています。
• Learn CSS in One Hour:新たなプログラミング言語を学びたいけれど時間がない—そんな方は大勢いるはずです。こちらの20のパートで構成された無料講座では、たったの1時間確保できればCSSを学ぶことができます。CSSをマスターすることはできなくても、基本はつかむことができるでしょう。
• Introduction to Basic HTML & CSS for WordPress Users: WordPressに特化したサイトをお探しですか？こちらの講座は、HTMLやCSSにいつも苦戦するという方に最適なサイトです。有料ですが、52の講義と5時間分の動画で学ぶことができます。

まとめ

WordPressユーザーが初めてCSSをいじる時は少し戸惑ってしまうかもしれません。しかし一度テーマファイルを編集する方法やスタイリングを追加する場所が分かってしまえばもう大丈夫。

テーマファイルをバックエンドかFTP経由で編集することでサイトの外観を変えることができますが、既存のコードを編集する必要がある場合を除いては一般的には避けるべきです。

独自のCSSを追加するだけで良い場合は、「外観」>「カスタマイズ」から追加CSSのメニューを利用するか、より強力なツールが必要であればプラグインを使用しましょう。

スタイルシート上で編集した内容は子テーマを使用していない限り、テーマをアップデートすると失われてしまいます。一方、追加CSSを利用する場合、その心配はありません。追加CSSでの編集ではテーマをアップデートしても変更内容は失われませんが、テーマを変更しても、編集内容が保持できるのはプラグインを使用した場合のみなのでご注意ください。

どの方法を選択する場合でも、必ず、スタイルシートと追加したカスタムコードを含め、サイトの定期的なバックアップを取るのを忘れないようにしましょう。今回の記事でご紹介した情報を、是非ともCSSの基礎知識の向上にお役立てください。

それでは、あなたなりのスタイリングを楽しみましょう！