WordPressでカスタムCSSを追加する5つの実践的な方法とFAQ

ワードプレスに追加するカスタムCSS は、ウェブサイトの外観とスタイルを完全に制御するための非常に実用的な方法です。カスタム CSS は、WordPress ウェブサイトのカスタマイズにおいて非常に柔軟で強力なツールであり、ウェブサイトのビジュアル、レイアウト、ユーザーエクスペリエンスを細かく制御し、モバイル表示を強化するのに役立ちます。フォントを微調整したい、カラースキームを変更したい、レイアウトを最適化したいなど、カスタムCSSはこれらのニーズを実現するのに役立ちます。ここでは、WordPress サイトにカスタム CSS を簡単に追加する一般的な方法をいくつか紹介します。

方法1：WordPressに付属している「カスタムCSS」機能を使います。

WordPressには、バックエンドでカスタムCSSを直接追加できるオプションが組み込まれています。この方法は、初心者やちょっとした調整が必要な場合にシンプルで使いやすい方法です。具体的な手順は以下の通りです：

1. カスタム」設定へ
   • WordPressの管理画面にログインし、次のページに移動します。 外観 > カスタマイズ.

2. 追加CSS "オプションを選択します。
   • 左側のメニューから 追加のCSS開くをクリックしてください。CSSコードを直接追加できる入力ボックスが表示されます。

3. カスタムCSSの入力
   • テキストボックスにCSSコードを入力してください。例
   • このコードでは、ページの背景色を変更し、第1レベルの見出しの色とサイズを調整します。

