WordPressでサイトの色を変えたり、何かを隠そうとしたときに、そのオプションがないことに気づいたことはないだろうか。私も経験がある。単純なフォントの微調整のために、テーマ設定に長い時間をかけすぎてしまったことを覚えている。
その時、カスタムCSSのことを知った。これは、テーマファイルを編集したり開発者を雇ったりすることなく、サイトの小さな視覚的な問題を修正する迅速な方法です。
初めての方でもご心配なく。コードの書き方を知らなくても、ウェブサイトがどのように機能するのかを理解する必要はありません。
このガイドでは、WordPressにカスタムCSSを追加する初心者向けの方法を紹介します。また、私のお気に入りのツールであるSeedProdも紹介します。
WordPressでカスタムCSSを追加する方法:
カスタムCSSとは?
CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略です。WordPressサイトの見た目をコントロールするシンプルな言語です。
例えば、このCSSは見出しの色を赤に変える:
h1 {
color: red;
}
そして、これはページ上の要素を隠すものだ:
.hidden {
display: none;
}
ゼロからこのようなコードを書く必要はない。たいていの場合、コピーして適切な場所に貼り付けるだけだ。
重要なのは、カスタムCSSをどこに置くかを知っていることであり、それこそが次に紹介することなのだ。
なぜWordPressにカスタムCSSを追加するのか?
ボタンの色を変えたり、見出しを中央に配置したり、余分なスペースを削除したいのに、テーマがその方法を教えてくれないことがある。
そこでカスタムCSSの出番です。カスタムCSSを使用することで、サイトの見た目や使い勝手を向上させる細かなデザインをコントロールすることができます。
CSSを使えば、WordPressテーマのデフォルト設定に縛られることはありません。テーマを切り替えたり、WordPressプラグインを追加インストールすることなく、レイアウト、スタイル、スペーシングを微調整できます。
覚えておいてください: CSSはデザインの微調整には役立ちますが、乱雑なレイアウトや貧弱なナビゲーションのような、カスタムCSSでは修正できない大きな視覚的ミスを修正することはできません。
では、実際にWordPressでカスタムCSSを追加するにはどうすればいいのだろうか?
いくつかの方法があるが、まずは私が最もよく使う方法と、手間をかけずに完全なコントロールを望む場合にお勧めの方法を紹介しよう。
1.SeedProdでカスタムCSSを追加する (お気に入りの方法)

SeedProdを使用したことがない場合、それはドラッグアンドドロップでWordPressのビルダーは、あなたが開発者でなくても、あなたのサイトを超簡単にカスタマイズすることができます。
コードに触れることなくテーマやランディングページを作成できるので、私はいつもSeedProdを使っています。また、CSSを少し追加したいときにも、SeedProdを使えば簡単にできます。
ステップに入る前に、あなたのサイトにSeedProdをセットアップしておくと便利です。まだ使ったことがない方は、初心者向けのチュートリアルをいくつかご覧ください:
SeedProdでランディングページやテーマを作成したら、独自のカスタムCSSを追加する準備ができました。まずは1つのランディングページでそれを行う方法から説明しましょう。
SeedProdでランディングページにCSSを追加する方法
開始するには、WordPressのダッシュボードを開き、SeedProd " Landing Pagesに進みます。
編集したいランディングページを見つけ、その横にある「編集」リンクをクリックします。

SeedProdページビルダーが開きます。左下の歯車アイコンをクリックし、グローバル設定を開きます。

左側のサイドバーから、カスタムCSSタブをクリックします。
次にCSSを貼り付けます。例えば、段落テキストをスタイル設定するものがここにあります:
p {
font-style: italic;
color: #444;
}

右上の保存ボタンをクリックします。
その後、ページをプレビューして、保存した変更をウェブサイト上で確認することができます。

SeedProdのテーマ・ビルダーでグローバルCSSを追加する方法
SeedProdのテーマビルダーを使用してサイト全体をデザインしている場合、すべてのページで機能するカスタムCSSを適用できます。
WordPressのダッシュボードを開き、SeedProd " Theme Builderにアクセスしてください。
Global CSSというテンプレートを見つけ、Edit Designをクリックします。

