WordPressブロックエディターの背景色を変更する方法

かつてWordPressで背景色を変更するには、コードを掘り下げて何も壊れないことを願う必要がありました。私たちはその日々をよく覚えています。それ以来、WordPressは大きく進歩し、ブロックエディターはこれまで以上にカスタマイズを容易にしました。

それでも、多くのウェブサイト所有者は、背景色をちょうど良い感じにするのに苦労しています。

複数のWordPressサイトを運営し、何千人ものユーザーを支援してきた経験から、これらの変更を処理するための最もシンプルで信頼性の高い方法を学びました。

このガイドでは、WordPressブロックエディターで背景色を変更する方法を、あらゆるテーマとスキルレベルで機能する方法で正確に説明します。

WordPressでブロックエディターの背景色を変更する理由

WordPressのブロックエディタの背景色を変更したい理由はいくつか考えられます。

例えば、ほとんどのモダンなWordPressテーマは、ブロックエディターとライブウェブサイトで同じ背景色を使用しています。これには、OceanWP、GeneratePressなどが含まれます。

ただし、WordPressテーマで同じ色が使用されていない場合、エディター内の投稿の外観は、ユーザーがライブウェブサイトで表示するものとはかなり異なります。

もう一つの理由は、単に個人的な快適さかもしれません。

何時間も執筆に費やす場合、明るい白い画面を見つめるのは目に負担がかかります。エディターの背景をより柔らかい色に変更すると、作業時間がより快適になります。

それでは、WordPressエディターの背景色を簡単に変更する方法を見ていきましょう。

WordPressエディターの背景色を変更する方法

テーマのfunctions.phpファイルにカスタムコードを追加することで、WordPressエディターの背景色を変更できます。

ただし、コードのわずかなエラーでもウェブサイトが破損し、アクセスできなくなる可能性があります。

そのため、WPCodeプラグインの使用をお勧めします。

徹底的なテストの結果、WordPressウェブサイトにカスタムコードを追加する最も簡単で安全な方法であると結論付けました。詳細については、WPCodeのレビューをご覧ください。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

有効化したら、WordPress管理画面のサイドバーからコードスニペット » +スニペットを追加ページにアクセスしてください。

ここから、「カスタムコードを追加（新規スニペット）」オプションの下にある「スニペットを使用」ボタンをクリックします。

これにより、「カスタムスニペットの作成」ページに移動します。ここで、コードスニペットの名前を入力することから始めることができます。これはあなたのためだけのものです。コードを識別するのに役立つものであれば何でも構いません。

次に、画面右上にある「コードタイプ」メニューをクリックした後に表示されるプロンプトから「PHPスニペット」を選択します。

その後、次のコードを「コードプレビュー」ボックスにコピー＆ペーストしてください。

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

このコードスニペットは、2つの簡単なことを行います。add_action部分は、WordPressにカスタムスタイリングを管理画面のフッターに追加するように指示します。

その中で、CSSコードはブロックエディターのメインコンテナ（.editor-styles-wrapper）をターゲットにし、そのbackground-colorを新しい16進数コードに設定します。

それが完了したら、貼り付けたばかりのPHPスニペットで次のコードを探してください：

background-color: #bee0ec;

次に、背景色のオプションの隣に、好みの色の16進数コードを追加する必要があります。

16進数コードを使いたくない場合は、代わりに「white」や「blue」のような基本的な色名を使用できます。

その後、「挿入」セクションまでスクロールダウンし、「自動挿入」オプションを選択します。

次に、コードスニペットの「場所」をドロップダウンメニューから「管理画面のみ」に選択する必要があります。

その後、ページの上部に戻り、「非アクティブ」スイッチを「アクティブ」に切り替えます。

最後に、「スニペットを保存」ボタンをクリックして変更を保存することを忘れないでください。

次に、管理画面サイドバーからブロックエディターにアクセスしてください。

PHPのコードスニペットを追加した後、当サイトのブロックエディターは以下のようになりました。

動画チュートリアル

