デフォルトのWordPress管理画面のカラースキームは機能的ですが、少し退屈に感じられるかもしれません。そのため、WordPressで管理画面のカラースキームを変更したい場合があります。
WordPress管理画面の配色を変更すると、自分やチームのためにカスタムダッシュボードを作成できます。配色はお使いのブランドのデザインに合わせたり、単にお気に入りの色を使用したりできます。
私たちのウェブサイトとクライアントのウェブサイトの両方で管理者カラー配色を変更する実験を行ってきましたが、ワークフローとユーザーエクスペリエンスに大きな影響を与える可能性があることがわかりました。
この記事では、WordPressで管理画面のカラースキームを簡単に変更する方法をご紹介します。
WordPressで管理画面の配色を変更する理由
WordPressのデフォルトの管理画面の配色がお好みでない場合は、簡単に好きな配色に変更できます。
また、WordPress テーマのデザインに合わせて配色を変更したり、ダークモード機能を追加したりすることもできます。
これは、ユーザーがあなたのサイトにログインでき、あなたのウェブサイトと管理ダッシュボードで同様の体験を提供したい会員サイトやオンラインストアを持っている場合に役立ちます。
ライブサイトと区別しやすくするために、ステージングサイトに別の管理配色を使用することもできます。
それを踏まえて、WordPressで管理画面のカラースキームを変更するいくつかの方法をご紹介します。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用できます。
WordPressのデフォルト設定で管理画面のカラースキームを変更する方法
WordPressには、WordPress管理画面用に、あらかじめ決められたいくつかのカラーパレットから選択できる組み込み機能があります。
管理画面の配色を変更するには、WordPress管理ダッシュボードにログインし、**ユーザー » プロフィール**に移動するだけです。
その後、「管理カラー配色」セクションで、ラジオボタンをクリックして新しいカラー配色を選択します。
デフォルト、ライト、モダンなど、9種類のカラー配色から選択できます。
オプションをクリックするたびに、配色が自動的に変更されます。
気に入ったカラースキームを選択したら、ページの下部までスクロールして「プロフィールを更新」ボタンをクリックする必要があります。
WordPressウェブサイトで、他の登録ユーザーの管理画面の配色も制御できます。
これを行うには、ユーザー » 全ユーザーに移動し、ユーザーにカーソルを合わせて「編集」ボタンをクリックします。
次に、上記と同じプロセスに従って、そのユーザーの管理画面のカラースキームを変更します。
完了したら、ページ下部にある「プロフィールを更新」ボタンをクリックしてください。
WordPressでカスタム管理カラースキームを作成する方法
管理画面のカラーオプションをさらに増やしたい場合は、カスタムカラーを作成してWordPressブログにアップロードできます。
これを行うには、無料のWordPress Admin Colorsウェブサイトにアクセスし、「作成開始」ボタンをクリックします。
次に、「カラー配色名」ボックスに名前を入力します。
この名前は、WordPressの管理画面に新しいカラーオプションとして表示されます。
その後、「カラーを選択」セクションのカラーオプションをクリックすることで、カラー スキームを完全にカスタマイズできます。
既存の色を変更するには、色をクリックしてポップアップから新しい色を選択します。カラーピッカーのどこかをクリックするか、特定の色の場合は16進コードを入力できます。
カラーテーマのカスタマイズが完了したら、ページ下部にある「カラーテーマを生成」ボタンをクリックします。
これにより、WordPressに追加する必要のあるカラースキームコードが作成されます。
次のページには、2つの異なるコードファイルがあります。
CSSファイルをダウンロードし、コードスニペットをコピーして、お気に入りのテキストエディタに貼り付ける必要があります。これらをWordPressファイルに追加します。
これが初めての場合は、WordPressでコードをコピー＆ペーストする方法に関するガイドをご覧ください。
コードスニペットは、functions.php ファイルに追加するか、コードスニペットプラグインを使用して追加できます。
このチュートリアルでは、コードスニペットプラグインであるWPCodeを使用します。これは、WordPressサイトにコードスニペットを追加する最も簡単で初心者向けの最も簡単な方法です。
まず、無料のWPCodeプラグインをインストールする必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。
有効化すると、WordPress管理バーに「コードスニペット」という新しいメニュー項目が表示されます。それをクリックすると、サイトに保存されているコードスニペットのリストが表示されます。プラグインをインストールしたばかりなので、リストは空です。
WordPressでコードスニペットを追加するには、「新規追加」ボタンをクリックしてください。
![WordPressで最初のカスタムコードスニペットを追加するには、[新規追加]ボタンをクリックします](https://www.wpbeginner.com/wp-content/uploads/2021/08/wpcode-add-new-code-snippet.png "WPCodeで最初のカスタムコードスニペットを追加するには、「新規追加」ボタンをクリックします")
次に、「スニペットの追加」ページが表示されます。「カスタムコードの追加（新規スニペット）」オプションに移動し、「+カスタムスニペットの追加」ボタンをクリックします。
その後、オプションのリストからコードタイプとして「PHPスニペット」を選択します。
これで、コードスニペットに名前を付けることができます。これは、コードの目的を覚えておくのに役立つものであれば何でも構いません。
次に、上記からコピーしたスニペットを「コードプレビュー」ボックスに貼り付けます。
次に、コードスニペットの挿入方法を選択する必要があります。
「自動挿入」メソッドのままにしておけば、コードスニペットが適切な場所に自動的に挿入および実行されます。
その後、「非アクティブ」から「アクティブ」にスイッチを切り替え、画面右上にある「スニペットの保存」ボタンをクリックします。
これによりコードが保存され、新しい管理画面の配色が有効になります。
次に、以前にダウンロードしたCSSスタイルシートを、WordPressホスティングアカウントのテーマディレクトリにアップロードする必要があります。
これを行うには、FTPクライアントを使用するか、WordPressホスティングコントロールパネルのファイルマネージャーオプションを使用できます。
FTPを初めて使用する場合は、WordPressへのファイルアップロードにFTPを使用する方法に関するガイドを確認することをお勧めします。
まず、FTP クライアントまたは cPanel のファイルマネージャーを使用してウェブサイトに接続する必要があります。接続したら、/wp-content フォルダに移動する必要があります。
wp-contentフォルダ内には、themesというフォルダがあります。WordPressは、ウェブサイトが使用している、または過去に使用したすべてのテーマをここに保存します。
テーマフォルダをクリックし、使用しているテーマのフォルダを開く必要があります。
次に、ダウンロードしたdisplay.cssファイルをアップロードします。
CSSファイルには、以前に選択した名前が付けられます。
注意： WordPressテーマを変更した場合は、CSSファイルを新しいテーマフォルダにアップロードする必要があります。
その後、ユーザー » プロフィールに移動します。
次に、作成した新しいカラーテーマを選択できます。
このカラーテーマを使用したい場合は、必ずページ下部にある「プロフィールを更新」ボタンをクリックしてください。
新規ユーザーのデフォルト管理者カラー配色を制御する方法
新しいユーザーがアカウントを作成すると、配色をカスタマイズするオプションが提供されます。ただし、デフォルトの管理画面の配色を制御したり、ユーザーが配色を変更できないようにしたりしたい場合があります。
これを行う最も簡単な方法は、無料プラグインであるForce Admin Color Schemeを使用することです。
まず、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、ユーザー » プロフィールに移動し、管理者カラーを選択して、「すべてのユーザーにこの管理者カラー配色を強制する」チェックボックスをクリックします。
その後、ページ下部にある「プロフィールを更新」ボタンをクリックしてください。
これで、サイト上の新規ユーザーと既存ユーザー全員で、デフォルトの管理画面の配色が同じになります。
このプラグインは、すべてのユーザーの管理画面の配色セレクターを無効にします。この色を変更できるのは、管理者権限を持つユーザーのみです。
この記事がWordPressの管理画面のカラースキームを変更する方法を学ぶのに役立ったことを願っています。また、おすすめのWordPress管理画面プラグインや、WordPress管理画面から不要なメニュー項目を非表示にする方法に関するガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Tanja
これは素晴らしいですね！まさに探していたものです。でも、なぜか私にはうまくいきません…
自分でカラースキームを作成しました。cssファイルをダウンロードし、ChildThemeのcssフォルダに実装しました。その後、Child Themeのphpファイルにphpコードを追加しました。ここまではすべて正しいはずです。作成したカラースキームは、選択する際に正しい色で表示されますが、選択しても標準の色しか表示されません。何か間違っていますか？
WPBeginnerサポート
この問題が発生する最も一般的な原因は、コードがfunctions.phpに追加されている方法であると私たちは見つけました。functions.phpの問題ではないことを確認するために、WPCodeメソッドを試して機能するかどうかを確認することをお勧めします。もう1つのオプションは、ファイルを親テーマのフォルダに配置することです。
管理者
デニス・ムトミ
カスタムカラーカラースキーム作成プロセスをカバーしていただきありがとうございます。これにより、クライアント向けにさらに多くのブランドオプションを作成できます。カスタムカラーを追加できるとは知りませんでした。
Dayo Olobayo
カラーテーマの変更手順をいつも忘れてしまうのですが、このガイドをブックマークしておくと、管理画面の外観をリフレッシュしたいときに毎回かなりの時間を節約できます。ありがとうございます。
WPBeginnerサポート
どういたしまして！
管理者
llarron
素晴らしいです！標準のカラー配色は非常に退屈で、ブランドカラーに合うことがありません。これはウェブサイトのバックエンドに素晴らしい追加機能であり、簡単に実行できます。ありがとうございます。
WPBeginnerサポート
Glad you found our recommendation helpful
管理者
パック
Hi,
I’m trying to make this work but it won’t show up on the users panel. I followed the exact steps as shown above. Do you have any tips?
Thanks!
WPBeginnerサポート
使用していない場合、全員の管理者のカラー スキームを変更するには、このガイドのプラグイン方法を使用し、変更を保存する必要があります。
また、キャッシュプラグインを使用している場合は、更新を確実にするためにキャッシュをクリアすることをお勧めします。
管理者
Angelo
I tried to change but not convinced of others and I kept default color scheme
WPBeginnerサポート
That’s perfectly fine, its a personal preference if you change the colors or not
管理者
デビッド・スワンソン
wp-adminで多くの時間を費やしています。独自のカラーテーマを作成する方法が見つかりませんでした。週末を使って、いくつかのカラーホイールでそれを行うプラグインを作成する必要があるかもしれません。
WPBeginnerサポート
カスタム管理画面の配色を作成するには、こちらの記事をご覧ください：https://www.wpbeginner.com/plugins/how-to-create-custom-admin-color-schemes-in-wordpress/
管理者
バリー
@maxpen:disqus 解決しましたか？私も同じことをしたいです
アリア
CSSファイルは「wp-admin > css > colors」にあります。
マックス・ペン
各テーマのファイルをどこに保存しているのか、そしてどのように作成するのかを知りたいです。
GP Diller
WordPressチームが、通常の管理画面インターフェースにいくらか似たカラーテーマを含めずに、そのような非専門的で過度にトレンディなデザインのトレンドをすべてのユーザーに強制したのは、非常に幼稚な動きだったと思います。
フラットデザインは、管理画面のような重厚なインターフェースには適していません。これらには、フラットデザインが提供できる以上の分離が必要です。約5年後、デザイナーはすべてを振り返り、これらすべてを理解するでしょう。その時点で、「最先端」のデザイナーは、Dribbbleに自分の深いデザインのスクリーンショットを投稿しているでしょう（どういうわけか、それらを過度に複雑にするでしょう）。
エレノア
個人設定？ダッシュボードのどこを探しても見つかりませんでした。奇妙なことに、プロフィールをクリックすると、校正やその他の設定があるページが表示される前に、カラー変更ページが一瞬表示されます。つまり、そこにあるのですが、アクセスできません。～エレノア
WPBeginnerサポート
奇妙ですね。すべてのプラグインを一時的に無効にしてみましたか？
管理者
エレノア
はい、まだ同じように機能します。黒のデザインは気になりませんが、本来の通りに機能すれば良いのにと思います。～Eleanor
Justin
プラグイン/テーマ開発者として、選択されたカラー配色に合わせるために、プラグイン/テーマの管理パネルに色を適用する方法はありますか？
Peter
このプラグインは、古い（WordPress 3.7）管理画面のライトグレーとブルーの色合いに似た、もう1つの管理画面カラースキームを追加します。これは、以前のクラシックビューと新しいフラットビューのバランスを取ります。メニューブロックとメニュー項目の間に、区切り線を表示します：
http://wordpress.org/plugins/wp-admin-classic-colors/
Rima
ひどい変更です。壊れていないものを直すな。配色が明るすぎ、暗すぎます。元の配色に戻してほしいです！！
Rudy
全く同感です。以前のカラーテーマは完璧でした。管理メニューの黒い色は全く気に入らず、変更するための選択肢も良くありません。グレー（ライトスキーム）は明るすぎます。馬鹿げた変更です。
Doug
ポイントを理解していないと思います…自分で変更できます。元に戻すこともできますが、もっと多くのものを求めていた私たちに、より多くの選択肢を与えることを許可してください。
ローズ・レイノルズ
サンライズが好きです
WPBeginnerサポート
はい、とてもカラフルです
管理者
ジョヴァンニ・M
プラグインに任せるだけでなく、自分でカラーテーマを追加できる「DIY」ソリューションを含めていただけると素晴らしいと思います。
シェリル
同意します。記事の導入部から予想していた通りです。
Eventually I may poke around and find out for myself where I can alter the colors, and hard code in new combinations.
For now, I just need to get some work done –now that the Default dark theme is no longer an impediment
このプラグインは良い中間的な選択肢ですが、プラグインがさらに一歩進んで、ユーザーが独自のカスタムカラーテーマを作成できるようにしてくれると思っていました。（Kulerの良い使い道）
著者の方へ：記事をありがとうございます！
あのデフォルトの色でWPにもう一秒もいられませんでした！！
新しいテーマは嫌いでしたし、変更方法も分かりませんでした。
WPは、私たちが慣れ親しんだ色をデフォルトにすべきでした。
そして、目立つ場所に、変更できる場所を広告すべきでした。
ダークモードは非常に不快で、気を散らし、読みにくかったです。
Rob
記事をありがとうございます。WP 3.8では、人々が慣れており、私の意見でははるかに目に優しい古いカラースキームが含まれていないとは信じられません。壊れていないなら直すな、とWPは学ぶ必要があります！
シェリル
その通りです！
ジェニー・レンズ
これらのカラースキームをデザインした人は、眼精疲労、ユーザーフレンドリーさ、色彩理論などについて真剣なレッスンを受ける必要があります。プレーンで読みやすく、心地よいダッシュボードが完全に排除されたことに信じられません。これを良い動きだと考えるのは正気ではありません。私が最後に目にしたいのは、多くの人々にとってこれらの色がどれほど不快になりうるかを理解していない愚か者によってデザインされたひどいカラースキームです。私は熱狂的なWPファンであり、擁護者でした。その利点を共有することを決してやめませんでした。しかし、これは大きな、悪い間違いです。私はショックを受けています…。
アリソン・フォクソール
「ライト」スキームは、古いカラースキームと非常に似ているようです。
シェリル
はい、もちろんです！
黒は非常に読みにくいですね。画面の明るさを最大にすれば、文字はもっと読みやすくなるでしょうか？でもそうすると、不快なコントラストと目の疲れもより顕著になるでしょう。
みんなが慣れているものに近いオプションを提供できなかった理由はありません。
私も提示されたオプションの中で「明るいのみ」を選びました。他のダークでないオプションも可能性はありますが、少し残念です。
ベンジャミン・ベック
まさにやりたかったことができました。こんなに早くアップしてくれてありがとう！
イアン・アラン
はい。新しい見た目は気に入っていますが、非常にフラストレーションも感じています。コメント欄のコントラストが非常に低いため、返信したコメントとそうでないコメントを一目で区別するのが難しいです。カラーテーマを変更しても、コメントの色は変わりません。
Charles Kosman
イアン、私もコメントの色は我慢できませんでした。もっと目立つようにすべきでした。デフォルトの色を編集するだけで簡単に修正できます。color.min.css ファイル。
wp-admin/css/colors.min.cssで#fefaf7を検索し、両方の場所で#FFFF88に変更します。#FFFF88は認識しやすい黄色ですが、好きな色に変更できます。
これが、簡単な修正を探している方々の助けになれば幸いです。別のカラーテーマ（例えばミッドナイト）を使用している場合は、CSSファイルはwp-admin/css/colors/midnight/colors.min.cssにあります。
シェリル
ありがとうございます！！
ログイン時にウェブサイトの上部に表示される管理バーは、選択したテーマを反映して変更されないことに注意してください。何を選んでも黒のままです :( 選択した管理テーマの背景色になることを期待していました。
ブルック・アクロム
残念ながら、新しいスキームはどれも気に入っていません。高性能なグラフィックカードで駆動されるトップクラスの24インチHiResモニターを使用していますが、ダッシュボードのほとんどのテキストで深刻な色のフリンジが発生します。
シンプルで昔ながらの黒、白、グレーの濃淡のオプションをお願いします。
IMO、古いカラースキームの方がはるかに良かった。
Aksaam Zarook
3.8の新しいフラットデザインが気に入らず、3.8以前のWordPressのデフォルトの外観に戻したい場合は、これらのプラグインをチェックしてください。
このプラグインは、WordPress 3.7 の外観を復元します
http://wordpress.org/plugins/wp-admin-classic/
このプラグインは、新しい3.8フラットデザインに境界線と3Dスタイルを追加します。
http://wordpress.org/plugins/admin-classic-borders/
Curt
ありがとうございます！！！
WPには好きな機能がたくさんありますが、強制的な「新しい見た目」はその一つではありません。
3.7の見た目に戻す方法や、WordPressを完全に諦める方法について考え始めていました。
これは最近起こった、唯一の任意ではない不要な「アップグレード」ではありません。
エデン・チェン
良い投稿ですね、
ショーン・デイビス
新しいアップデートのこの部分、ちょっと気に入っています。今はミッドナイトが一番のお気に入りです。
Aksaam Zarook
WordPressがフラットデザインやモバイルブラウジングのような現在のトレンドに対応して改善されているのは素晴らしいことです。しかし、古いカラースキームと見た目を使い続けるオプションを残しておくべきだったと思います。私はいくつかのクライアントにWordPressをCMSとして使用し、トレーニングを行い、彼らのために管理画面のブラウザショットを使ったユーザーマニュアルを作成しました。このアップデートにより、オプションなしでこれらのクライアントの管理画面の見た目を変更することを強制されています。利用可能な最も近いカラースキームや見た目でさえ、3.7.1の見た目とは大きく異なります。クライアントがこのような変更を押し付けられることを好むとは思えません。
adolf witzeling
いいですね！私のお気に入りは「フラットテーマ」です。独自のカラースキームを作成する方法のチュートリアルはどうですか？WP Beginnerは最高です！頑張ってください。
Alan
初心者向けではありませんが、サイト全体またはマルチサイトで、すべての新規ユーザーのデフォルトスキームを設定したい場合（偶然にもミッドナイトを選択しました）、実際には数行のコードで非常に簡単です。
ここ私のブログで文書化しました http://llocally.com/blog/2013/12/15/wordpress-3-8-admin-colour-selection/
マーク・ベイリー
アラン、ありがとう！この記事でまさに探していたもの、つまりデフォルト設定の方法です！
ジェニファー・ハインドマン
ダッシュボードに移動し、「ユーザー」に移動しましたが、色は「マイプロフィール」の下ではなく、「個人設定」の下にありました。