シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

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

WordPressでカスタムCSSを追加する方法(初心者向け) 

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

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を使用したことがない場合、それはドラッグアンドドロップでWordPressのビルダーは、あなたが開発者でなくても、あなたのサイトを超簡単にカスタマイズすることができます。

コードに触れることなくテーマやランディングページを作成できるので、私はいつもSeedProdを使っています。またCSSを少し追加したいときにも、SeedProdを使えば簡単にできます。

ステップに入る前に、あなたのサイトにSeedProdをセットアップしておくと便利です。まだ使ったことがない方は、初心者向けのチュートリアルをいくつかご覧ください:

SeedProdでランディングページやテーマを作成したら、独自のカスタムCSSを追加する準備ができました。まずは1つのランディングページでそれを行う方法から説明しましょう。

SeedProdでランディングページにCSSを追加する方法

開始するには、WordPressのダッシュボードを開き、SeedProd " Landing Pagesに進みます。

編集したいランディングページを見つけ、その横にある「編集」リンクをクリックします。

SeedProdでWordPressのランディングページを編集する

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

SeedProdでグローバルページの設定を開く

左側のサイドバーから、カスタムCSSタブをクリックします。

次にCSSを貼り付けます。例えば、段落テキストをスタイル設定するものがここにあります:

p {
  font-style: italic;
  color: #444;
}
SeedProdを使用してWordPressのランディングページにカスタムCSSを追加する方法

右上の保存ボタンをクリックします。

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

WordPressで段落テキストをイタリック体に変更するカスタムCSSの例

SeedProdのテーマ・ビルダーでグローバルCSSを追加する方法

SeedProdのテーマビルダーを使用してサイト全体をデザインしている場合、すべてのページで機能するカスタムCSSを適用できます。

WordPressのダッシュボードを開き、SeedProd " Theme Builderにアクセスしてください。

Global CSSというテンプレートを見つけ、Edit Designをクリックします。

SeedProdでグローバルCSSテンプレートを編集する

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

左側のサイドバーから、カスタムCSSタブをクリックします。

Edit Custom CSSボタンをクリックします。新しいウィンドウでWordPressカスタマイザーが開きます。

SeedProdグローバルCSS設定のカスタムCSS編集ボタン

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

SeedProdでWordPressテーマにカスタムCSSを追加する方法

例えば、こうだ:

p {
  font-style: italic;
}

これにより、サイト内のすべての段落テキストがイタリック体で表示されます。

Publishをクリックして変更を保存し、サイト全体に適用します。

これでページを更新して、アップデートをライブで見ることができる。

SeedProdのカスタムCSSを使用してWordPressテーマの段落テキストを斜体にする例

この方法は、フォントの調整、スペーシング、色の調整など、グローバルなスタイル変更を行うのに便利です。

2.ページビルダーを使わずにWordPressにカスタムCSSを追加する

SeedProdのようなページビルダーを使用していない場合でも、WordPressでカスタムCSSを直接追加することができます。その手順は、使用しているテーマの種類(クラシックテーマか ブロックテーマか)によって異なります。

クラシック・テーマは旧式のカスタマイザー・ツールを使用し、ウィジェットやページ・テンプレートに依存することが多い。一方、ブロックテーマは新しいサイトエディタを使い、サイト全体をブロックでデザインできます。

まずはクラシックなテーマから。

WordPressカスタマイザーを使う(クラシックテーマ)

WordPressのダッシュボードで、外観 " カスタマイズに進みます。

クラシックWordPressテーマの外観をカスタマイズする。

カスタマイザーメニューから、追加CSSをクリックします。

カスタムコードを貼り付けるテキストボックスが表示されます。例えば

p {
  color: #0073aa;
}

これは、あなたのサイトのすべての段落テキストを青の色合いに変更します。

入力すると、右側に変更のライブプレビューが表示されます。

テーマカスタマイザーを使ってWordPressにカスタムCSSを追加する方法

見た目に満足したら、Publishボタンをクリックして変更を保存します。

この方法は、カスタマイザーをサポートしている古いテーマでうまく機能し、WordPressプラグインを必要としない。

サイトエディターを使う(ブロックテーマ)

あなたのWordPressサイトがブロックテーマを使用している場合、カスタマイザーの代わりに完全なサイトエディタを使ってデザインを管理します。

まず、WordPressのダッシュボードの「外観」 " 「エディター」にアクセスします。

WordPressのフルサイトエディタを開く

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

フルサイトエディタスタイルを開く

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

WordPressのフルサイトエディタでスタイルを編集する

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

WordPressのフルサイトエディタで追加CSSを開く

カスタムコードをボックスに貼り付けます。例えば

p {
  color: #0073aa;
}

これにより、サイト全体の段落テキストの色が変更されます。

フルサイトエディタを使ってWordPressにカスタムCSSを追加する方法

右上のSaveをクリックして変更を適用します。

⚠️ Additional CSSパネルが表示されない場合は、ブロックテーマが対応していない可能性があります。その場合は、WPCodeのようなプラグインを使用するか、SeedProdのようなビルダーに切り替えることができます。

3.カスタムCSSプラグインを使う

もしあなたのテーマがカスタマイザーやサイトエディターをサポートしていない場合、またはCSSを一箇所で管理するクリーンな方法が欲しい場合は、WPCodeのようなプラグインを使用することをお勧めします。

WPCode WordPressコードスニペットプラグイン

WPCodeは、テーマファイルを編集することなく、CSS、HTML、JavaScript、またはPHPのようなカスタムコードスニペットを安全に追加できる軽量なWordPressプラグインです。