動画で確認したい場合は、WordPressブロックエディターの背景色を変更する方法に関するYouTubeチュートリアルをご覧ください。

ボーナス方法：ライブウェブサイトの背景色を変更する

ライブウェブサイトで訪問者が見る背景色を変更したい場合、その方法はWordPressテーマによって異なります。

WordPressには、クラシックテーマと新しいブロックテーマの2種類があります。両方の方法をご紹介します。

方法1：テーマカスタマイザーを使用する（クラシックテーマの場合）

ほとんどのクラシックテーマでは、色の変更にテーマカスタマイザーを使用します。WordPressダッシュボードから外観 » カスタマイズに移動することでアクセスできます。

カスタマイザーが読み込まれたら、「色」、「色とダークモード」、またはそれに類するセクションを探してください。これらの設定の正確な名前と場所は、テーマによって異なります。

その中に、「背景色」のオプションがあり、カラーピッカーを使用して変更できます。結果に満足したら、「公開」ボタンをクリックして保存してください。

方法2：フルサイトエディターを使用する（ブロックテーマの場合）

最新のブロックテーマを使用している場合は、フルサイトエディターでこれらの変更を行います。アクセスするには、管理サイドバーの外観 » エディターに移動します。

エディターで、右側にある「スタイル」アイコン（半分塗りつぶされた円のような形をしています）をクリックします。これにより、グローバルスタイルパネルが開きます。

ここから、「色」をクリックし、「背景」オプションを選択します。

サイト全体の新しい背景色を選択できるようになりました。エディターでライブプレビューが表示され、完了したら「保存」をクリックできます。

両方の方法の詳細なチュートリアルについては、初心者向けガイド「WordPressウェブサイトの色のカスタマイズ方法」をご覧ください。

エディターの背景色を変更することに関するよくある質問

WordPressエディターの背景色を変更することについて、読者からよく寄せられる質問を以下に示します。

このコードスニペットは私のウェブサイトを遅くしますか？

いいえ、この特定のコードはウェブサイトを遅くしません。WPCodeスニペットは「管理者のみ」の領域でのみ読み込まれるように設定されているため、サイトのフロントエンドに追加のコードは読み込まれません。ブロックエディターをアクティブに使用しているログインユーザーにのみ読み込まれます。

グラデーションや画像などをエディターの背景として使用できますか？

はい、できます。CSSコードに小さな変更を加える必要があります。background-colorの代わりに、backgroundプロパティを使用します。

たとえば、簡単な線形グラデーションを追加する場合、スニペット内のCSSは次のようになります。

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

オンラインCSSグラデーションジェネレーターを使用して、より複雑なスタイルを作成できます。

コードが機能しませんでした。最初に何をチェックすべきですか？

色が変更されない場合は、まずWPCodeスニペットの設定を再確認してください。一番上のトグルが「アクティブ」に設定されており、挿入場所が「管理者のみ」に設定されていることを確認してください。

また、特にCSSセレクター（.editor-styles-wrapper）と16進数カラーコードに、コード自体のタイプミスがないか確認してください。

使用したい特定の色に対応する16進数コードを見つけるにはどうすればよいですか？

最も簡単な方法は、オンラインのカラーピッカーツールを使用することです。Googleのカラーピッカー、HTMLカラーコード、Adobe Colorなどのウェブサイトでは、視覚的に任意のカラーを選択できます。これらのツールは、コードスニペットにコピー＆ペーストできる正しい16進数コード（例：#1a457c）を即座に提供します。

テーマを更新した場合、ブロックエディタの背景色の変更は失われますか？

いいえ、変更は失われません。これが、テーマのfunctions.phpファイルを直接編集するのではなく、WPCodeのようなプラグインを使用する最大の利点です。コードスニペットはテーマとは独立して保存されるため、テーマの更新後も引き続き機能します。

この記事がお役に立ち、WordPressエディターの背景色を簡単に変更する方法を学べたことを願っています。また、WordPressでフルスクリーンエディターを無効にする方法に関する究極のガイドをご覧になるか、WordPressに最適なGutenbergブロックプラグインをご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。