WordPressサイトにカスタムCSSを追加する方法：徹底ガイド

カスタムCSSは、WordPressでウェブサイトを構築・管理する際の強力なツールであり、標準のオプションを超えて、ウェブサイトのレイアウトや外観を自由に調整することができます。カスタムCSSを使用することで、ウェブサイトのデザインを完全にコントロールすることができ、フォントや色からスペーシングやアニメーションまで、あらゆるものをパーソナライズすることができます。

この記事では、WordPressウェブサイトにカスタムCSSを簡単に追加する方法を詳しく説明します。テーマファイルを編集する必要がない.

なぜWordPressにカスタムCSSを追加するのか？

CSS（カスケーディング・スタイル・シート）は、HTMLと連動してウェブサイト要素の外観を定義するのに役立つデザイン言語です。CSSを使用すると、要素の色、サイズ、レイアウト、表示を制御して、高度にパーソナライズされたデザイン効果を実現できます。

カスタムCSSを追加することで、ウェブサイトのデザインや外観をカスタマイズすることができます。例えば、サイト全体で同じ色を使用する代わりに特定のページの背景色を変更するなど、簡単な数行のコードでWordPressテーマの外観を簡単に変更できます。

WordPressウェブサイトにカスタムCSSを追加する3つの方法

WordPressサイトにカスタムCSSを追加する3つの方法をご紹介します。

方法1：テーマカスタマイザーを使ってカスタムCSSを追加する

WordPress 4.7では、WordPressの管理エリアから直接カスタムCSSを追加することができ、非常に簡単で、ライブプレビューで変更の効果をすぐに確認することができます。

1. テーマカスタマイザーへ::
   • WordPressダッシュボードから外観 " " カスタマイズページに移動します。
   • WordPressテーマカスタマイザーのインターフェイスが起動し、左側のパネルで様々なカスタマイズオプションを見つけながら、リアルタイムでウェブサイトをプレビューすることができます。

2. カスタムCSSの追加::
   • 左のパネルで、「その他のCSS」タブを見つけ、クリックする。
   • このタブでは、カスタムCSSコードを入力できるシンプルなボックスが表示されます。

3. 変更をリアルタイムでプレビューして公開::
   • 有効なCSSルールを入力すると、すぐにサイトのライブプレビューで効果が表示されます。
   • 変更に満足したら、一番上の"ポスト「をクリックして変更を保存します。

銘記テーマカスタマイザーで追加したカスタムCSSは、現在のテーマにのみ適用されます。他のテーマに変更する場合は、このCSSコードをコピーして新しいテーマに貼り付ける必要があります。

方法2：使用 ダブルPCコード カスタムCSSを追加するプラグイン

テーマ・カスタマイザーの制限のひとつは、そのCSSコードが現在のテーマでしか機能しないことです。テーマを変更した場合、カスタムコードを再度コピー＆ペーストする必要があるかもしれません。この問題を避けるために、WPCodeプラグインを使用することができます。

1. WPCodeプラグインのインストールと有効化::
   • WordPressのプラグインリポジトリからWPCodeプラグインをインストールし、有効化します。このプラグインを使用すると、WordPressウェブサイトにカスタムコードを追加することができ、任意のテーマ間のシームレスな切り替えをサポートしています。
2. カスタムCSSスニペットの追加::
   • プラグインが有効化されたら、WordPressダッシュボードのCode Snippets ""+ Add New Code "ページにアクセスします。
   • スニペットに識別タイトルを追加し、カスタムCSSコードをコードプレビューボックスに入力または貼り付けます。
   • Code Type "ドロップダウンメニューから "CSS Code Snippet "を選択します。

3. 挿入方法の選択::
   • サイト全体にコードを適用したい場合は、"自動挿入「オプション
   • 特定のページや投稿にのみこのコードを使用するには、"ショートコード方法

4. コードスニペットを有効にして保存する::
   • Activate」スイッチをオンに切り替え、「Save Code Snippet」ボタンをクリックします。これで、テーマの変更を気にすることなく、ウェブサイトのあらゆる部分でカスタムCSSを利用できるようになります。

方法3：フルサイトエディタ（FSE）でカスタムCSSを追加する

フルサイトエディタ（FSE）は、ブロックエディタを使ってウェブサイト全体のレイアウトやデザインを編集できるWordPressの新機能です。この機能は現在一部のテーマでしか利用できませんが、ユーザーにより柔軟なカスタマイズオプションを提供します。

1. テーマカスタマイザーへ::
   • まず、お使いのテーマがフルサイトエディターをサポートしていることを確認する必要があります。WordPressの管理者にログインした後、以下のURLをコピーしてブラウザに貼り付けます。「example.com」をあなたのウェブサイトのドメイン名に置き換えてください：https://example.com/wp-admin/customize.php
   • これはテーマカスタマイザーの制限バージョンに移動します。追加CSS「オプション
2. カスタムCSSの追加::
   • Extra CSS」タブをクリックし、CSSコードを入力します。
   • コードを入力したら、"Publish "ボタンをクリックして変更を保存します。

カスタムCSSプラグインの使用とテーマへのCSSの追加

上記の方法は初心者におすすめです。上級者の中には、テーマファイルに直接カスタムCSSを追加したい人もいるかもしれませんが、カスタムCSSスニペットを直接親テーマというのも、テーマを更新する際にこれらの変更が上書きされる可能性があるからです。

使用上の注意サブテーマカスタムCSSを保存する.子テーマの作成は初心者にとっては少々複雑かもしれないが、カスタムコードを管理するには実に安全な方法だ。

その他のプラグイン・オプション

手作業でCSSコードを書きたくない場合は、いくつかのプラグインを使用してプロセスを簡素化することを検討してください：

1. CSSヒーローCSS Heroは、コードを一行も書かずにWordPressウェブサイトのほぼすべてのCSSスタイルを編集できる強力なプラグインです。CSS Heroを使えば、ページ要素の余白、フォント、色などを簡単に調整できます。
2. シードプロ: WordPressのカスタムテーマやログインページをドラッグ＆ドロップで作成できるウェブサイトビルダープラグインです。また、グローバルなCSS設定を編集することができます。コードへの直接アクセスを望まないユーザー.

概要

WordPressサイトにカスタムCSSを追加することで、サイトのデザインを完全にコントロールし、フォントや色からレイアウトやアニメーションまで、あらゆるものをパーソナライズすることができます。Theme Customiser、WPCodeプラグイン、Full Site Editor (FSE)のいずれを使用するかにかかわらず、WPを使用して独学でウェブサイトを構築する場合、あなたのスキルレベルとニーズに合ったソリューションがあります。