ビルダー内で左下の歯車アイコンをクリックし、グローバル設定を開きます。
左側のサイドバーから、カスタムCSSタブをクリックします。
Edit Custom CSSボタンをクリックします。新しいウィンドウでWordPressカスタマイザーが開きます。

カスタマイザーでAdditional CSSをクリックし、コードを貼り付けます。

例えば、こうだ:
p {
font-style: italic;
}
これにより、サイト内のすべての段落テキストがイタリック体で表示されます。
Publishをクリックして変更を保存し、サイト全体に適用します。
これでページを更新して、アップデートをライブで見ることができる。

この方法は、フォントの調整、スペーシング、色の調整など、グローバルなスタイル変更を行うのに便利です。
2.ページビルダーを使わずにWordPressにカスタムCSSを追加する
SeedProdのようなページビルダーを使用していない場合でも、WordPressでカスタムCSSを直接追加することができます。その手順は、使用しているテーマの種類(クラシックテーマか ブロックテーマか)によって異なります。
クラシック・テーマは旧式のカスタマイザー・ツールを使用し、ウィジェットやページ・テンプレートに依存することが多い。一方、ブロックテーマは新しいサイトエディタを使い、サイト全体をブロックでデザインできます。
まずはクラシックなテーマから。
WordPressカスタマイザーを使う(クラシックテーマ)
WordPressのダッシュボードで、外観 " カスタマイズに進みます。

カスタマイザーメニューから、追加CSSをクリックします。
カスタムコードを貼り付けるテキストボックスが表示されます。例えば
p {
color: #0073aa;
}
これは、あなたのサイトのすべての段落テキストを青の色合いに変更します。
入力すると、右側に変更のライブプレビューが表示されます。

見た目に満足したら、Publishボタンをクリックして変更を保存します。
この方法は、カスタマイザーをサポートしている古いテーマでうまく機能し、WordPressプラグインを必要としない。
サイトエディターを使う(ブロックテーマ)
あなたのWordPressサイトがブロックテーマを使用している場合、カスタマイザーの代わりに完全なサイトエディタを使ってデザインを管理します。
まず、WordPressのダッシュボードの「外観」 " 「エディター」にアクセスします。

左側のサイドバーで「スタイル」アイコンをクリックします。半月かペイントパレットのように見えます。

次に、スタイルの編集と書かれた小さな鉛筆のアイコンをクリックします。

WordPressエディタが表示されます。画面右上の三点メニュー(⋮)をクリックし、ドロップダウンからAdditional CSSを選択します。

カスタムコードをボックスに貼り付けます。例えば
p {
color: #0073aa;
}
これにより、サイト全体の段落テキストの色が変更されます。

右上のSaveをクリックして変更を適用します。
⚠️ Additional CSSパネルが表示されない場合は、ブロックテーマが対応していない可能性があります。その場合は、WPCodeのようなプラグインを使用するか、SeedProdのようなビルダーに切り替えることができます。
3.カスタムCSSプラグインを使う
もしあなたのテーマがカスタマイザーやサイトエディターをサポートしていない場合、またはCSSを一箇所で管理するクリーンな方法が欲しい場合は、WPCodeのようなプラグインを使用することをお勧めします。

WPCodeは、テーマファイルを編集することなく、CSS、HTML、JavaScript、またはPHPのようなカスタムコードスニペットを安全に追加できる軽量なWordPressプラグインです。
WPCodeをインストールして有効化したら、WordPressダッシュボードのCode Snippets " + Add Snippetにアクセスしてください。

Add Your Custom Code (New Snippet)と書かれたボックスをクリックし、Custom CSS Stylesのようにスニペットに名前を付けます。

コードの種類]で、ドロップダウンから[CSSスニペット]を選択します。
コードボックスにCSSを貼り付けます。例えば
p {
color: #0073aa;
}
下にスクロールし、サイト全体にCSSを適用するには、[自動挿入]を選択します。

