Custom CSS gives you control over your WordPress site’s style, letting you adjust everything from fonts and colors to layouts. Here’s a guide on how to add custom CSS to WordPress using different methods to fit your needs.
Method 1: Using WordPress’ Built-in Custom CSS Feature
WordPress has a built-in option for adding custom CSS right in the dashboard. It’s ideal for minor tweaks and beginner-friendly.
- カスタマイザーへのアクセス
- ログインして 外観 > カスタマイズ.
- Select “Additional CSS”
- 左サイドバーで 追加CSS.CSSコードを入力するテキストボックスが表示されます。
- カスタムCSSの追加
- コードを入力してください。例えば
- プレビューと公開
- You’ll see a live preview of changes. Once you’re happy, click 出版.
最適:テーマファイルの編集は必要ありません。
Method 2: Using the Child Theme’s Style.css File
It’s better to use a child theme’s スタイル.css ファイルを使用してください。こうすることで、テーマが更新された後でも、あなたの編集は安全に保たれます。
- 子テーマの有効化
- それでも使い始める必要がある場合は、子テーマを作成またはインストールしてください。プラグイン 子テーマ設定ツール 簡単です。
- Style.cssファイルへのアクセス
- で Appearance > Theme File Editor, select your child theme’s スタイル.css ファイル
- CSSの追加
- カスタムCSSを 下 ファイルの例
.custom-header { background-color: #2c3e50; color: #ffff; }.
.custom-button { background-color: #e74c3c; color: #ffff; padding：- 変更の保存
- クリック 更新ファイル を保存します。
最適:アップデート後も残るべき、より大きなスタイルの変更。
方法3：プラグインでカスタムCSSを追加する方法
If you’d rather avoid editing files or child themes, plugins can handle custom CSS. This is great for managing CSS across multiple pages.
- シンプルなカスタムCSSとJS:軽量でCSSやJavaScriptの追加が簡単。
- ダブルPCコード:サイト全体またはページごとにCSSを追加します。
- サイトオリジンCSS:初心者のためのビジュアルエディタ
WPCodeの使用例：
- WPCodeのインストール
- こちらへ プラグイン > 新規追加 プラグインを検索します。 ダブルPCコードインストールし、アクティブにします。
- を作成します。 新しいCSSスニペット
- に向かいます。 Code Snippets > Add Snippet.選択 CSSスニペット.
- 配置の選択
- CSSをサイト全体に適用するには サイト全体のヘッダー.
最適:テーマファイルに触れることなく、簡単にCSSを管理できます。
方法4：ページビルダー（Elementor、Divi）を使ってカスタムCSSを追加する方法
ElementorやDiviのようなページビルダーには、通常CSSオプションが組み込まれており、スタイルを簡単に管理できます。
Elementorで：
- エレメントとアクセスを選択 アドバンス 設定
- Elementor で要素を選択し アドバンス を検索します。 カスタムCSS (エレメンタル・プロ).
- CSSコードの入力
- セレクタキーワードを使用して、要素をターゲットにします。例
selector { background-color: #333; color: #fff; }.Diviでは：
- テーマオプションへ
- に移動します。 Divi > Theme Options > Custom CSS.
- CSSコードの入力と保存
- カスタムCSSを追加して保存します。
最適 カスタムCSSに簡単にアクセスできるページビルダーをすでに使用している方。
方法5：FTPまたはコードエディタ経由でCSSを直接追加する方法
If you’re familiar with FTP and want complete control, you can edit CSS files directly on the server.
ステップ
- FTPで接続
- FTPクライアント（FileZillaなど）を使用してサイトに接続します。
- テーマフォルダに移動
- wp-content/themes/your-child-theme/に移動し、style.cssを開きます。
- 編集とアップロード
- カスタムCSSを追加し、保存してアップロードします。
最適:完全なコントロールを必要とする上級ユーザー。
よくある質問
1. Why isn’t my custom CSS working?
ブラウザをクリア キャッシュ キャッシュが更新をブロックしている可能性があります。
2.更新中にCSSが失われるのを防ぐにはどうすればよいですか？
を使用します。 子テーマ or plugin to store CSS rather than modifying the parent theme’s files.