body { background-color: #f4f4; } h1 { color: #333333; font-size: 2.5em; }.

4. ライブプレビューとパブリッシング
   • WordPressのカスタマイズ機能は、CSSの変更をリアルタイムでプレビューします。変更が正しいことを確認したら ポスト ボタンをクリックして変更を保存します。

バンテージ::
この方法はシンプルで、ちょっとしたスタイルの調整に適しており、テーマファイルの変更を伴わないため、テーマの更新時にコードが失われることはありません。

適用シナリオ::
少量のCSSを素早く簡単に追加したいユーザーにとって、サイトの外観にちょっとした調整が必要な場合に特に適しています。

方法2：子テーマのstyle.cssファイルを使う

サイトの外観をより深くカスタマイズしたい場合、または大規模な微調整が必要な場合は、子テーマを使用することをお勧めします。 スタイル.css この利点は、テーマが更新されても、変更したCSSコードが失われないことです。以下はその手順です：

1. 子テーマの有効化
   • テーマが更新されたときにカスタムコードが上書きされるのを避けるためにサブテーマ.まだ子テーマがない場合は、子テーマをインストールするか、プラグイン ( 子テーマ設定ツール)急速な生成。
2. style.cssファイルを開きます。
   • WordPressの管理画面のバックエンドに移動し、次の場所に移動します。 外観 > テーマファイルエディタのサブトピックを選択します。 スタイル.css ファイルです。これは子テーマのメインのスタイルシートファイルです。

3. カスタムCSSの追加
   • ある スタイル.css ファイルの一番下にカスタムCSSコードを追加します：
   • このコードは カスタムヘッダー クラスは背景とフォントの色を設定し、背景とフォントの色を カスタムボタン クラスは角丸のボタンスタイルをデザインします。

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

3. 変更を保存する
   • エラーがないことを確認したら 更新された資料 をクリックして変更を保存します。

銘記する::
親テーマのCSSファイルを直接変更すると、テーマが更新されたときに変更内容が上書きされる可能性があります。

適用シナリオ::
ウェブサイトのスタイルを劇的に調整する必要があるユーザー、特に開発者や上級ユーザーにとって理想的な子テーマは、柔軟で安全なカスタマイズ方法です。

方法3：プラグインを使用してカスタムCSSを追加します。

コードファイルを編集したくない場合、または子テーマを使用したくない場合、プラグインに頼ることは簡単で効率的なオプションです。この方法は、複数ページのパーソナライズが必要なユーザーに適しています。ここでは、人気のあるプラグインとその使用手順を紹介します：

よく使われるプラグイン

• シンプルなカスタムCSSとJS: CSSとJavaScriptを追加して簡単に操作できる軽量プラグインです。
• WPコードウェブサイト全体、特定のページ、特定の投稿にカスタムCSSを追加できます。
• サイトオリジンCSSCSSに不慣れなユーザーにも直感的なビジュアルエディタを提供します。

ステップ1：WPCodeプラグインのインストール

1. プラグインライブラリへのアクセス
   • WordPressのバックエンドにログインし、次のページに移動します。 プラグイン > 新規プラグインのインストール.
2. WPCコードを検索
   • 検索バーに "WPCコード"、見つける WPCode - ヘッダーとフッターの挿入 + カスタムコードスニペット プラグイン。

3. プラグインをインストールして有効化する
   • 打込む 取り付けプラグインを有効にしてください。

ステップ2：新しいCSSコードスニペットの作成

1. WPCodeの管理ページへ
   • プラグインを有効化した後、次の場所に移動します。 コードスニペット > スニペットを追加.

2. コードタイプを選択
   • WPCodeが提供するコード・スニペット・テンプレート・ライブラリで カスタムコードの追加（新しいスニペット） 次に CSSスニペット テンプレート

• 挿入位置の選択
  • 場所の挿入」オプションで、以下を選択します。 サイト全体のヘッダー もしかしたら サイト全体のフッター(ヘッダーに追加することをお勧めします）。

アプローチ4：テーマビルダー(エレメンタ(Diviなど）でカスタムCSSを追加できます。

の使用について エレメンタDiviなどのテーマビルダーをお使いの方は、これらのツールにCSSアドイン機能がついていることが多いので、使いやすいと思います。

ElementorへのCSSの追加

1. エレメントを選択し、「詳細設定」に進みます。
   • 開く Elementor ウェブページエディターでCSSを追加したい要素を選択し、"ハイレベル「タブで"カスタムCSS「オプション エレメンタル・プロ (提供）。

2. CSSコードの入力
   • 利用する セレクタ 現在の要素を選択します：

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

DiviへのCSSの追加

1. テーマオプションへ
   • ワードプレスのバックエンドで Divi > テーマオプション > カスタムCSS.
2. CSSコードを入力し、保存します。
   • カスタムCSSコードを入力したら、「保存」をクリックします。

バンテージ::
特に高度なデザインツールのユーザーにとっては、エディタを離れることなくCSSを簡単に管理できます。

適用シナリオ::
すでにElementorやDiviなどのビルダーを使用しているユーザーにとって、この方法は便利で、プラグインを必要としません。

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

カスタマイズのニーズが高く、FTPやコード編集ツールに慣れている場合は、テーマファイル内のCSSを直接編集することができます。

動く

1. FTPへの接続
   • FileZillaなどのFTPクライアントを使用してWebサーバーに接続します。
2. テーマフォルダを探します
   • 入る wp-content/themes/your-child-theme/ フォルダで スタイル.css ドキュメンテーション
3. 編集とアップロード
   • 見せる スタイル.css ファイルにカスタムCSSを追加し、保存してアップロードします。

バンテージ::
高度な開発者のために、ドキュメントとコードを完全に制御します。

適用シナリオ::
多くのスタイル変更を必要とし、FTP操作に精通している上級ユーザー。

一般的な問題

1.カスタムCSSが機能しないのはなぜですか？
キャッシュの問題かもしれません。ブラウザのキャッシュやウェブサイトのキャッシュプラグインをクリアしてみてください。

2.テーマの更新時にカスタムCSSが失われるのを防ぐにはどうすればよいですか？
CSSを保存し、更新によるコードの上書きを避けるために、子テーマまたはプラグインを使用することをお勧めします。