要約：WordPressにカスタムCSSを追加する方法
CSSを貼り付ける場所は、CSS自体よりも重要です。なぜなら、テーマを変更した瞬間に各場所の動作が異なるからです。
- SeedProd：ビルダーのグローバル設定にあるカスタムCSSボックス。無料で使用でき、作成したページにスタイルが紐付けられます。
- カスタマイザー： 外観、カスタマイズ、追加CSS（クラシックテーマを使用している場合）。
- サイトエディター： スタイル、次に3点メニュー（ブロックテーマを使用している場合）。
- WPCode： テーマを切り替えても残るCSSスニペット。
- テーマファイル： 機能しますが、次のテーマアップデートで変更が消去されます。
- 追加CSSオプションがない？ それはテーマではなく、あなたのアカウントの権限の問題です。
WordPressサイトの色を変更したり、何かを非表示にしようとしたときに、オプションが見つからなかった経験はありませんか？私も同じでした。簡単なフォントの微調整のために、テーマ設定を長時間探し回ったことを覚えています。それは不可能でした。
そこでカスタムCSSについて学びました。テーマファイルを編集したり、開発者を雇ったりすることなく、サイトの小さな視覚的な問題を修正する簡単な方法です。
これらを行うためにコーディングを知る必要はありません。WordPressでカスタムCSSを追加できる場所は4つあり、選択した場所によって、次のテーマ変更時にスタイルが維持されるかどうかが決まります。
WordPressにカスタムCSSを追加する方法：
- 1. SeedProdでカスタムCSSを追加する
- 2. ページビルダーなしでカスタムCSSを追加する
- 3.カスタムCSSプラグインを使用する
- 4.テーマファイルを編集する（非推奨）
- 追加CSSオプションが欠落しているのはなぜですか？
- どの方法を使用すべきか？
- ボーナス：ページまたはブロックにカスタム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をクリックして変更を保存し、サイト全体に適用します。
これでページを更新して、更新がライブで表示されていることを確認できます。
この方法は、フォント調整、スペーシング、色の変更など、グローバルなスタイル変更を行うのに役立ちます。
サイト全体へのルートはWordPress独自のパネルです： 追加CSSを編集ボタンはカスタマイザーを開くため、グローバルスタイルはSeedProd内ではなくテーマに対して保存されます。さらに上のランディングページボックスは、まさにSeedProdの部分であり、無料版でも動作しますが、テーマビルダー自体にはPlusプラン以上が必要です。
2. ページビルダーなしでWordPressにカスタムCSSを追加する
SeedProdのようなページビルダーを使用していない場合でも、WordPressに直接カスタムCSSを追加できます。手順は、使用しているテーマの種類（クラシックテーマまたはブロックテーマ）によって異なります。
Classic themesは古いカスタムizerツールを使用し、多くの場合ウィジェットとページテンプレートに依存します。一方、Block themesは新しいSite Editorを使用し、ブロックを使用してサイト全体をデザインできます。
どちらのボックスもWordPressに組み込まれているため、インストールするものは何もありません。私は、保持したいものよりも、一時的な変更のためにこれらを使用します。なぜなら、WordPressは現在アクティブなテーマのいずれかにCSSを保存するからです。
WordPressカスタムizer（クラシックテーマ）を使用する
WordPressダッシュボードで、Appearance » Customizeに移動します。
カスタムizerメニューから、Additional CSSをクリックします。
テキストボックスが表示され、カスタムコードを貼り付けることができます。たとえば、次のようになります。
p {
color: #0073aa;
}これにより、サイト上のすべての段落テキストが青色に変わります。
入力すると、右側に変更のライブプレビューが表示されます。
見た目が気に入ったら、公開ボタンをクリックして変更を保存してください。
この方法は、カスタマイザーをサポートする古いテーマでうまく機能し、WordPressプラグインは必要ありません。
サイトエディター（ブロックテーマ）を使用する
WordPressサイトでブロックテーマを使用している場合、カスタマイザーではなく、フルサイトエディターを使用してデザインを管理します。
開始するには、WordPressダッシュボードで外観 » エディターに移動します。
左側のサイドバーで、スタイルアイコンをクリックします。これは半月または絵の具のパレットのように見えます。
次に、スタイルを編集というラベルの付いた小さな鉛筆アイコンをクリックします。
これでWordPressエディターが表示されます。画面の右上隅にある3点リーダーメニュー（⋮）をクリックし、ドロップダウンから追加CSSを選択します。
カスタムコードをボックスに貼り付けます。例：
p {
color: #0073aa;
}これにより、サイト全体の段落テキストの色が変更されます。
変更を適用するには、右上隅にある保存をクリックします。
そのメニューに「追加CSS」オプションがありませんか？ それはほとんどテーマの問題ではありません。ユーザーアカウントの権限の問題であり、下のセクションで確認方法を説明しています。
3.カスタムCSSプラグインを使用する
テーマがカスタマイザーまたはサイトエディターをサポートしていない場合、または単にCSSを1か所でクリーンに管理したい場合は、WPCodeのようなプラグインの使用をお勧めします。
WPCodeは、テーマファイルを編集せずにカスタムコードスニペット（CSSを含む）を追加できる軽量なWordPressプラグインです。
WPCodeをインストールして有効化したら、WordPressダッシュボードでコードスニペット » + スニペットを追加に移動します。
カスタムコードを追加（新規スニペット）というボックスをクリックし、スニペットにカスタムCSSスタイルのような名前を付けます。
コードタイプの下で、ドロップダウンからCSSスニペットを選択します。
次に、CSSをコードボックスに貼り付けます。例：
p {
color: #0073aa;
}下にスクロールして自動挿入を選択し、CSSをサイト全体に適用します。
次に、スニペットを保存をクリックし、上部にあるスイッチをアクティブに切り替えます。
これで完了です！カスタムスタイルがサイト全体に適用され、いつでもこのスニペットに戻って変更を加えることができます。
4.テーマファイルを編集する（非推奨）
この方法は、クラシックテーマを使用している場合にのみ機能します。ブロックテーマには、WordPressダッシュボードのテーマファイルエディターへのアクセスは含まれていません。
クラシックテーマを使用しており、コードの編集に慣れている場合は、カスタムCSSをテーマのstyle.cssファイルに直接追加できます。ただし、これを行う場合は、何をしているか理解している場合にのみお勧めします。
テーマファイルを直接編集すると、アップデート時に変更が失われる可能性があります。ライブプレビューも表示されず、わずかなタイポでもレイアウトが壊れる可能性があります。
とはいえ、子テーマを使用している場合や、何か問題が発生した場合にサイトを復元する方法を知っている場合は、次の手順で行います。
WordPressダッシュボードで外観 » テーマファイルエディターに移動します。
右側のファイルリストからstyle.cssをクリックします。
ファイルの末尾までスクロールし、CSSを貼り付けます。例：
p {
color: #0073aa;
}変更を保存するにはファイル更新をクリックします。
子テーマの後ろでのみテーマファイルを編集してください： 子テーマがないと、次のテーマアップデートですべての追加内容が上書きされます。何かが壊れたときにサイトを復元する方法がわからない場合は、代わりにSeedProdまたはWPCodeを使用してください。
WordPressで追加CSSオプションが欠落しているのはなぜですか？
WordPressは、edit_cssという権限を持たないすべての С comptes から追加CSSを非表示にします。そのため、ボックスが消えると、機能がなくなったのではなく、権限がなくなったのです。
テーマが明白な原因のように見えますが、ほとんどの場合そうではありません。WordPressはカスタマイザーボックスとサイトエディターボックスの両方で同じ権限チェックを実行するため、テーマを変更しても何も変わりません。
その権限をオフにする3つの要因があります：
- wp-config.php のセキュリティ設定。 サイトで
DISALLOW_UNFILTERED_HTMLが定義されている場合、WordPress は管理者を含め、すべてのユーザーからカスタムCSS編集機能を削除します。 - マルチサイト。 WordPressネットワークでは、ネットワークを実行するスーパー管理者のみが権限を保持するため、個々のサイト管理者はボックスを失います。
- それを削除するハードニングプラグイン。
edit_css権限は、unfiltered_htmlと呼ばれる古い権限に基づいていますが、一部のセキュリティプラグインはそれを削除するため、CSSボックスも一緒に削除されます。
テーマの説明を繰り返すのではなく、WordPress 7.1 のコード自体でこれを読みました。なぜなら、このオプションはテーマのサポートには全く基づいていないからです。
あなたが唯一の管理者であり、明らかにあなたをブロックしているものがない場合は、ホストまたはサイトをセットアップした人に、DISALLOW_UNFILTERED_HTML が wp-config.php ファイルで定義されているかどうか尋ねてください。これは最も早く除外できるものです。
設定が意図的なものであることが判明した場合は、それを尊重し、同じチェックを経由しない別の場所に CSS を配置してください。SeedProd のカスタム CSS ボックスは、ビルダー独自の権限で保存され、WPCode は独自のコードスニペット権限を使用するため、追加 CSS パネルがなくてもどちらも機能します。
どの方法を使用すべきか？
テーマを変更したときにどうしたいかに基づいて選択してください。それがこの 4 つの real difference です。
| 方法 | 最適な対象 | テーマ変更後も残りますか？ | 有料プランが必要ですか？ |
|---|---|---|---|
| SeedProd | 自分で作成したランディングページやテンプレートのスタイリング | はい、CSS はページと一緒に保存されます | 単一ページの場合はいいえ、サイト全体の場合はプラス |
| カスタマイザーまたはサイトエディター | 現在実行中のテーマへの簡単な調整 | いいえ、WordPress はテーマごとに保存します | いいえ |
| WPCode | テーマ変更後も保持したい CSS | はい | いいえ |
| テーマファイル | 子テーマで作業している場合を除き、何もありません | いいえ、次のアップデートで上書きされます | いいえ |
CSS がサイト全体に適用され、それについて考えるのをやめたい場合は、WPCode を使用してください。なぜなら、4 つの中でテーマを完全に無視するのはそれだけだからです。スタイリングがデザインしたページに属している場合は、SeedProd でページと一緒に保存してください。
カスタマイザーは、テーマを変更しても惜しくない小さな調整にはまだ適しています。それがあなたが選んでいることだと知っておいてください。
ボーナス：ページまたはブロックにカスタム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
特定のページにCSSを追加するにはどうすればよいですか？
一意のページIDを使用して 1 つのページをターゲットにできます。例: .page-id-123 p { color: red; }。SeedProd または WPCode を使用している場合は、スタイルを設定したいブロックまたはセクションにカスタム CSS クラスを追加し、代わりにそのクラスをターゲットにしてください。
HTMLとCSSを一緒に使用できますか？
はい。WordPressブロックまたはウィジェット内にHTMLを追加し、カスタムCSSでスタイルを設定できます。ただし、CSSが正しい要素またはクラスをターゲットにしている必要があります。
開発者なしでCSSを追加しても安全ですか？
はい、テーマファイルに触れない限り安全です。CSSは見た目を変更するだけなので、間違いがあってもサイトが壊れるのではなく、視覚的な違和感として表示され、ルールを削除すれば元に戻せます。テーマファイルを直接編集することだけが、実際にリスクを伴う部分です。
WordPressにCSSを追加するとモバイルデバイスに影響しますか？
メディアクエリで囲まない限り、CSS はすべての画面サイズに適用されます。SeedProd で作業している場合は、ビルダーでモバイルプレビューに切り替えて、公開する前にそこで調整できます。
カスタムCSSが機能しないのはなぜですか？
ほとんどの場合、2つの原因が考えられます。テーマ内のルールがあなたのルールよりも優先度が高いため、それが適用されているか、キャッシュプラグインが古いスタイルシートを提供し続けているかのどちらかです。まずキャッシュをクリアし、次に要素を右クリックして「検証」を選択し、実際に適用されているルールを確認してください。
WordPressはカスタムCSSをどこに保存しますか？
カスタマイザーに追加した CSS は、WordPress がアクティブなテーマの名前にちなんで名付けた非表示の投稿に保存されるため、切り替えても追跡されません。サイトエディターは、CSS をテーマのグローバルスタイルと一緒に保持します。SeedProd と WPCode はどちらもテーマの外に保存します。
WordPressサイトのカスタマイズを始めましょうか？
カスタム CSS は、テーマが何かを変更できない場合に最も早く回避する方法であり、開発者は必要ありません。
再構築したり、スタイルシートの仕組みを学んだりする必要はありません。CSS をどこに保存するかを決定し、貼り付けて、ブラウザでページを確認してください。
視覚的にスタイリングを行い、作成したページにアタッチしておきたい場合は、SeedProd が両方を同じ場所で処理します。
WordPress サイトのカスタマイズを続けたいですか？
次にいくつかおすすめのガイドを紹介します。
- WordPressホームページの編集方法
- WordPressでヘッダーをカスタマイズする方法
- WordPressのページにお客様の声を簡単に追加する方法
- WordPressでカスタム404ページを作成する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