次にスニペットを保存をクリックし、上部のスイッチをアクティブに切り替える。
これで完了です!いつでもこのスニペットに戻って変更することができます。
4.テーマファイルを編集する(お勧めしません)
この方法は、クラシックテーマを使用している場合にのみ有効です。ブロックテーマには、WordPressダッシュボードのテーマファイルエディタへのアクセスが含まれていません。
クラシックなテーマを使っていて、コードの編集に慣れているなら、カスタムCSSをテーマの style.css
ファイルを作成する。でも、自分が何をやっているのか分かっている人以外は、これはお勧めしない。
テーマファイルを直接編集すると、更新時に変更が失われる可能性があります。また、ライブプレビューが表示されないため、小さなタイプミスでもレイアウトが崩れてしまう可能性があります。
とはいえ、もしあなたが子テーマを使っていたり、何か問題が起きたときにサイトを復元する方法を知っているのであれば、その方法を紹介しよう。
WordPressダッシュボードの外観 " テーマファイルエディタに移動します。

右側のファイルリストからstyle.cssをクリックする。

ファイルの一番下までスクロールし、CSSを貼り付けます。例えば
p {
color: #0073aa;
}
ファイルを更新]をクリックして変更を保存します。

⚠️ 子テーマを使用しているか、サイトを安全に復元する方法を知っている場合のみ、この操作を行ってください。ほとんどのユーザーにとっては、SeedProdやWPCodeのようなツールの方がはるかに安全です。
ボーナス:カスタムCSSをページまたはブロックに適用する
CSSをサイト全体に適用するのではなく、1つのページや1つのブロックだけに適用したい場合もあります。その場合は、ページIDや カスタムCSSクラスを使用します。
WordPressでページIDを使う
WordPressの各ページには固有のIDがあり、それを使ってそのページだけのスタイルをターゲットにすることができる。
ページIDを見つけるには、ブラウザでページにアクセスし、どこかを右クリックして「検査」を選択する。

コードの中で <body>
タグのようなクラスが含まれます。このタグには page-id-37
.

それをCSSで次のように使うことができる:
.page-id-37 p {
color: green;
}

これは特定のページの段落テキスト色のみを変更します。

SeedProdのブロック設定の使用
SeedProdを使用している場合、カスタムクラス名を追加することで特定のブロックをターゲットにすることができます。
SeedProdビルダーでページを開き、スタイルを設定したいブロックをクリックします。私の場合、特定の見出しブロックにスタイルを設定したい。
左側のパネルで、Advancedタブに行き、Attributesオプションを探し、それを展開する。

というラベルの付いたフィールドを見つける。 CSSクラス のようなクラス名を追加する。 my-special-style
.

次に、グローバルまたはページレベルのカスタムCSSボックスに、次のような内容を追加します:
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}

ページを保存してプレビューすると、サイトの他の部分に影響を与えることなく、特定のブロックに変更が反映されます。

WordPressのカスタムCSSの追加に関するFAQ
.page-id-123 p {
color: red; }
あるいは シードプロ またはWPCodeでカスタムCSSクラスを作成し、ブロックやセクションに手動で適用することができます。
WordPressサイトのカスタマイズ
これまで見てきたように、WordPressでカスタムCSSを追加するには、開発者でなくても簡単にできる方法がいくつかある。
個々のブロックをスタイリングしたり、テーマ全体を微調整したり、サイトの見た目を思い通りにするための小さな変更を加えることができます。SeedProd、WPCode、WordPressの内蔵ツールのどれを使うにしても、重要なのは、テーマのデフォルトにとらわれる必要がないということです。
テーマファイルを編集することなく、より多くのコントロールが必要な場合、SeedProdは、コード不要でページを構築し、スタイルを設定する最も簡単な方法です。
WordPressサイトのカスタマイズを続けたいですか?次にお勧めのガイドをご紹介します: