WordPressブロックエディターの背景色をカスタマイズする方法

WordPressの管理者用ブロックエディターの背景色をカスタマイズしたいですか？

カスタム・クライアントのプロジェクトに携わる際、WordPressのGutenbergエディターの背景色をクライアントのブランドカラーに一致するように変更したい場合があります。

この投稿では、WordPressの管理エリアのブロックエディターの背景色を簡単にカスタマイズする方法を紹介します。

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

WordPressのブロックエディターの背景色を変更したい理由はいくつかあるでしょう。

例えば、Astra、OceanWP、GeneratePressなど、最近のWordPressテーマのほとんどは、ブロックエディターの背景色をライブサイトと同じにしています。

しかし、あなたのWordPressテーマが同じ色を使用していない場合、エディター内の投稿の外観は、ユーザーがライブサイトで見るものとはまったく異なるものになります。

背景色を変えるもう一つの理由は、個人的な好みかもしれない。

例えば、初期設定では、ブロックエディターは真っ白な背景を使用しています。ユーザーによっては、長時間白い画面を見続けることにストレスを感じるかもしれません。眼精疲労は多くの人にとって現実的な問題であり、初期設定の白い背景は目に優しくない。

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

動画チュートリアル

文章での説明がお望みなら、このまま読み進めてほしい。

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

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

しかし、コードにわずかなエラーがあっただけでも、サイトが壊れてアクセスできなくなる可能性がある。

そのため、WPCode プラグインの使用をお勧めします。これは、市場で最高のWordPressコードスニペットプラグインであり、WordPressサイトにカスタムコードを追加する最も簡単で安全な方法です。

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

有効化した後、WordPress管理サイドバーからCode Snippets ” +Add Snippetページにアクセスしてください。

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

カスタム・スニペットの作成」ページが表示されますので、コード・スニペットの名前を入力してください。これはあなたのためのもので、コードを識別するのに役立つものであれば何でもかまいません。

次に、画面右端のドロップダウンメニューから「コードタイプ」として「PHPスニペット」を選択します。

その後、以下のコードをコピー＆ペーストして「コード・プレビュー」ボックスに入れてください：

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

そうしたら、先ほど貼り付けたPHPスニペットの中から次のコードを探してください：

background-color: #bee0ec;

次に、背景色オプションの横に、お好みの色の16進コードを追加する必要があります。16進コードを使いたくない場合は、代わりに「白」や「青」といった基本的な色の名前を使うことができます。

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

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

その後、ページのトップに戻り、「Inactive」スイッチを「Active」に切り替える。

最後に、’Save Snippet’ボタンをクリックして変更を保存することをお忘れなく。

さて、管理サイドバーからブロックエディターにアクセスしよう。

これが、PHPコード・スニペットを追加した後のブロックエディターのサイト上の様子です。

ボーナス：WordPressの背景色を変更する

フロントエンドの背景色を変更したい場合は、WordPressのダッシュボードから外観 ” カスタマイザー 画面にアクセスして変更できます。

これでテーマカスタマイザーが起動しますので、左カラムの「カラム＆ダークモード」タブをクリックしてください。お使いのテーマによってカスタマイザーの表示が異なる場合がありますのでご注意ください。

サイドバーに新しいパネルが開きますので、そこで’Select Color’オプションをクリックしてください。

画面上にカラーピッカーが表示されますので、お好みの背景色を選択してください。設定が完了したら、上部にある「公開する」ボタンをクリックし、設定を保存することを忘れないでください。

テーマ・カスタマイザーから、テキストの色、ハイライトの色、ボタンの色などを変更することもできる。ただし、ブロックテーマを使用している場合は、フルサイトエディターでこれらの変更を行う必要があります。

これらすべての詳細については、WordPressサイトの色をカスタマイズする方法についての初心者向けガイドをご覧ください。

WordPress エディターの背景色を簡単に変更する方法について、この投稿がお役に立てば幸いです。また、WordPressの最も便利で時間を節約できるショートカットに関する究極のガイド、またはWordPressページビルダープラグインのトップピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.