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.

1. Access the Customizer
   • Log in and go to Appearance > Customize.

2. Select “Additional CSS”
   • In the left sidebar, click 追加CSS. A text box will appear where you can enter your CSS code.

3. Add Your Custom CSS
   • Type in your code. For example:

4. プレビューと公開
   • You’ll see a live preview of changes. Once you’re happy, click 出版.

Best For: Simple adjustments, no theme file edits needed.

Method 2: Using the Child Theme’s Style.css File

It’s better to use a child theme’s スタイル.css file for more significant changes. This way, your edits stay safe even after theme updates.

1. Enable a Child Theme
   • If you still need to start using one, create or install a child theme. Plugins like Child Theme Configurator make it easy.

2. Access the Style.css File
   • In Appearance > Theme File Editor, select your child theme’s スタイル.css ファイル

3. Add Your CSS
   • Add your custom CSS at the bottom of the file. Example:

.custom-header { background-color: #2c3e50; color: #ffffff; }
.custom-button { background-color: #e74c3c; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

4. 変更の保存
   • クリック Update File to save.

Best For: Bigger style changes that should stick around after updates.

Method 3: Adding Custom CSS with a Plugin

If you’d rather avoid editing files or child themes, plugins can handle custom CSS. This is great for managing CSS across multiple pages.

• Simple Custom CSS and JS: Lightweight and easy to add CSS and JavaScript.
• ダブルPCコード: Adds CSS site-wide or per page.
• SiteOrigin CSS: Visual editor for beginners.

Example Using WPCode:

1. Install WPCode
   • こちらへ プラグイン > 新規追加 プラグイン, search for ダブルPCコード, install, and activate.

2. を作成します。 New CSS Snippet
   • Head to Code Snippets > Add Snippet. Choose CSS Snippet.

3. 配置の選択
   • For CSS to work site-wide, select Site-Wide Header.

Best For: Easy CSS management without touching theme files.

Method 4: Adding Custom CSS via Page Builders (Elementor, Divi)

Page builders like Elementor and Divi usually have CSS options built-in, making it simple to manage styles.

In Elementor:

1. Select Element and Access アドバンス 設定
   • In Elementor, select an element, go to アドバンス settings, and find カスタムCSS (エレメンタル・プロ).

2. Enter CSS Code
   • Use the selector keyword to target the element. Example:

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

In Divi:

1. Go to Theme Options
   • に移動します。 Divi > Theme Options > Custom CSS.

2. Enter and Save CSS Code
   • Add your custom CSS and save.

Best For Those already using page builders with easy access to custom CSS.

Method 5: Directly Adding CSS via FTP or Code Editor

If you’re familiar with FTP and want complete control, you can edit CSS files directly on the server.

ステップ

1. Connect via FTP
   • Use an FTP client (like FileZilla) to connect to your site.
2. Navigate to the Theme Folder
   • Go to wp-content/themes/your-child-theme/ and open style.css.

3. Edit and Upload
   • Add your custom CSS, save, and upload.

Best For: Advanced users needing complete control.

よくある質問

1. Why isn’t my custom CSS working?

Clear your browser cache or any site caching plugins, as caching might be blocking updates.

2. How do I prevent CSS from being lost during updates?

Use a child theme or plugin to store CSS rather than modifying the parent theme’s files.