WordPressサイトの色やフォントを変更したいけれど、何か壊してしまうのではないかと心配ですか？多くの初心者は、テーマファイルを編集する必要があると思い込んでいますが、ちょっとした間違いでも大きな問題を引き起こす可能性があります。
WordPressの初期の頃は、カスタムCSSを追加する唯一の方法は、これらのファイルを直接編集することでした。それがどれほどストレスフルだったか、そして1文字の間違いでサイト全体がクラッシュする可能性があったことを覚えています。
幸いなことに、それはもう過去の話です。WordPressでは、テーマカスタマイザー、フルサイトエディター（FSE）、またはWPCodeのようなプラグインを使用して、安全で初心者向けのカスタムCSSを追加する方法を提供しています。
このガイドでは、WordPressサイトにカスタムCSSを追加する3つの簡単な方法をステップバイステップでご紹介します。🙌
WordPressにカスタムCSSを追加する理由
WordPressにカスタムCSSを追加すると、テーマの設定では実現できない、より詳細なサイトデザインの制御が可能になります。例えば、フォントサイズを調整したり、ボタンの色を変更したり、特定のセクションに余分な余白を追加したりできます。
CSS（カスケーディングスタイルシート）は、ウェブサイトの見た目を整える言語であり、色、フォント、余白、レイアウトなどを担当します。独自のCSSを書くことで、テーマを変更したり、追加のプラグインをインストールしたりすることなく、サイトの外観を微調整できます。
この柔軟性により、個々の投稿をパーソナライズしたり、ストアの商品カテゴリのスタイルを設定したり、デスクトップ表示とモバイル表示でサイトの見え方を最適化したりすることができます。
このガイドでは、WordPressウェブサイトにカスタムCSSを追加するさまざまな方法を紹介します。
下のリンクをクリックすると、興味のあるセクションにジャンプできます。
- 方法1：テーマカスタマイザーを使用したカスタムCSSの追加（クラシックテーマ）
- 方法2：WPCodeプラグインを使用してカスタムCSSを追加する（すべてのテーマ）
- 方法3：フルサイトエディター（ブロックテーマ）で追加のCSSを追加する
- ボーナスのヒント：カスタムCSSプラグインの使用対テーマカスタマイザーへのCSSの追加
- よくある質問：WordPressウェブサイトにカスタムCSSを追加する方法
- WordPressサイトのためのさらに多くのCSSヒントとトリック
- WordPressにカスタムCSSを追加する理由
- 方法1：テーマカスタマイザーを使用したカスタムCSSの追加
- 方法2：WPCodeプラグインを使用したカスタムCSSの追加
- 方法3：フルサイトエディターを使用した追加CSSの追加
- ボーナスのヒント：カスタムCSSプラグインの使用対テーマカスタマイザーへのCSSの追加
- よくある質問：WordPressウェブサイトにカスタムCSSを追加する方法
- WordPressサイトのためのさらに多くのCSSヒントとトリック
準備はいいですか？始めましょう。
方法1：テーマカスタマイザーを使用したカスタムCSSの追加（クラシックテーマ）
WordPress 4.7以降、ユーザーはWordPress管理画面から直接カスタムCSSを追加できるようになりました。これは非常に簡単で、ライブプレビューで変更を即座に確認できます。
注意: この方法はクラシックテーマのみを対象としています。ブロックテーマを使用している場合は、他の方法のいずれかを選択する必要があります。
まず、WordPressダッシュボードから外観 » カスタマイズのページに移動する必要があります。
これにより、WordPressのテーマカスタマイザーインターフェースが起動します。
このページでは、左側のパネルにある多くのカスタマイズオプションとともに、サイトのライブプレビューを確認できます。WordPressテーマによって、このメニューのレイアウトは若干異なる場合があります。この例では、Sydneyテーマを使用しています。
「追加CSS」タブを見つけて編集を開始してください。
タブがスライドして、カスタムCSSを追加できるシンプルなボックスが表示されます。
有効なCSSルールを追加するとすぐに、ウェブサイトのライブプレビューパネルに適用されているのが表示されます。
サイトでの変更の外観に満足するまで、カスタムCSSコードを追加し続けることができます。
終了したら、必ず上部にある[公開]ボタンをクリックしてください。
ℹ️ 注意: テーマカスタマイザーを使用して追加したカスタムCSSは、その特定のテーマでのみ利用可能です。他のテーマでも使用したい場合は、同じ方法で新しいテーマにコピー＆ペーストする必要があります。
方法2：WPCodeプラグインを使用してカスタムCSSを追加する（すべてのテーマ）
最初の方法では、現在アクティブなテーマに対してのみカスタムCSSを保存できます。テーマを変更した場合、カスタムCSSを新しいテーマにコピー＆ペーストする必要があるかもしれません。
使用しているWordPressテーマに関係なくカスタムCSSを適用したい場合は、この方法が適しています。
WPCodeは、市場で最高のカスタムコードスニペットプラグインであり、200万人以上のユーザーがいます。WordPressでカスタムコードを追加することを容易にするだけでなく、組み込みのコードスニペットライブラリ、条件付きロジック、コンバージョンピクセルなどの機能も備えています。
私たちはWPCodeを使用して、いくつかの提携ブランド全体でコードスニペットを追加および管理しています。その機能と利点の詳細については、WPCodeの完全レビューをご覧ください。
次に、最初に行うべきことは、WPCodeプラグインをインストールして有効化することです。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
ℹ️ 注: このチュートリアルは、WPCodeプラグインの無料版で動作するため、すぐに始めることができます。WPCode Proにアップグレードすると、スケジュールされたスニペット、完全な改訂履歴、開発者が承認したすぐに使用できるスニペットの完全なライブラリへのアクセスなどの便利な機能が利用できるようになります。
有効化したら、WordPress管理画面から コードスニペット » + 新規追加 に移動してください。
次に、コードスニペットライブラリの「カスタムコードを追加（新規スニペット）」オプションにカーソルを合わせ、「スニペットを使用」をクリックします。
次の画面で、カスタムCSSスニペットのコードタイプを選択します。
コードの種類として「CSSスニペット」をクリックしてください。
次に、ページの上部で、カスタム CSS スニペットのタイトルを追加できます。これは、コードを識別するのに役立つものであれば何でも構いません。
タイトルを入力したら、「コードプレビュー」ボックスにカスタムCSSを書き込むか貼り付けることができます。
次に「挿入」セクションまでスクロールダウンし、コードをWordPressサイト全体で実行したい場合は「自動挿入」メソッドを選択します。
特定のページや投稿でのみコードを実行したい場合は、「ショートコード」メソッドを選択できます。
さて、ページの上部に戻りたいと思います。
次に、スイッチを「アクティブ」に切り替え、[スニペットを保存]ボタンをクリックします。
それで完了です。WordPressのウェブサイトにアクセスして、カスタムCSSが機能していることを確認できます。
方法3：フルサイトエディター（ブロックテーマ）で追加のCSSを追加する
最新のブロックテーマを使用している場合、カスタムCSSを追加するのに最適な場所は、フルサイトエディター内です。この方法では、CSSがテーマのスタイル設定とともに保持され、ライブプレビューを確認できます。
まず、WordPressダッシュボードから外観 » エディターに移動する必要があります。
これにより、フルサイトエディターが開きます。
左側のメニューで、「スタイル」タブをクリックしてください。
サイトの「スタイル」パネルとページプレビューが表示されるはずです。
ここから、プレビューをクリックしてブロックエディターを開きます。
コンテンツエディターで、「スタイル」アイコンをクリックします。これは、半分が黒、半分が白の円のように見えます。
その後、「追加CSS」を選択します。
CSS スライドアウトで、「追加 CSS」フィールドを見つけます。
ここにCSSを入力すると、ライブプレビューで変更が即座に確認できます。
すべてに満足したら、右上の「保存」をクリックして変更を公開することを忘れないでください。
ボーナスのヒント：カスタムCSSプラグインの使用対テーマカスタマイザーへのCSSの追加
上記で説明したすべての方法は、初心者におすすめです。上級ユーザーは、テーマに直接カスタムCSSを追加することもできます。
ただし、親テーマにカスタムCSSスニペットを追加することは推奨されません。テーマを誤って更新した場合、カスタム変更を保存せずに更新するとCSSの変更が失われます。
最善のアプローチは、代わりに子テーマを使用することです。しかし、多くの初心者は子テーマの作成プロセスを難しく感じ、避けています。また、初心者はカスタムCSSを追加する以外に子テーマをどのように使用するかについての理解が不足していることがよくあります。
カスタムCSSプラグインを使用すると、カスタムCSSをテーマとは別に保存できます。これにより、テーマを簡単に切り替えても、カスタムCSSはそのまま残ります。
WordPressサイトにカスタムCSSを追加するもう1つの優れた方法は、CSS Heroプラグインを使用することです。この素晴らしいプラグインを使用すると、1行のコードを書かずに、WordPressサイトのほぼすべてのCSSスタイルを編集できます。
SeedProdプラグイン、最高のドラッグアンドドロップWordPressページビルダーでもカスタムCSSを追加できます。
SeedProdを使用すると、WordPressサイト用のカスタムWordPressテーマやランディングページを作成できます。グローバルCSS設定を簡単に編集でき、コードは不要です。
当社のパートナーブランドの中には、SeedProdでウェブサイト全体をデザインした企業もあります。なぜSeedProdが素晴らしいウェブサイトを構築するための最良の選択肢であるかを知るために、SeedProdの詳細レビューを必ずお読みください。
よくある質問：WordPressウェブサイトにカスタムCSSを追加する方法
WordPressサイトをカスタムスタイルで自分だけのものにしたいと思いませんか？安全にカスタムCSSを追加する方法と、サイトを壊さずに実装する方法についてのよくある質問をご紹介します。
カスタムCSSを追加することは、私のサイトにとってリスクがありますか？
正しい方法で行えば、問題ありません。WordPressテーマカスタマイザー、WPCode、またはSeedProdのようなツールを使用すると、公開する前に変更をプレビューできます。これにより、間違いを避け、サイトを安全に保つことができます。
テーマを変更すると、CSSの変更は消えますか？
テーマカスタマイザーを通じてCSSを追加した場合、変更は特定のテーマに紐付けられます。この場合、WordPressテーマを変更すると、追加したCSSは消えてしまいます。
すべてのテーマでCSSの一貫性を保つには、WPCodeのようなコードスニペットプラグインを使用できます。コードは別々に保存されるため、テーマを切り替えてもアクティブなままです。
何か問題が発生した場合、元に戻すことはできますか？
はい、特にWPCodeのようなコードスニペットプラグインを使用している場合はそうです。追加したスニペットは簡単に無効化または削除できます。変更をプレビューするか、不確かな場合はステージングサイトでテストすることをお勧めします。
CSSをさらに制御したい場合はどうすればよいですか？
より高度な編集を行う場合は、子テーマを作成できます。これにより、完全に制御でき、テーマの更新中も変更を安全に保つことができます。ただし、WordPressテーマの仕組みについて基本的な理解が必要です。
カスタムCSSを追加するためにコーディングスキルは必要ですか？
開発者である必要はありませんが、少なくとも適切なコードをコピー＆ペーストしたり、チュートリアルに従ったりできる程度のCSSの知識は必要です。
良いニュースは、WPBeginnerのような初心者向けの豊富なリソースがあり、簡単なCSSの調整をステップバイステップで学ぶのに役立つことです。適切なツールがあれば、CSSの追加は家を再建するのではなく、家具を配置するような感覚で管理できます。
WordPressサイトのためのさらに多くのCSSヒントとトリック
この記事が WordPress サイトにカスタム CSS を追加する方法を学ぶのに役立ったことを願っています。これが役立った場合は、次のガイドも参照してください。
- WordPressでCSS/JavaScriptファイルを最小化する方法
- WordPressのCSS配信を簡単に最適化する方法
- WordPressで特定のユーザーロールにCSSを適用する方法
- WordPressメニュー項目に最初と最後のCSSを追加する方法
- WordPress で未使用の CSS を削除する方法（正しい方法）
- WordPress管理画面で壊れたCSSを修正する方法
- 初心者向けデフォルトWordPress生成CSSチートシート
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
WordPressサイトの色やフォントを変更したいけれど、何か壊してしまうのではないかと心配ですか？多くの初心者は、テーマファイルを編集する必要があると思い込んでいますが、ちょっとした間違いでも大きな問題を引き起こす可能性があります。
WordPressの初期の頃は、カスタムCSSを追加する唯一の方法はファイルを直接編集することでした。それがどれほどストレスフルだったか、そして1文字の間違いでサイト全体がクラッシュする可能性があったことを覚えています。
幸いなことに、それはもう過去の話です。WordPressでは、テーマカスタマイザー、フルサイトエディター（FSE）、またはWPCodeのようなプラグインを使用して、安全で初心者向けのカスタムCSSを追加する方法を提供しています。
このガイドでは、WordPressサイトにカスタムCSSを追加する3つの簡単な方法をステップバイステップでご紹介します。🙌
WordPressにカスタムCSSを追加する理由
WordPressにカスタムCSSを追加すると、テーマの設定では実現できない、より詳細なサイトデザインの制御が可能になります。例えば、フォントサイズを調整したり、ボタンの色を変更したり、特定のセクションに余分な余白を追加したりできます。
CSS（カスケーディングスタイルシート）は、ウェブサイトの見た目を整える言語であり、色、フォント、余白、レイアウトなどを担当します。独自のCSSを書くことで、テーマを変更したり、追加のプラグインをインストールしたりすることなく、サイトの外観を微調整できます。
この柔軟性により、個々の投稿をパーソナライズしたり、ストアの商品カテゴリのスタイルを設定したり、デスクトップ表示とモバイル表示でサイトの見え方を最適化したりすることができます。
このガイドでは、WordPressウェブサイトにカスタムCSSを追加するさまざまな方法を紹介します。これから説明する方法の概要と、それぞれが誰に最適かについての簡単な説明です。
- 方法1: テーマカスタマイザー。 クラシックテーマを使用しており、別のプラグインをインストールせずにCSSの変更をライブでプレビューする簡単な組み込み方法を求めているユーザーに最適です。
- 方法2: WPCodeプラグイン。 CSSやその他のコードスニペットを安全に管理するための、将来性がありテーマに依存しない方法を求めているすべてのユーザーに最適です。ほとんどのサイトに推奨されます。
- 方法3: フルサイトエディター。 最新のブロックテーマを使用しており、グローバルスタイルと並行してカスタムCSSを直接管理したいユーザーに最適です。
下のリンクをクリックすると、興味のあるセクションにジャンプできます。
準備はいいですか？始めましょう。
方法1：テーマカスタマイザーを使用したカスタムCSSの追加
WordPressには、管理画面から直接カスタムCSSを追加できる組み込み機能があります。これは非常に簡単で、ライブプレビューで変更を即座に確認できます。何よりも、公開する準備ができるまで訪問者はこれらの変更を見ることはありません。
ℹ️ 注意: この方法は、カスタマイザーを引き続き使用するクラシックテーマのみを対象としています。ダッシュボードに外観 » カスタマイズが表示されない場合は、おそらくブロックテーマを使用しており、方法3に進む必要があります。
まず、WordPressダッシュボードから外観 » カスタマイズのページに移動する必要があります。
これにより、WordPressのテーマカスタマイザーインターフェースが起動します。
このページでは、左側のパネルにある多くのカスタマイズオプションとともに、サイトのライブプレビューを確認できます。WordPressテーマによって、このメニューのレイアウトは若干異なる場合があります。この例では、Sydneyテーマを使用しています。
「追加CSS」タブを見つけて編集を開始してください。
タブがスライドして、カスタムCSSを追加できるシンプルなボックスが表示されます。
有効なCSSルールを追加するとすぐに、ウェブサイトのライブプレビューパネルに適用されているのが表示されます。
サイトでの変更の外観に満足するまで、カスタムCSSコードを追加し続けることができます。
終了したら、必ず上部にある[公開]ボタンをクリックしてください。
ℹ️ 注: テーマカスタマイザーを使用して追加したカスタムCSSは、その特定のテーマでのみ利用可能です。テーマを変更した場合、CSSは自動的に引き継がれません。新しいテーマの 追加CSS パネルにコピー＆ペーストするか、すべてのテーマで機能する将来性のあるソリューションについては 方法2 を使用する必要があります。
方法2：WPCodeプラグインを使用したカスタムCSSの追加
最初の方法では、現在アクティブなテーマに対してのみカスタムCSSを保存できます。テーマを変更した場合、カスタムCSSを新しいテーマにコピー＆ペーストする必要があるかもしれません。
使用しているWordPressテーマに関係なくカスタムCSSを適用したい場合は、この方法が最適です。複数のテーマをテストしたり、サイトのデザインを頻繁に変更したり、複数のクライアントのウェブサイトでCSSを管理したりする場合に理想的です。
WPCodeは、200万人以上のユーザーを持つ、市場で最高のカスタムコードスニペットプラグインです。WordPressにカスタムコードを追加することを容易にするだけでなく、組み込みのコードスニペットライブラリ、条件付きロジック、トラッキングコードなどの機能も備えています。
私たちはWPCodeを使用して、いくつかの提携ブランド全体でコードスニペットを追加および管理しています。その機能と利点の詳細については、WPCodeの完全レビューをご覧ください。
ℹ️ 注: このチュートリアルは無料のWPCodeプラグインで動作するため、すぐに始めることができます。または、スニペットをスケジュールしたり、完全なリビジョン履歴にアクセスしたり、開発者が承認したスニペットの完全なライブラリにアクセスしたりするためにWPCode Proにアップグレードすることもできます。
次に、最初に行う必要があるのは、WPCodeプラグインをインストールしてアクティブ化することです。
管理画面で、プラグイン » 新規追加に移動します。
次に、検索バーを使用してWPCodeプラグインをすばやく見つけることができます。
検索結果で、「今すぐインストール」をクリックし、それが表示されたら「有効化」をクリックします。
ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化したら、WordPress管理画面から コードスニペット » + 新規追加 に移動してください。
次に、コードスニペットライブラリの「カスタムコードを追加（新規スニペット）」オプションにカーソルを合わせ、「スニペットを使用」をクリックします。
次の画面で、カスタムCSSスニペットのコードタイプを選択します。
コードの種類として「CSSスニペット」をクリックしてください。
次に、ページの上部で、カスタム CSS スニペットのタイトルを追加できます。これは、コードを識別するのに役立つものであれば何でも構いません。
タイトルを入力したら、「コードプレビュー」ボックスにカスタムCSSを書き込むか貼り付けることができます。
「挿入」セクションまでスクロールダウンし、コードをWordPressサイト全体で実行したい場合は「自動挿入」メソッドを選択しましょう。
CSSを特定のページまたは投稿にのみ適用したい場合は、「ショートコード」メソッドを選択できます。WPCodeは、そのCSSを読み込みたい任意の投稿またはページに貼り付けることができるショートコードを提供します。
さて、ページの上部に戻りたいと思います。
次に、スイッチを「アクティブ」に切り替え、[スニペットを保存]ボタンをクリックします。
それで完了です。WordPressのウェブサイトにアクセスして、カスタムCSSが機能していることを確認できます。
方法3：フルサイトエディターを使用した追加CSSの追加
最新のブロックテーマを使用している場合、カスタムCSSを追加するのに最適な場所は、フルサイトエディター内です。この方法では、CSSがテーマのスタイル設定とともに保持され、ライブプレビューを確認できます。
まず、WordPressダッシュボードから外観 » エディターに移動する必要があります。
これにより、フルサイトエディターが開きます。
左側のメニューで、「スタイル」タブをクリックしてください。
サイトの「スタイル」パネルとページプレビューが表示されるはずです。
ここから、プレビューをクリックしてブロックエディターを開きます。
コンテンツエディターで、右上隅にあるスタイルアイコンをクリックします。これは、半分が黒、半分が白の円のように見えます。
その後、「追加CSS」オプションを探します。すぐに見つからない場合は、「スタイル」タイトルの横にある3点メニューをクリックして表示する必要がある場合があります。
CSS スライドアウトで、「追加 CSS」フィールドを見つけます。
ここにCSSを入力すると、ライブプレビューで変更が即座に確認できます。
すべてに満足したら、右上の「保存」をクリックして変更を公開することを忘れないでください。
ボーナスのヒント：カスタムCSSプラグインの使用対テーマカスタマイザーへのCSSの追加
上記で説明したすべての方法は、初心者におすすめです。上級ユーザーは、テーマに直接カスタムCSSを追加することもできます。
ただし、親テーマのstyle.cssファイルを直接編集することは推奨されません。カスタム変更を保存せずに誤ってテーマを更新した場合、CSSの変更は失われます。
上級ユーザーにとって最善のアプローチは、代わりに子テーマを使用することです。
しかし、多くの初心者は子テーマの作成プロセスが難解だと感じているため、子テーマの作成を避けています。また、いくつかのCSSの微調整を追加する以上の柔軟性は必要ない場合が多いです。
スタイリングのみを変更したい場合は、プラグインベースのアプローチの方が通常シンプルで安全です。カスタムCSSプラグインを使用すると、カスタムCSSを独立して保存できます。これにより、テーマを簡単に切り替えることができ、カスタムCSSはそのまま残ります。
サイトのデザインをカスタマイズするもう1つの優れた方法は、CSS Hero プラグインを使用することです。これにより、コードを1行も書かずに、色、フォント、スペーシングなど、WordPressサイトのほぼすべてのCSSスタイルを視覚的に編集できます。
SeedProdプラグイン、最高のドラッグアンドドロップWordPressページビルダーでもカスタムCSSを追加できます。
SeedProdを使用すると、WordPressサイト用のカスタムWordPressテーマやランディングページを作成できます。グローバルCSS設定を簡単に編集でき、コードは不要です。
当社のパートナーブランドの中には、SeedProdでウェブサイト全体をデザインした企業もあります。なぜSeedProdが素晴らしいウェブサイトを構築するための最良の選択肢であるかを知るために、SeedProdの詳細レビューを必ずお読みください。
よくある質問：WordPressウェブサイトにカスタムCSSを追加する方法
カスタムスタイルでWordPressサイトを真に自分だけのものにしたいですか？安全にカスタムCSSを追加する方法、適切な方法の選択、サイトを壊さずに実行する方法に関する一般的な質問をいくつかご紹介します。
カスタムCSSを追加することは、私のサイトにとってリスクがありますか？
正しい方法で行えば、問題ありません。WordPressテーマカスタマイザー、WPCode、またはSeedProdのようなツールを使用すると、公開する前に変更をプレビューできます。これにより、間違いを避け、サイトを安全に保つことができます。
テーマを変更すると、CSSの変更は消えますか？
テーマカスタマイザーを通じてCSSを追加した場合、変更はその特定のテーマに紐づけられます。この場合、WordPressテーマを変更すると、追加したCSSは消えてしまいます。
すべてのテーマでCSSの一貫性を保つには、WPCodeのようなコードスニペットプラグインを使用できます。コードは別々に保存されるため、テーマを切り替えてもアクティブなままです。
何か問題が発生した場合、元に戻すことはできますか？
はい、特にWPCodeのようなコードスニペットプラグインを使用している場合はそうです。追加したスニペットは簡単に無効化または削除できます。変更をプレビューするか、不確かな場合はステージングサイトでテストすることをお勧めします。
CSSをさらに制御したい場合はどうすればよいですか？
より高度な編集を行う場合は、子テーマを作成できます。これにより、完全に制御でき、テーマの更新中も変更を安全に保つことができます。ただし、WordPressテーマの仕組みについて基本的な理解が必要です。
カスタムCSSを追加するためにコーディングスキルは必要ですか？
開発者である必要はありませんが、少なくとも適切なコードをコピー＆ペーストしたり、ステップバイステップのチュートリアルに従ったりできる程度のCSSの知識は必要です。時間をかければ、色の変更、フォント、マージン、パディングなどの簡単なことを学ぶことができます。
良いニュースは、WPBeginnerのような初心者向けの豊富なリソースがあり、簡単なCSSの調整をステップバイステップで学ぶのに役立つことです。適切なツールがあれば、CSSの追加は家を再建するのではなく、家具を配置するような感覚で管理できます。
WordPressサイトのためのさらに多くのCSSヒントとトリック
この記事が、WordPressサイトにカスタムCSSを追加する方法を学ぶのに役立ったことを願っています。
これがお役に立った場合は、次のガイドも参照してください。
- WordPressでCSS/JavaScriptファイルを最小化する方法
- WordPressのCSS配信を簡単に最適化する方法
- WordPressで特定のユーザーロールにCSSを適用する方法
- WordPressメニュー項目に最初と最後のCSSクラスを追加する方法
- WordPress で未使用の CSS を削除する方法（正しい方法）
- WordPress管理画面で壊れたCSSを修正する方法
- 初心者向けデフォルトWordPress生成CSSチートシート
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Mrteesurez
ブロックサイトでカスタムCSSを追加した際の方法に基づくと、共有されたリンクを通じてサイトがまだクラシックカスタマイザーの要素を使用していることに気づきました。
CSSの追加やその他のために、カスタムリンクを使用せずに、ブロックテーマにクラシックウィジェットプラグインをインストールするだけでカスタマイザーに簡単にアクセスできるか質問したいです。
WPBeginnerサポート
特定のテーマに大きく依存します。テーマにカスタマイザーのオプションがない場合は、この記事の代替手段のいずれかを使用することをお勧めします。
管理者
Mrteesurez
まあ、ほとんどのテーマにはカスタマイザーにオプションがあります。ブロックテーマについては知りません。ありがとうございます。
しかし、完全なカスタマイズ機能のためにページビルダーを使用することをお勧めします。ページビルダーの使い方を学んだら、ページでカスタムCSSをほとんど使用しなくなりました。
デニス・ムトミ
念のため確認ですが、カスタムCSSがカスタムCSSエディター経由で追加される場合、それは現在のテーマのファイルに実際に追加されるということでしょうか？
あまり技術に詳しくないので、始める前に正しく理解しておきたいです。
WPBeginner コメント
カスタマイザーは、テーマファイルに追加されるのではなく、CSSをデータベースに保存し、テーマに関連付けます。
Mrteesurez
それは知りませんでした、ありがとうございます。つまり、追加されたカスタム CSS はテーマファイルではなくデータベースに保存されるということですね。では、実際にはデータベース内に存在するのに、テーマを変更する際にカスタム CSS コードをコピーして再貼り付けする必要があるのはなぜですか？
WPBeginnerサポート
CSSコードを追加すると、保存時にテーマ自体に接続されます。新しいテーマを読み込むと、そのテーマに接続されているCSSが読み込まれます。
イジー・ヴァネック
mrteesurezさん、ご質問ありがとうございます。私もあなたと同じように混乱していました。WPBeginnerの説明のおかげで、追加されたCSSがテーマとどのように連携するのか理解できました。私もCSSコードはテーマにのみ保存されていると思っていましたが、バックグラウンドでどのように機能するのか、ようやく理解できました。
カシム・サード
こんにちは、プラグインなしで特定のページにカスタムCSSを追加したい場合はどうすればよいですか？function経由で追加すると思いますか？functions.php経由でCSSを追加する方法と、特定のページにCSSを追加する最良かつ安全な方法を教えていただけますか？
WPBeginnerサポート
特定のページにCSSを追加するために関数を使用する必要はありません。CSSセレクターで特定のページをターゲットにすれば、サイト上の単一のページにのみ影響します。
管理者
イジー・ヴァネック
WordPressでテンプレートを使用するかWPCodeを使用するか、どちらが自分のCSSを挿入するのに適していますか？
WPBeginnerサポート
どちらのオプションも有効な選択肢です。個人の好みや、テーマにエディタでのオプションがあるかどうかにかかっています。
管理者
イジー・ヴァネック
明確化していただきありがとうございます。例えば、WPCodeを使用したスニペットは、テンプレート自体に統合するよりもサイトの応答速度が速くなるのかどうか確信が持てませんでした。ですので、違いがないのであれば、ベストプラクティスに従い、テンプレートに統合したままにするつもりです。
バビ
無料プランでは CSS の追加は利用できなくなりましたか？代替案はありますか？
WPBeginnerサポート
当社のチュートリアルはWordPress.orgサイト向けであり、現時点ではWordPress.comに関する具体的な情報はありません。両者の比較に関する以下のガイドをご覧いただくことをお勧めします。また、サイトをWordPress.comから自己ホスト型のWordPress.orgサイトに移行したい場合は、そちらもご参照ください。
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
ベン
example.com/wp-admin/customize.php の「トリック」については知りませんでした。ありがとうございます！見事に機能しました！
WPBeginnerサポート
このトリックを共有できて嬉しいです！
管理者
Dani
こんにちは。
カスタムCSSを追加したいのですが、何か問題が発生した場合、どのように削除できますか？
ボグダン
こんにちは、この記事はとても良いですね。ただ一つ質問があります。カスタムCSSを追加するには、HTMLページを見る必要はありませんか？セレクターなどがわからない場合、カスタムCSSをどのように追加すればよいですか？
WPBeginnerサポート
セレクターの見つけ方については、以下の「Inspect element」の使用方法に関するガイドをご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
サイモン
新米ブロガーです。ページ固有の CSS コードを追加する方法はありますか？
WPBeginnerサポート
CSSの一部としてページIDを追加する必要がありますが、はい、可能です。
管理者
ジティン・ミシュラ
WordPressウェブサイトにカスタムCSSを追加するための素晴らしい記事です。このようなさらに有益な投稿を楽しみにしています。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
モヒシン
WordPressのメニューをコーディングでメガメニューに変更したいのですが、HTML、CSS、JSを使ってウェブサイトのメニューをメガメニューに変換できますか？この作業にプラグインを使いたくありません。カスタムコーディングでWordPressウェブサイトに新しい機能を追加する場合、テーマやWordPressのアップデートでカスタム作業が無効にならないようにするためのベストプラクティスは何ですか？よろしくお願いします！
WPBeginnerサポート
変更を安全に保つために子テーマを作成したい場合がありますが、PHPコーディングが必要になる場合があります。子テーマの作成に関するガイドがありますので、以下をご覧ください。
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
管理者
ヴィジャイ V
ページ速度を向上させるために（カスタムCSSを追加した後に読み込み速度が低下したため）、外部CSSファイルを追加できますか（カスタムCSSを移動して）？もしできるなら、どうすればよいですか？
事前に感謝いたします
WPBeginnerサポート
お探しのものを正しく理解している場合、以下の記事をご覧ください。
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
管理者
ビリー・キング
子テーマまたはカスタムCSSで「型破りな」CSSは許可されますか？
WPBeginnerサポート
CSSがサイト上のものをターゲットにしている限り、好きなCSSを使用できます。
管理者
ラトニャ・ムーア
これは素晴らしいですが、CSSを1つのページにのみ追加する方法はありますか？例えば、1つのテキストにホバーまたはマウスオーバーで表示または非表示にしたいだけです。
WPBeginnerサポート
特定のオブジェクトにCSSクラスを追加するか、特定のページに限定するためにCSSにページIDを追加する必要があります。その情報を取得する方法については、以下のインスペクト要素の使用方法に関する記事をご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
シヴァ
テーマエディターでCSSコードを編集してウェブサイトに変更を加えました。WordPressを次のバージョンにアップデートするとどうなりますか？エラーが発生しますか、それともベーステーマに戻りますか、それともアップデート後もアップデート前と同じようにコードが表示されますか？
WPBeginnerサポート
外観 > カスタマイザー > 追加CSS の領域にCSSを追加した場合、サイトをアップデートしてもCSSの変更は保持されます。
管理者
ジョー
ウェブサイトの構築はまだ完全に終わっていませんが、無料版から更新したのでCSSで変更できるようになりました。サイトはまだ公開されていません。プレミアム版にアップグレードしたところ、更新ボタンが公開に変わりました。これは、公開をクリックして変更を保存するとサイトが公開されるという意味ですか？
また、どのテーマを使用したか覚えていません。どのテーマを使用しているかどうすればわかりますか？
ありがとうございます。
WPBeginnerサポート
WordPress.com をご利用中のようですね。投稿を公開すると、サイトを表示できるユーザーに表示されます。WordPress.com のプライベートサイトでは、以下の設定に制限されます。https://en.support.wordpress.com/settings/privacy-settings
外観 > テーマでアクティブなテーマを確認できるはずです。
管理者
ブルース・ウィリアム・テイラー
「タブをスライドさせると、カスタムCSSを追加できるシンプルなボックスが表示されます。有効なCSSルールを追加するとすぐに、ウェブサイトのライブプレビューペインに適用されているのが表示されます。」
CSSを追加する場所はすでに知っています。どのようなCSSを追加すればよいですか？「有効なCSSルール」とは何ですか？
WPBeginnerサポート
ブルースさん、
そのためには、基本的なCSSを学ぶ必要があります。初心者向けのステップバイステップのCSSチュートリアルがあるウェブサイトがいくつかあります。ライブの「試してみる」ボックスでCSSを練習できるw3schoolsをお勧めします。
管理者
アリ
新しいホスティングへの移行中に失ってしまったのですが、カスタマイズCSSコードはどこに保存されていますか？
マハヴィール
外部CSSを追加して、CSSに画像を追加したいのですが…
ムハンマド・アディル
ボーナスとはどのような方法でしたか？
それは私が理解できなかったプラグインですか？もう一度聞いていただけますか？
ありがとうございます
アディティア・フテタ
こんにちは！ウェブサイトの価格表示の文字が小さすぎるので、サイズを変更したいです。その方法を教えてください。
よろしくお願いします
フランク・ラーツ
質問2つ:
1. 確認ですが、「プラグイン」とは、CSSを知らない私たちのような人間にとって難しい作業であるCSSの記述の代わりになるもの、ということで合っていますか？
2. WPプラグインページでダウンロード用にリストされているプラグインは、「ビジネス」プランを支払った加入者のみがインストール可能ですが、それは正しいですか？
WPBeginnerサポート
Frankさん、こんにちは。
1. いいえ、プラグインはカスタム CSS の記述の代わりにはなりません。プラグインをインストールせずにカスタム CSS を記述できます。詳細については、WordPress プラグインとは何か、どのように機能するかをご覧ください。
2. WordPress.com をご利用の場合、ビジネスプランにアップグレードする必要があります。セルフホスト型 WordPress.org と無料 WordPress.com ブログの違いに関するガイドをご覧ください。
管理者
アニー・ミッチェル
こんにちは、
私はウェブサイトの構築やデザインに関しては初心者で、CSSの知識が全くありません。私のウェブサイトではSydneyテーマを使用していますが、段落のフォントを白くしてしまいました。Googleで調べたところ、同じ問題を抱えていた方がプラグインをダウンロードしてカスタムCSSを使用したところ解決したという情報を見つけましたが、試してみましたがうまくいきませんでした。
彼が使用を勧めたCSSは次のとおりです –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
しかし、なぜ私にはうまくいかないのかわかりません。何か助けていただけると幸いです。
ありがとう、
アニー
WPBeginnerサポート
こんにちは、アニーさん、
まず、すべてのWordPressプラグインを無効化してオフにすることをお勧めします。その後、ウェブサイトにアクセスして、これで問題が解決したかどうかを確認してください。解決した場合、問題の原因はプラグインのいずれかの設定にあったことになります。問題が解決しない場合は、Twenty Seventeenのようなデフォルトテーマに切り替えてみてください。それでも問題が解決する場合、テーマのどこかでフォント設定を変更したことになります。
何もうまくいかない場合は、このカスタムCSSを試すことができます。
p { color:#000; }1-click Use in WordPress
管理者
ホセ
プラグインの1つ（Simple Custom CSS）は2年間更新されておらず、これはWordPressプラグインの世界では非常に長い時間です。これはセキュリティリスクなので、個人的には代替手段を探します。
レベッカ
こんにちは
すみません、CSSについては何も知りません。プラグインを検索できないという問題を解決しようとしていますが、それはまた別の話です！外観 / CSSの編集 / 追加CSS に行ったときにこのメッセージが表示されるため、ここに投稿しています。
” 保存するには修正が必要なエラーが1件あります。
サイトが破損する可能性がありますが、それでも更新しますか？
これは心配すべきことですか？
その下のボックスのテキストは次のように表示されます…
そして、ここに赤い句点があります
誰か助けてくれると嬉しいです。
ありがとうございます
WPBeginnerサポート
こんにちは、レベッカさん。
CSSをコピーしてテキストファイルに貼り付け、バックアップとして保存できます。次に、追加CSSボックス内のすべてを削除し、エラーが再び表示されるまでカスタムCSSを1行ずつ追加していきます。これにより、エラーの場所を特定し、修正することができます。
管理者
ジェームズ
これは無料アカウントではもう機能しません。CSSオプションはもうなく、関連プラグインをインストールするにはビジネスアカウントが必要です。
WPBeginnerサポート
こんにちは、ジェームズさん、
おそらくWordPress.comをご利用です。セルフホスト型WordPress.orgと無料のWordPress.comブログの違いに関するガイドをご覧ください。
管理者
スコット
WPバージョン4.9より前は、カスタムCSS（WPカスタマイザーから）をコピーしてWindowsメモ帳に貼り付けることができました（フォーマットが維持されていました）。間違いがあった場合にバックアップとして保存するために、これを頻繁に行っていました。
メモ帳に貼り付けると、メモ帳での行ごとのフォーマットなしで、CSSがすべてまとめて実行されます。
何か原因や解決策のアイデアはありますか？メモ帳では既に「自動折り返し」モードを設定しています。
よろしくお願いします。
WPBeginnerサポート
スコットさん、こんにちは
Notepad++ のような他のテキストエディタにコードを保存してみてください。問題が解決しない場合は、WordPress のトラブルシューティングのヒントをお試しください。
管理者
ジョー・マクミラン
このサイトは本当に良いです。私のサイトにはリンクの色がなかったので、このコードを使用しました /* 未訪問リンク 青 */
a:link {
Color: #196380;
}
/* 訪問済みリンクの緑 */
a:visited {
color: #248f24;
}
/* マウスオーバーリンク オレンジ */
a:hover { color: #ff3300; }
/* 選択されたリンクの赤色 */
a:active {
color: #cc0000;
}
しかし、メニューのようなリンクすべてに色が付きました。
リンク用の色だけが欲しいです。
どんな助けでも感謝します。ありがとう
WPBeginnerサポート
ジョー、こんにちは。
CSS で、これらの色をどの領域に適用するか定義していないため、全体に適用されています。ターゲットにする必要がある領域を特定するには、Inspect Tool を使用して、テーマがコンテンツブロックに使用している CSS クラスを見つける必要があります。
テーマのコンテンツブロックに `site-content` というCSSクラスがあると仮定すると、CSSでは次のように使用します。
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
お役に立てれば幸いです
管理者
ロブ
素晴らしいサイトですね！
役立つ記事をすべてありがとうございます。
WordPressプレミアムプランについて質問があります。
以下のスクリプトをサイトに追加したいです。
var refTagger = { settings: { bibleVersion: “NKJV” }
これをカスタムCSSに追加できますか？
このプランではヘッダーやフッターにアクセスする機能がありません
ありがとう、
ロブ
WPBeginnerサポート
Robさん、こんにちは。
いいえ、できません。セルフホスト型 WordPress.org と無料 WordPress.com ブログの違いに関するガイドをご覧ください。
管理者
サミー
これは本当に素晴らしい記事です。自分のサイトのためにCSSを作成する方法を学び始める必要があります。
トーマス
こんにちは、
この機能は、マルチサイトWordPressネットワークのサイト管理者ではアクティブになりません。
このプラグインなどを使用して、サイト管理者のためにアクティブにすると、セキュリティ上の問題が発生すると思いますか？
ありがとうございます！
WPBeginnerサポート
トーマスさん、
プラグインを使用してカスタムCSSを追加できます。
管理者
トーマス
こんにちは、
はい、わかっています（非常に優れた Simple Custom CSS プラグインをすでに使用しています）。しかし、WordPress に実装されているネイティブ機能を使用したいと考えています。
ただし、この機能はマルチサイトインストールでは、ネットワーク管理者は利用できますが、サイト管理者は利用できません。
サイト管理者がカスタマイザー（ネイティブ WP 機能を使用）で独自のカスタム CSS を追加できるように権限を簡単に変更できます（このプラグインを参照してください: http://www.wordpress.org/plugins/multisite-custom-css/）。サイト管理者を信頼できないという前提で、これがセキュリティ上の問題を引き起こすのではないかと疑問に思っていますか？
WPBeginnerサポート
トーマスさん、
申し訳ありません、ご質問を完全に誤解していました
ご懸念は理解できます。そのため、この機能はオフになっています。オンにすると、ユーザーはフィルタリングされていないCSSを追加できるようになります。オフのままにしておくことをお勧めします。
ブライス
コードについてはあまり詳しくないので、変更を加えて「保存して公開」をクリックした場合、変更が気に入らなかった場合に元のコードに戻す方法はありますか、それとも復元したい場合に元のコードをコピーして保存する必要がありますか？
ルース・ビルハイマー
これはおそらく非常にナイーブな質問だと思います。私はコードについてあまり知らないので、ご容赦ください。カスタマイズの追加CSSに、別のものを入力できますか？つまり、すでに色の一部を変更するものを入力しました。次に、ページの幅を変更するものを入力したいと思います。（これらのコードの断片は非常に親切な人々から提供されたもので、私は何も知りません！）
これら両方のことは機能しますか？それとも1つのことしか変更できませんか？ページの幅は変更されていないようです
ヨス・シューアマンス
こんにちは。
かつては、WP管理画面の「外観」メニューからstyle.cssを編集することが可能でした。
WPマルチサイトでは、ネットワークのテーマサブメニュー経由でした。その機能は廃止されましたか？
乾杯、
ジョス
ジュディ
素晴らしい投稿、ありがとうございます！
これについて誰か助けてもらえませんか？CSS Heroでロゴを少しカスタマイズしました。その後、CSS Heroを無効にして、これらのコードの9つの文字列をそのままSimple Custom CSSプラグインにコピーしました。Simple Custom CSSを使ってロゴのCSS Heroカスタマイズを再現できると思いましたが、うまくいきません。
ページをリロードしてキャッシュをクリアしましたが、カスタマイズがまだ反映されません。なぜですか？
ありがとう、
ジュディ
ロビン
これは私のCSSスタイルシートにあるすべてです。 /* カスタムCSSへようこそ
この仕組みを学ぶには、
/* を参照してください。
彼のコードを削除して、新しいフォントコードを追加すればいいですか？助けてください????
WPBeginnerサポート
はい。これらは、新しいユーザーが開始するのに役立つコメントです。
管理者
ポール・H。
素晴らしいプラグインです！！！
カスタムページを「スタイル」するために、組み込みのWPエディターで多くの時間を費やしましたが、うまくいきませんでした…
プラグインを探してみたところ、あなたのものを見つけました…数分でプラグインをインストールして有効化し、CSS を入力して更新をクリックし、カスタムページをリフレッシュしました…完璧です！
A+++
イアン
皆さん、こんにちは。
Simple custom CSSプラグインをインストールして有効化しました。ウェブページの一つに作成したテーブルの周りに枠線を付けたいと思っていました。
その結果、シンプルなカスタムCSSプラグインに次のコードを追加しました
table { border: 2px solid black; }
カスタムCSSを更新しましたが、何も起こりませんでした。ウェブサイトのテーブルに境界線が表示されません。
何か提案はありますか？
よろしくお願いいたします
イアン
モリー・セッツァー
イアンさん、こんにちは。
おそらく、正しいCSSセレクターで呼び出せていないのでしょう。要素を取得するには、最も定義されたセレクターを使用してください。例えば、テーブルに「info」というクラスがある場合、より具体的な「table.info」で呼び出すことで要素に到達しやすくなります。HTMLで他のセレクターがないか確認してください。
ラムニート
シェアしてくれてありがとう。WordPressを学ぶのに素晴らしい方法ですね。気に入りました。
エステ・ピーター
既存の特定のウェブサイトプラグイン経由でカスタムCSSを追加するにはどうすればよいですか
以下がコードです
.mobileonly { display: none; }
@media screen and (max-width: 480px) { .mobileonly { display: inline; } }
.hidemobileonly { display: inline; }
@media screen and (max-width: 480px) { .hidemobileonly { display: none; } }
ゲイリー・ジールケ
カスタムCSSプラグインは個々のページで機能しますか？
つまり、テーマ全体ではなく、単一のページにスタイルを追加できますか？
ありがとう
WPBeginnerサポート
いいえ、個々のページでは機能しません。
管理者
トーリ・トラン
ありがとうございます ^^
ラッセル・ブルース
CSSが何をするのか、そしてなぜそれが役立つのかを説明するのは有益ではないでしょうか
ジョーイ
ありがとうございます。もっと早く知っていればよかったです。ローカルで変更を加えているため、すべてのCSS変更をstyle.cssファイルで行ってきました。しかし、もし何らかの理由でGenesisが使用している特定のチャイルドテーマを更新した場合、これらの変更は失われるということでしょうか？Genesisがチャイルドテーマを更新したのを見たことがないのですが、Genesisを使い始めてまだ数ヶ月なので、特定のものをあちこち更新する可能性は十分にあると思います。今後は、特にサイトがライブの場合は、プラグインで変更を加えるつもりです。
スージー
好きなテーマを使用して「子テーマ」を作成してください。
子テーマは、あなたのウェブサイト固有のものになります。
変更はすべて子テーマのみで行ってください。
テーマデザイナーがテーマを更新する可能性がありますが、あなたの変更はそのまま残ります。（デザイナーの更新によっては、変更を微調整する必要があるかもしれませんが、それは稀です）。
ロドニー
素晴らしい記事です。
ここに追記したいことがあります。特にWordPressで動作しているサイトでは、カスタムCSSの構築/作成は簡単です。ほとんどのWordPressテーマは、追加のプラグインを作成または追加することなく、カスタムCSSの追加を通常サポートしています。
私も同意します。ここで最善の選択肢は子テーマを使用することです。
ありがとう