WordPressサイトの色やフォントを変更したいけれど、何か壊してしまうのではないかと心配ですか？多くの初心者は、テーマファイルを編集する必要があると思い込んでいますが、ちょっとした間違いでも大きな問題を引き起こす可能性があります。
WordPressの初期の頃は、カスタムCSSを追加する唯一の方法は、これらのファイルを直接編集することでした。それがどれほどストレスフルだったか、そして1文字の間違いでサイト全体がクラッシュする可能性があったことを覚えています。
幸いなことに、それはもう過去の話です。WordPressでは、テーマカスタマイザー、フルサイトエディター（FSE）、またはWPCodeのようなプラグインを使用して、安全で初心者向けのカスタムCSSを追加する方法を提供しています。
このガイドでは、WordPressサイトにカスタムCSSを追加する3つの簡単な方法をステップバイステップでご紹介します。🙌
WordPressにカスタムCSSを追加する理由
WordPressにカスタムCSSを追加するのは、テーマの設定では許可されていない、サイトのデザインに対するより多くの制御を得るためです。例えば、フォントサイズを調整したり、ボタンの色を変更したり、特定のセクションに余分なスペースを追加したりできます。
CSS（カスケーディングスタイルシート）は、ウェブサイトの見た目を整える言語で、色、フォント、間隔、レイアウトなどを扱います。独自の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プラグインを使用することです。この素晴らしいプラグインを使用すると、コードを一行も書かずに、WordPressサイトのほぼすべてのCSSスタイルを編集できます。
また、SeedProdプラグイン、つまり最高のドラッグ＆ドロップWordPressページビルダーを使用してカスタムCSSを追加することもできます。
SeedProdを使用すると、WordPressサイト用のカスタムWordPressテーマやランディングページを作成できます。グローバルCSS設定を簡単に編集でき、コーディングは不要です。
当社のパートナーブランドの中には、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コードはテーマにのみ保存されていると思っていましたが、バックグラウンドでどのように機能するのか、ようやく理解できました。
Qasim Saeed
こんにちは、プラグインなしで特定のページにカスタム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サポート
Glad we could share this trick with you!
管理者
Dani
こんにちは。
カスタムCSSを追加したいのですが、何か問題が発生した場合、どのように削除できますか？
Bogdan
こんにちは、この記事はとても良いですね。ただ一つ質問があります。カスタムCSSを追加するには、HTMLページを見る必要はありませんか？セレクターなどがわからない場合、カスタムCSSをどのように追加すればよいですか？
WPBeginnerサポート
セレクターの見つけ方については、以下の「Inspect element」の使用方法に関するガイドをご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
cymon
新米ブロガーです。ページ固有の CSS コードを追加する方法はありますか？
WPBeginnerサポート
CSSの一部としてページIDを追加する必要がありますが、はい、可能です。
管理者
Jitin Mishra
WordPressウェブサイトにカスタムCSSを追加するための素晴らしい記事です。このようなさらに有益な投稿を楽しみにしています。
WPBeginnerサポート
Glad you found our guide helpful
管理者
Mohsin
WordPressのメニューをコーディングでメガメニューに変更したいのですが、HTML、CSS、JSを使ってウェブサイトのメニューをメガメニューに変換できますか？この作業にプラグインを使いたくありません。カスタムコーディングでWordPressウェブサイトに新しい機能を追加する場合、テーマやWordPressのアップデートでカスタム作業が無効にならないようにするためのベストプラクティスは何ですか？よろしくお願いします！
WPBeginnerサポート
変更を安全に保つために子テーマを作成することになりますが、PHPコーディングが必要になる場合があります。以下に、子テーマの作成に関するガイドがありますので、ご覧ください。
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
管理者
vijay v
ページ速度を向上させるために（カスタムCSSを追加した後に読み込み速度が低下したため）、外部CSSファイルを追加できますか（カスタムCSSを移動して）？もしできるなら、どうすればよいですか？
事前に感謝いたします
WPBeginnerサポート
もし、お客様がお探しのものを正しく理解しているのであれば、以下の記事をご覧ください。
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
管理者
ビリー・キング
子テーマまたはカスタムCSSで「型破りな」CSSは許可されますか？
WPBeginnerサポート
CSSがサイト上のものをターゲットにしている限り、好きなCSSを使用できます。
管理者
Latonya Moore
これは素晴らしいですが、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の変更は保持されます。
管理者
Jo
ウェブサイトの構築はまだ完全に終わっていませんが、無料版から更新したのでCSSで変更できるようになりました。サイトはまだ公開されていません。プレミアム版にアップグレードしたところ、更新ボタンが公開に変わりました。これは、公開をクリックして変更を保存するとサイトが公開されるという意味ですか？
また、どのテーマを使用したか覚えていません。どのテーマを使用しているかどうすればわかりますか？
ありがとうございます。
WPBeginnerサポート
WordPress.comをご利用のようですね。投稿を公開すると、サイトを見ることができる人に表示されます。WordPress.comのプライベートサイトでは、以下の制限があります：https://en.support.wordpress.com/settings/privacy-settings
外観>テーマの下でアクティブなテーマを確認できるはずです
管理者
Bruce William Taylor
「タブをスライドさせると、カスタムCSSを追加できるシンプルなボックスが表示されます。有効なCSSルールを追加するとすぐに、ウェブサイトのライブプレビューペインに適用されているのが表示されます。」
CSSを追加する場所はすでに知っています。どのようなCSSを追加すればよいですか？「有効なCSSルール」とは何ですか？
WPBeginnerサポート
ブルースさん、
そのためには、基本的なCSSを学ぶ必要があります。初心者向けのステップバイステップのCSSチュートリアルがあるウェブサイトがいくつかあります。ライブの「試してみる」ボックスでCSSを練習できるw3schoolsをお勧めします。
管理者
Ali
新しいホスティングへの移行中に失ってしまったのですが、カスタマイズCSSコードはどこに保存されていますか？
マハヴィール
外部CSSを追加して、CSSに画像を追加したいのですが…
Muhammad Adil
ボーナスとはどのような方法でしたか？
それは私が理解できなかったプラグインですか？もう一度聞いていただけますか？
ありがとうございます
アディティア・フテタ
こんにちは！ウェブサイトの価格表示の文字が小さすぎるので、サイズを変更したいです。その方法を教えてください。
よろしくお願いします
フランク・ラーツ
質問2つ:
1. 確認ですが、「プラグイン」とは、CSSを知らない私たちのような人間にとって難しい作業であるCSSの記述の代わりになるもの、ということで合っていますか？
2. WPプラグインページでダウンロード用にリストされているプラグインは、「ビジネス」プランを支払った加入者のみがインストール可能ですが、それは正しいですか？
WPBeginnerサポート
Frankさん、こんにちは。
1. いいえ、プラグインはカスタムCSSの記述の代わりにはなりません。プラグインをインストールせずにカスタムCSSを記述できます。詳細については、WordPressプラグインとは何か、どのように機能するかに関するガイドをご覧ください。
2. WordPress.comを使用している場合は、ビジネスプランにアップグレードする必要があります。セルフホスト型WordPress.orgと無料WordPress.comブログの違いに関するガイドをご覧ください。セルフホスト型WordPress.org vs 無料WordPress.comブログ。
管理者
アニー・ミッチェル
こんにちは、
私はウェブサイトの構築やデザインに関しては初心者で、CSSの知識が全くありません。私のウェブサイトではSydneyテーマを使用していますが、段落のフォントを白くしてしまいました。Googleで調べたところ、同じ問題を抱えていた方がプラグインをダウンロードしてカスタムCSSを使用したところ解決したという情報を見つけましたが、試してみましたがうまくいきませんでした。
彼が使用を勧めたCSSは次のとおりです –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
しかし、なぜ私にはうまくいかないのかわかりません。何か助けていただけると幸いです。
ありがとう、
Annie
WPBeginnerサポート
こんにちは、アニーさん、
まず、すべてのWordPressプラグインを無効化してオフにすることをお勧めします。その後、ウェブサイトにアクセスして、これで問題が解決したかどうかを確認してください。解決した場合、問題の原因はプラグインのいずれかの設定にあったことになります。問題が解決しない場合は、Twenty Seventeenのようなデフォルトテーマに切り替えてみてください。それでも問題が解決する場合、テーマのどこかでフォント設定を変更したことになります。
何もうまくいかない場合は、このカスタムCSSを試すことができます。
p { color:#000; }1-click Use in WordPress
管理者
Jose
プラグインの1つ（Simple Custom CSS）は2年間更新されておらず、これはWordPressプラグインの世界では非常に長い時間です。これはセキュリティリスクなので、個人的には代替手段を探します。
レベッカ
こんにちは
すみません、CSSについては何も知りません。プラグインを検索できないという問題を解決しようとしていますが、それはまた別の話です！外観 / CSSの編集 / 追加CSS に行ったときにこのメッセージが表示されるため、ここに投稿しています。
” 保存するには修正が必要なエラーが1件あります。
サイトが破損する可能性がありますが、それでも更新しますか？
これは心配すべきことですか？
その下のボックスのテキストは次のように表示されます…
そして、ここに赤い句点があります
誰か助けてくれると嬉しいです。
ありがとうございます
WPBeginnerサポート
こんにちは、レベッカさん。
CSSをコピーしてテキストファイルに貼り付け、バックアップとして保存できます。次に、追加CSSボックス内のすべてを削除し、エラーが再び表示されるまでカスタムCSSを1行ずつ追加していきます。これにより、エラーの場所を特定し、修正することができます。
管理者
ジェームズ
これは無料アカウントではもう機能しません。CSSオプションはもうなく、関連プラグインをインストールするにはビジネスアカウントが必要です。
WPBeginnerサポート
こんにちは、ジェームズさん、
おそらくWordPress.comを使用しています。セルフホスト型WordPress.orgと無料のWordPress.comブログの違いに関するガイドをご覧ください。
管理者
scott
WPバージョン4.9より前は、カスタムCSS（WPカスタマイザーから）をコピーしてWindowsメモ帳に貼り付けることができました（フォーマットが維持されていました）。間違いがあった場合にバックアップとして保存するために、これを頻繁に行っていました。
メモ帳に貼り付けると、メモ帳での行ごとのフォーマットなしで、CSSがすべてまとめて実行されます。
何か原因や解決策のアイデアはありますか？メモ帳では既に「自動折り返し」モードを設定しています。
よろしくお願いします。
WPBeginnerサポート
スコットさん、こんにちは
コードをNotepad++のような他のテキストエディタに保存してみてください。問題が解決しない場合は、WordPressトラブルシューティングのヒントを試してみてください。
管理者
Joe MacMillan
このサイトは本当に良いです。私のサイトにはリンクの色がなかったので、このコードを使用しました /* 未訪問リンク 青 */
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
Hope this helps
管理者
Rob
素晴らしいサイトですね！
役立つ記事をすべてありがとうございます。
WordPressプレミアムプランについて質問があります。
以下のスクリプトをサイトに追加したいです。
var refTagger = { settings: { bibleVersion: “NKJV” }
これをカスタムCSSに追加できますか？
このプランではヘッダーやフッターにアクセスする機能がありません
ありがとう、
Rob
WPBeginnerサポート
Robさん、こんにちは。
いいえ、できません。WordPress.orgのセルフホスト型と無料のWordPress.comブログの違いに関するガイドをご覧ください。セルフホスト型WordPress.orgと無料WordPress.comブログの違い。
管理者
sammy
これは本当に素晴らしい記事です。自分のサイトのためにCSSを作成する方法を学び始める必要があります。
Thomas
Hello,
この機能は、マルチサイトWordPressネットワークのサイト管理者ではアクティブになりません。
このプラグインなどを使用して、サイト管理者のためにアクティブにすると、セキュリティ上の問題が発生すると思いますか？
ありがとうございます！
WPBeginnerサポート
トーマスさん、
プラグインを使用してカスタムCSSを追加できます。
管理者
Thomas
こんにちは、
はい、わかっています（非常に優れたSimple Custom CSSプラグインをすでに使用しています）が、WordPressに実装されているネイティブ機能を使用したいと考えています。
ただし、この機能はマルチサイトインストールでは、サイト管理者ではなくネットワーク管理者にのみ利用可能です。
サイト管理者がカスタマイザー（ネイティブWP機能を使用）で独自のカスタムCSSを追加できるように、権限は簡単に変更できます（このプラグインを参照してください：http://www.wordpress.org/plugins/multisite-custom-css/）。そして、これがセキュリティ上の問題を引き起こすかどうか（サイト管理者を信頼できないという仮定に基づいています）疑問に思っています。
WPBeginnerサポート
トーマスさん、
Sorry, we totally misunderstood your question
ご懸念は理解できます。そのため、この機能はオフになっています。オンにすると、ユーザーはフィルタリングされていないCSSを追加できるようになります。オフのままにしておくことをお勧めします。
ブライス
コードについてはあまり詳しくないので、変更を加えて「保存して公開」をクリックした場合、変更が気に入らなかった場合に元のコードに戻す方法はありますか、それとも復元したい場合に元のコードをコピーして保存する必要がありますか？
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
ヨス・シューアマンス
こんにちは。
かつては、WP管理画面の「外観」メニューからstyle.cssを編集することが可能でした。
WPマルチサイトでは、ネットワークのテーマサブメニュー経由でした。その機能は廃止されましたか？
乾杯、
ジョス
ジュディ
素晴らしい投稿、ありがとうございます！
これについて誰か助けてもらえませんか？CSS Heroでロゴを少しカスタマイズしました。その後、CSS Heroを無効にして、これらのコードの9つの文字列をそのままSimple Custom CSSプラグインにコピーしました。Simple Custom CSSを使ってロゴのCSS Heroカスタマイズを再現できると思いましたが、うまくいきません。
ページをリロードしてキャッシュをクリアしましたが、カスタマイズがまだ反映されません。なぜですか？
ありがとう、
ジュディ
ロビン
これは私のCSSスタイルシートにあるすべてです。 /* カスタムCSSへようこそ
この仕組みを学ぶには、
/* を参照してください。
彼のコードを削除して、新しいフォントコードを追加すればいいですか？助けてください????
WPBeginnerサポート
はい。これらは、新しいユーザーが開始するのに役立つコメントです。
管理者
Paul H.
素晴らしいプラグインです！！！
カスタムページを「スタイル」するために、組み込みのWPエディターで多くの時間を費やしましたが、うまくいきませんでした…
プラグインを探してみたところ、あなたのものを見つけました…数分でプラグインをインストールして有効化し、CSS を入力して更新をクリックし、カスタムページをリフレッシュしました…完璧です！
A+++
イアン
皆さん、こんにちは。
Simple custom CSSプラグインをインストールして有効化しました。ウェブページの一つに作成したテーブルの周りに枠線を付けたいと思っていました。
その結果、シンプルなカスタムCSSプラグインに次のコードを追加しました
table { border: 2px solid black; }
カスタムCSSを更新しましたが、何も起こりませんでした。ウェブサイトのテーブルに境界線が表示されません。
何か提案はありますか？
Regards
イアン
モリー・セッツァー
イアンさん、こんにちは。
おそらく、正しいCSSセレクターで呼び出せていないのでしょう。要素を取得するには、最も定義されたセレクターを使用してください。例えば、テーブルに「info」というクラスがある場合、より具体的な「table.info」で呼び出すことで要素に到達しやすくなります。HTMLで他のセレクターがないか確認してください。
ramneet
シェアしてくれてありがとう。WordPressを学ぶのに素晴らしい方法ですね。気に入りました。
Estee Peter
既存の特定のウェブサイトプラグイン経由でカスタム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; } }
Gary Zielke
カスタムCSSプラグインは個々のページで機能しますか？
つまり、テーマ全体ではなく、単一のページにスタイルを追加できますか？
ありがとう
WPBeginnerサポート
いいえ、個々のページでは機能しません。
管理者
トーリ・トラン
ありがとうございます ^^
Russell Bruce
CSSが何をするのか、そしてなぜそれが役立つのかを説明するのは有益ではないでしょうか
ジョーイ
ありがとうございます。もっと早く知っていればよかったです。ローカルで変更を加えているため、すべてのCSS変更をstyle.cssファイルで行ってきました。しかし、もし何らかの理由でGenesisが使用している特定のチャイルドテーマを更新した場合、これらの変更は失われるということでしょうか？Genesisがチャイルドテーマを更新したのを見たことがないのですが、Genesisを使い始めてまだ数ヶ月なので、特定のものをあちこち更新する可能性は十分にあると思います。今後は、特にサイトがライブの場合は、プラグインで変更を加えるつもりです。
スージー
好きなテーマを使用して「子テーマ」を作成してください。
子テーマは、あなたのウェブサイト固有のものになります。
変更はすべて子テーマのみで行ってください。
テーマデザイナーがテーマを更新する可能性がありますが、あなたの変更はそのまま残ります。（デザイナーの更新によっては、変更を微調整する必要があるかもしれませんが、それは稀です）。
ロドニー
素晴らしい記事です。
ここに追記したいことがあります。特にWordPressで動作しているサイトでは、カスタムCSSの構築/作成は簡単です。ほとんどのWordPressテーマは、追加のプラグインを作成または追加することなく、カスタムCSSの追加を通常サポートしています。
私も同意します。ここで最善の選択肢は子テーマを使用することです。
ありがとう