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を使用すると、デフォルトのWordPressテーマ設定に縛られることはありません。テーマを変更したり、追加のWordPressプラグインをインストールしたりすることなく、レイアウト、スタイル、スペーシングを微調整できます。
覚えておいてください：CSSはデザインの微調整に役立ちますが、レイアウトが乱雑になったり、ナビゲーションが悪くなったりするような、より大きなカスタムCSSでは修正できない視覚的な間違いを修正するわけではありません。
では、実際にWordPressにカスタムCSSを追加するにはどうすればよいでしょうか？
いくつかの方法がありますが、まず私が最もよく使う方法、そして手間をかけずに完全な制御を得たい場合に推奨する方法から始めます。
1. SeedProdでカスタムCSSを追加する（私のお気に入りの方法）
もしあなたがSeedProdを使ったことがないなら、それはドラッグ＆ドロップのWordPressビルダーであり、開発者でなくてもサイトのカスタマイズを非常に簡単にします。
私はコードに触れることなく、完全なテーマやランディングページを構築できるため、常にそれを使用しています。そして、CSSを少し追加したいときには、SeedProdが簡単な場所を提供してくれます。
手順に入る前に、サイトにSeedProdがセットアップされていると役立ちます。まだ使用していない場合は、開始に役立つ初心者向けのチュートリアルをいくつか紹介します。
SeedProdでランディングページまたはテーマを構築したら、独自のカスタムCSSを追加する準備が整います。まずは、単一のランディングページにそれを行う方法から始めましょう。
SeedProdでランディングページにCSSを追加する方法
開始するには、WordPressダッシュボードを開き、SeedProd » Landing Pagesに移動します。
編集したいランディングページを見つけて、その横にあるEditリンクをクリックします。
これによりSeedProdページビルダーが開きます。左下隅にある歯車アイコンをクリックして、Global Settingsを開きます。
左側のサイドバーから、Custom CSSタブをクリックします。
次にCSSを貼り付けます。たとえば、段落テキストをスタイル設定するコードは次のとおりです。
p {
font-style: italic;
color: #444;
}
右上隅にあるSaveボタンをクリックします。
その後、ページをプレビューして、保存された変更がWebサイトにライブで表示されていることを確認できます。
SeedProdのテーマビルダーでグローバルCSSを追加する方法
SeedProdのテーマビルダーを使用してサイト全体をデザインしている場合、すべてのページに適用されるカスタムCSSを適用できます。
開始するには、WordPressダッシュボードを開き、SeedProd » Theme Builderに移動します。
Global CSSという名前のテンプレートを見つけて、Edit Designをクリックします。
ビルダー内で、左下隅にある歯車アイコンをクリックして、Global Settingsを開きます。
左側のサイドバーから、Custom CSSタブをクリックします。
Edit Custom CSSボタンをクリックします。これにより、新しいウィンドウでWordPressカスタムizerが開きます。
カスタムizerで、Additional CSSをクリックしてから、コードを貼り付けます。
例えば：
p {
font-style: italic;
}これにより、サイト全体のすべての段落テキストがイタリック体で表示されます。
右上隅にあるPublishをクリックして変更を保存し、サイト全体に適用します。
これでページを更新して、更新がライブで表示されていることを確認できます。
この方法は、フォント調整、スペーシング、色の変更など、グローバルなスタイル変更を行うのに役立ちます。
2. ページビルダーなしでWordPressにカスタムCSSを追加する
SeedProdのようなページビルダーを使用していない場合でも、WordPressに直接カスタムCSSを追加できます。手順は、使用しているテーマの種類（クラシックテーマまたはブロックテーマ）によって異なります。
Classic themesは古いカスタムizerツールを使用し、多くの場合ウィジェットとページテンプレートに依存します。一方、Block themesは新しいSite Editorを使用し、ブロックを使用してサイト全体をデザインできます。
まずはクラシックテーマから始めましょう。
WordPressカスタムizer（クラシックテーマ）を使用する
WordPressダッシュボードで、Appearance » Customizeに移動します。
カスタムizerメニューから、Additional CSSをクリックします。
テキストボックスが表示され、カスタムコードを貼り付けることができます。たとえば、次のようになります。
p {
color: #0073aa;
}これにより、サイト上のすべての段落テキストが青色に変わります。
入力すると、右側に変更のライブプレビューが表示されます。
見た目が気に入ったら、公開ボタンをクリックして変更を保存してください。
この方法は、カスタマイザーをサポートする古いテーマでうまく機能し、WordPressプラグインは必要ありません。
サイトエディター（ブロックテーマ）を使用する
WordPressサイトでブロックテーマを使用している場合、カスタマイザーではなく、フルサイトエディターを使用してデザインを管理します。
開始するには、WordPressダッシュボードで外観 » エディターに移動します。
左側のサイドバーで、スタイルアイコンをクリックします。これは半月または絵の具のパレットのように見えます。
次に、スタイルを編集というラベルの付いた小さな鉛筆アイコンをクリックします。
これでWordPressエディターが表示されます。画面の右上隅にある3点リーダーメニュー（⋮）をクリックし、ドロップダウンから追加CSSを選択します。
カスタムコードをボックスに貼り付けます。例：
p {
color: #0073aa;
}これにより、サイト全体の段落テキストの色が変更されます。
変更を適用するには、右上隅にある保存をクリックします。
⚠️ 追加CSSパネルが表示されない場合、ブロックテーマがそれをサポートしていない可能性があります。その場合は、WPCodeのようなプラグインを使用するか、SeedProdのようなビルダーに切り替えることができます。
3.カスタムCSSプラグインを使用する
テーマがカスタマイザーまたはサイトエディターをサポートしていない場合、または単にCSSを1か所でクリーンに管理したい場合は、WPCodeのようなプラグインの使用をお勧めします。
WPCodeは軽量なWordPressプラグインで、テーマファイルを編集することなく、CSS、HTML、JavaScript、PHPなどのカスタムコードスニペットを安全に追加できます。
WPCodeをインストールして有効化したら、WordPressダッシュボードでコードスニペット » + スニペットを追加に移動します。
カスタムコードを追加（新規スニペット）というボックスをクリックし、スニペットにカスタムCSSスタイルのような名前を付けます。
コードタイプの下で、ドロップダウンからCSSスニペットを選択します。
次に、CSSをコードボックスに貼り付けます。例：
p {
color: #0073aa;
}下にスクロールして自動挿入を選択し、CSSをサイト全体に適用します。
次に、スニペットを保存をクリックし、上部にあるスイッチをアクティブに切り替えます。
これで完了です！カスタムスタイルがサイト全体に適用され、いつでもこのスニペットに戻って変更を加えることができます。
4.テーマファイルを編集する（非推奨）
この方法は、クラシックテーマを使用している場合にのみ機能します。ブロックテーマには、WordPressダッシュボードのテーマファイルエディターへのアクセスは含まれていません。
クラシックテーマを使用しており、コードの編集に慣れている場合は、カスタムCSSをテーマのstyle.cssファイルに直接追加できます。ただし、これを行う場合は、何をしているか理解している場合にのみお勧めします。
テーマファイルを直接編集すると、アップデート時に変更が失われる可能性があります。ライブプレビューも表示されず、わずかなタイポでもレイアウトが壊れる可能性があります。
とはいえ、子テーマを使用している場合や、何か問題が発生した場合にサイトを復元する方法を知っている場合は、次の手順で行います。
WordPressダッシュボードで外観 » テーマファイルエディターに移動します。
右側のファイルリストからstyle.cssをクリックします。
ファイルの末尾までスクロールし、CSSを貼り付けます。例：
p {
color: #0073aa;
}変更を保存するにはファイル更新をクリックします。
⚠️ 子テーマを使用している場合、またはサイトを安全に復元する方法を知っている場合にのみ実行してください。ほとんどのユーザーにとって、SeedProdやWPCodeのようなツールの方がはるかに安全なオプションです。
ボーナス：ページまたはブロックにカスタムCSSをターゲット設定する
CSSがサイト全体に影響しないようにしたい場合があります。特定のページまたは単一のブロックにのみ適用したい場合があります。これは、ページIDまたはカスタムCSSクラスを使用することで実現できます。
WordPressでページIDを使用する
WordPressの各ページには一意のIDがあり、それを使用してそのページのみのスタイルをターゲット設定できます。
ページIDを見つけるには、ブラウザでページにアクセスし、どこか右クリックして検証を選択します。
コード内で<body>タグを探します。page-id-37のようなクラスが含まれています。
次に、CSSで次のように使用できます。
.page-id-37 p {
color: green;
}
これにより、その特定のページでのみ段落テキストの色が変更されます。
SeedProdのブロック設定を使用する
SeedProdを使用している場合は、カスタムクラス名を追加することで特定のブロックをターゲット設定できます。
SeedProdビルダーでページを開き、スタイルを設定したいブロックをクリックします。私の場合は、特定のヘッダーブロックをスタイル設定したいです。
左側のパネルで詳細設定タブに移動し、属性オプションを探して展開します。
CSSクラスというラベルのフィールドを見つけて、my-special-styleのようなクラス名を追加します。
次に、グローバルまたはページレベルのカスタムCSSボックスに次のようなものを追加します。
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}
ページを保存してプレビューすると、サイトの他の部分に影響を与えることなく、その特定のブロックに変更が表示されます。
WordPressでカスタムCSSを追加することに関するFAQ
.page-id-123 p {color: red; }または、SeedProdまたはWPCodeを使用している場合は、カスタムCSSクラスを作成して、ブロックまたはセクションに手動で適用できます。
WordPressサイトのカスタマイズを始めましょうか？
ご覧のとおり、開発者でなくても、WordPressでカスタムCSSを追加する簡単な方法がいくつかあります。
個々のブロックをスタイル設定したり、テーマ全体を微調整したり、サイトを希望どおりの外観にするのに役立つ小さな変更を加えたりできます。SeedProd、WPCode、またはWordPressの組み込みツールのいずれを使用する場合でも、テーマのデフォルトに不満を感じる必要がないことが重要です。
テーマファイルを編集せずにさらに制御したい場合は、SeedProdがコード不要でページを構築およびスタイル設定する最も簡単な方法です。
WordPressサイトのカスタマイズを続けたいですか？次に推奨するガイドをいくつか紹介します。
- WordPressホームページの編集方法
- WordPressでヘッダーをカスタマイズする方法
- WordPressのページにお客様の声を簡単に追加する方法
- WordPressでカスタム404ページを作成する方法
- WordPressに連絡フォームを追加する方法
