カスタム CSS を使用すると、WordPress サイトのスタイルを制御し、フォントや色からレイアウトまであらゆるものを調整できます。ここでは、WordPress にカスタム CSS を追加する方法について、ニーズに合わせてさまざまな方法をご紹介します。

方法1：WordPress内蔵のカスタムCSS機能を使う

WordPressには、ダッシュボードでカスタムCSSを追加できるオプションが組み込まれています。ちょっとした微調整に最適で、初心者にも優しいです。

1. カスタマイザーへのアクセス
   • ログインして 外観 > カスタマイズ.

2. 追加CSS」を選択します。
   • 左サイドバーで 追加CSS.CSSコードを入力するテキストボックスが表示されます。

3. カスタムCSSの追加
   • コードを入力してください。例えば

4. プレビューと公開
   • 変更のライブプレビューが表示されます。問題がなければ 出版.

最適:テーマファイルの編集は必要ありません。

方法2：子テーマのStyle.cssファイルを使用する方法

子テーマの スタイル.css ファイルを使用してください。こうすることで、テーマが更新された後でも、あなたの編集は安全に保たれます。

1. 子テーマの有効化
   • それでも使い始める必要がある場合は、子テーマを作成またはインストールしてください。プラグイン 子テーマ設定ツール 簡単です。

2. Style.cssファイルへのアクセス
   • で 外観 > テーマファイルエディタ子テーマの スタイル.css ファイル

3. CSSの追加
   • カスタムCSSを 下 ファイルの例

.custom-header { background-color: #2c3e50; color: #ffff; }.
.custom-button { background-color: #e74c3c; color: #ffff; padding：

4. 変更の保存
   • クリック 更新ファイル を保存します。

最適:アップデート後も残るべき、より大きなスタイルの変更。

方法3：プラグインでカスタムCSSを追加する方法

ファイルや子テーマの編集を避けたい場合は、プラグインでカスタムCSSを扱うことができます。これは複数のページでCSSを管理するのに最適です。

• シンプルなカスタムCSSとJS:軽量でCSSやJavaScriptの追加が簡単。
• ダブルPCコード:サイト全体またはページごとにCSSを追加します。
• サイトオリジンCSS:初心者のためのビジュアルエディタ

WPCodeの使用例：

1. WPCodeのインストール
   • こちらへ プラグイン > 新規追加 プラグインを検索します。 ダブルPCコードインストールし、アクティブにします。

2. を作成します。 新しいCSSスニペット
   • に向かいます。 コードスニペット > スニペットを追加.選択 CSSスニペット.

3. 配置の選択
   • CSSをサイト全体に適用するには サイト全体のヘッダー.

最適:テーマファイルに触れることなく、簡単にCSSを管理できます。

方法4：ページビルダー（Elementor、Divi）を使ってカスタムCSSを追加する方法

ElementorやDiviのようなページビルダーには、通常CSSオプションが組み込まれており、スタイルを簡単に管理できます。

Elementorで：

1. エレメントとアクセスを選択 アドバンス 設定
   • Elementor で要素を選択し アドバンス を検索します。 カスタムCSS (エレメンタル・プロ).

2. CSSコードの入力
   • セレクタキーワードを使用して、要素をターゲットにします。例

selector { background-color: #333; color: #fff; }.

Diviでは：

1. テーマオプションへ
   • に移動します。 Divi > テーマオプション > カスタムCSS.

2. CSSコードの入力と保存
   • カスタムCSSを追加して保存します。

最適 カスタムCSSに簡単にアクセスできるページビルダーをすでに使用している方。

方法5：FTPまたはコードエディタ経由でCSSを直接追加する方法

FTPに慣れていて、完全にコントロールしたい場合は、サーバー上で直接CSSファイルを編集することができます。

ステップ

1. FTPで接続
   • FTPクライアント（FileZillaなど）を使用してサイトに接続します。
2. テーマフォルダに移動
   • wp-content/themes/your-child-theme/に移動し、style.cssを開きます。

3. 編集とアップロード
   • カスタムCSSを追加し、保存してアップロードします。

最適:完全なコントロールを必要とする上級ユーザー。

よくある質問

1.カスタムCSSが機能しないのはなぜですか？

ブラウザをクリア キャッシュ キャッシュが更新をブロックしている可能性があります。

2.更新中にCSSが失われるのを防ぐにはどうすればよいですか？

を使用します。 子テーマ またはプラグインを使用して、親テーマのファイルを修正するのではなく、CSSを保存します。