WPCodeをインストールして有効化したら、WordPressダッシュボードのCode Snippets " + Add Snippetにアクセスしてください。

WPCodeに新しいコードスニペットを追加する

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

WPCodeにカスタムコードスニペットを追加する

コードの種類]で、ドロップダウンから[CSSスニペット]を選択します。

コードボックスにCSSを貼り付けます。例えば

p {
  color: #0073aa;
}

下にスクロールし、サイト全体にCSSを適用するには、[自動挿入]を選択します。

WPCodeプラグインを使ってWordPressにカスタムCSSを追加する方法

次にスニペットを保存をクリックし、上部のスイッチをアクティブに切り替える。

これで完了です!いつでもこのスニペットに戻って変更することができます。

この方法は、クラシックテーマを使用している場合にのみ有効です。ブロックテーマには、WordPressダッシュボードのテーマファイルエディタへのアクセスが含まれていません。

クラシックなテーマを使っていて、コードの編集に慣れているなら、カスタムCSSをテーマの style.css ファイルを作成する。でも、自分が何をやっているのか分かっている人以外は、これはお勧めしない。

テーマファイルを直接編集すると、更新時に変更が失われる可能性があります。また、ライブプレビューが表示されないため、小さなタイプミスでもレイアウトが崩れてしまう可能性があります。

とはいえ、もしあなたが子テーマを使っていたり、何か問題が起きたときにサイトを復元する方法を知っているのであれば、その方法を紹介しよう。

WordPressダッシュボードの外観 " テーマファイルエディタに移動します。

クラシックWordPressテーマファイルエディタを開く

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

テーマエディタでWordPressのstyle.cssにカスタムCSSを追加する方法

ファイルの一番下までスクロールし、CSSを貼り付けます。例えば

p {
  color: #0073aa;
}

ファイルを更新]をクリックして変更を保存します。

style.cssファイルを変更してCSSをカスタマイズした例。

⚠️ 子テーマを使用しているか、サイトを安全に復元する方法を知っている場合のみ、この操作を行ってください。ほとんどのユーザーにとっては、SeedProdやWPCodeのようなツールの方がはるかに安全です。

ボーナス:カスタムCSSをページまたはブロックに適用する

CSSをサイト全体に適用するのではなく、1つのページや1つのブロックだけに適用したい場合もあります。その場合は、ページIDや カスタムCSSクラスを使用します。

WordPressでページIDを使う

WordPressの各ページには固有のIDがあり、それを使ってそのページだけのスタイルをターゲットにすることができる。

ページIDを見つけるには、ブラウザでページにアクセスし、どこかを右クリックして「検査」を選択する。

ChromeウェブブラウザでWordPressのページ要素を検査する

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

inspect elementツールでWordPressのページIDを見つける

それをCSSで次のように使うことができる:

.page-id-37 p {
  color: green;
}
WordPressで特定のページIDにカスタムCSSを追加する

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

WordPressで特定のページIDをターゲットにしたカスタムCSSの例

SeedProdのブロック設定の使用

SeedProdを使用している場合、カスタムクラス名を追加することで特定のブロックをターゲットにすることができます。

SeedProdビルダーでページを開き、スタイルを設定したいブロックをクリックします。私の場合、特定の見出しブロックにスタイルを設定したい。

左側のパネルで、Advancedタブに行き、Attributesオプションを探し、それを展開する。

SeedProdブロックのブロック属性

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

SeedProdの見出しブロックにカスタムクラスを追加する

次に、グローバルまたはページレベルのカスタムCSSボックスに、次のような内容を追加します:

.my-special-style {
  background-color: #fff7e6;
  border-radius: 10px;
}
カスタムCSSクラスを使って見出しブロックのCSSを変更する

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

SeedProdのカスタムCSSクラスを使用してカスタマイズされたeadingブロックの例

WordPressのカスタムCSSの追加に関するFAQ

特定のページにCSSを追加するには?
一意のページIDを使用して、特定のページをターゲットにすることができます。例えば

.page-id-123 p {
color: red; }

あるいは シードプロ またはWPCodeでカスタムCSSクラスを作成し、ブロックやセクションに手動で適用することができます。
HTMLとCSSを一緒に使うことはできますか?
はい!WordPressのブロックやウィジェットの中にHTMLを追加し、カスタムCSSを使ってスタイルを設定することができます。CSSが正しい要素やクラスをターゲットにしていることを確認してください。
開発者なしでCSSを追加しても安全ですか?
はい、SeedProdやWPCode、WordPressのビルトインオプションのような初心者に優しいツールを使っている限りは可能です。子テーマを使用しているか、間違いを修正する方法を知っている場合を除き、テーマファイルを直接編集することは避けてください。
WordPressにCSSを追加するとモバイル端末に影響する?
メディアクエリを使用しない限り、ほとんどのCSSはすべての画面サイズに適用されます。SeedProdを使用している場合は、ビルダーで直接モバイル用のCSSをプレビューして調整することができます。

WordPressサイトのカスタマイズ

これまで見てきたように、WordPressでカスタムCSSを追加するには、開発者でなくても簡単にできる方法がいくつかある。

個々のブロックをスタイリングしたり、テーマ全体を微調整したり、サイトの見た目を思い通りにするための小さな変更を加えることができます。SeedProd、WPCode、WordPressの内蔵ツールのどれを使うにしても、重要なのは、テーマのデフォルトにとらわれる必要がないということです。

テーマファイルを編集することなく、より多くのコントロールが必要な場合、SeedProdは、コード不要でページを構築し、スタイルを設定する最も簡単な方法です。

WordPressサイトのカスタマイズを続けたいですか?次にお勧めのガイドをご紹介します:

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。