WordPressウェブサイトにダークモードを追加することは、読者の間で話題になっています。🌙
トレンドに従うだけでなく、研究によると、ダークモードは夜間の読者の目の疲れを軽減し、モバイルデバイスのバッテリー寿命を節約できる可能性があります。
何千ものWordPressユーザーがサイトをカスタマイズするのを支援してきた経験から、この機能を実装する最も効率的な方法を発見しました。
多くのサイト所有者は技術的な専門知識が必要だと考えていますが、最新のWordPressツールにより、はるかにアクセスしやすくなりました。💡
このガイドでは、WordPressにダークモードを追加する最も簡単な方法を共有します。このソリューションは、さまざまなテーマやセットアップでテスト済みであり、信頼性が高く簡単に追加できることを確認しています。
ダークモードとは何ですか？なぜウェブサイトに追加するのですか？
多くのモバイルデバイスやコンピューターは、画面から出る白色光の量を最小限に抑えるためにダークモードを使用しています。これにより、特に暗い場所での目の疲れを軽減できます。
夜遅くまでコンピューターやモバイルデバイスを使用しても、白い光や青い光が睡眠を妨げないと考えている人もいます。
一部のデバイスには、単に暖色系の色合いを使用するナイトモードが内蔵されています。しかし、ダークモードは実際にはデバイスの背景に暗い色を追加します。
YouTubeのような人気のウェブサイトの中には、組み込みのダークカラーテーマを提供しているものもあります。
デスクトップコンピューターでは、Night EyeのようなChrome拡張機能を使用して、ダークモードでウェブサイトを閲覧できます。
その拡張機能を使用したWPBeginnerウェブサイトの外観はこちらです：
あなたのウェブサイトにダークモードトグルを追加することで、ユーザーは特別なブラウザ拡張機能をインストールすることなく、好みのモードを選択できます。
WordPress管理エリアにダークモードを追加することもできます。これは、夜間にサイトで作業する場合や、目の疲れに悩んでいる場合に役立ちます。
これを踏まえて、ウェブサイトの公開フロントエンドと WordPress ウェブサイトの管理エリアにダーク モードを追加する方法を見てみましょう。
ヒント:訪問者のデバイスが通常のモードまたは昼間のモードの場合でも、ダークカラー スキームを使用したいですか？それなら、WordPress 用の最高のダーク テーマのリストをご覧ください。
WordPressウェブサイトにダークモードを追加する方法
ウェブサイトにダークモードを作成する最も簡単な方法は、WP Dark Modeを使用することです。
テストの結果、このプラグインはトグルを追加し、訪問者があなたのウェブサイトでダークモードを有効にできることがわかりました。WordPressダッシュボードでダークモードを有効にするために、管理画面にトグルを追加することもできます。
詳細なWP Dark Mode レビューで詳細を確認できます。
まず、無料のWP Dark Modeプラグインをインストールして有効にする必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
有効化したら、WordPressダッシュボードからWP Dark Mode » 設定ページにアクセスし、「フロントエンドダークモードを有効にする」スイッチを「ON」に切り替えます。
これを行うと、ウェブサイトのフロントエンドのデフォルトモードを選択することもできます。その後、「変更を保存」ボタンをクリックして設定を保存します。
次に、「カスタマイズ」タブに切り替えます。ここで、スイッチのレイアウト、サイズ、位置をカスタマイズできます。
ダーク モード スイッチの色を変更することもできますが、そのためにはプラグインのプロ バージョンが必要になります。
完了したら、「変更を保存」ボタンをクリックして設定を保存します。次に、WordPressサイトにアクセスして、ダークモードトグルが機能していることを確認してください。
ウェブサイトのモバイル版を表示すると、ダークモードはスマートフォンやタブレットでも機能することがわかります。
WordPress管理画面にダークモードを追加する
WordPressの組み込み設定を使用してWordPressの管理画面の配色を変更できます。ただし、デフォルトの配色で画面からの白い光を軽減できるものはありません。
夜遅くまで作業する場合や、目の疲れに悩んでいる場合は、WordPress管理エリアとブロックエディターにダークモードを追加してみてください。
これを行うには、WP Dark Mode » 設定ページにアクセスし、左側の列から「管理パネルダークモード」タブに切り替えます。
ここで、「管理画面ダークモードを有効にする」オプションのスイッチを「ON」に切り替え、「変更を保存」ボタンをクリックします。
それを行うと、WordPressダッシュボードの上部にダークモードスイッチが表示されていることに気づくでしょう。
ここから、いつでもこのモードを有効にするためにスイッチを切り替えることができます。
ブロックエディターにもダークモードを追加したい場合は、「ブロックエディターダークモード」スイッチを「ON」に切り替える必要があります。
次に、「変更を保存」ボタンをクリックします。
次に、コンテンツエディターでページまたは投稿を開きます。上部にダークモードアイコンが表示されます。それをクリックしてタブを展開し、「ダークモード」オプションを選択します。
ブロック エディターはダーク モードでこのようになります。
動画チュートリアル
この記事がWordPressウェブサイトにダークモードを追加する方法を学ぶのに役立ったことを願っています。また、WordPressサイトに最適なカラースキームの選び方に関するガイドをご覧になるか、サイトをカスタマイズするための最高のWordPressテーマビルダーの専門家のおすすめをご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
私はよく夜にウェブサイトで作業しますが、WordPress が使用するライト モードで目が疲れることがあります。さらに、睡眠にもあまり良くありません。このガイドに感謝します。ウェブサイトと管理エリアの両方をダーク モードに切り替えることで、目の疲れを軽減するのに大いに役立ちます。
オレオフェ・オイェバミジ
素晴らしい情報です。プラグインが本当に気に入っており、使いやすいです。
WPBeginnerサポート
お役に立てて嬉しいです！
管理者
Kurt
サポートされているアプリでは、一般的にダーク モードを好みます。この素晴らしいヒントをありがとうございます。
WPBeginnerサポート
Glad we could share this option
管理者
Iponk
わー…良い情報、ありがとう
WPBeginnerサポート
You’re welcome, glad our guide was helpful
管理者
Agung
これは素晴らしいです。ありがとうございます。試してみます！
WPBeginnerサポート
Glad our guide was helpful
管理者
Bryan Durio
これは人々の目を守るための素晴らしいプラグインです。私は長年Windowsでダークカラースキームを使用してきましたが、これでWPサイトにも追加できます。いくつかのオプションについてのあなたの説明に感謝します。本当にありがとうございます！
WPBeginnerサポート
Glad you found our guide helpful
管理者
Richard hickman
この機能はアクセシビリティ要件にどのような影響を与えますか？
WPBeginnerサポート
これが何らかの効果をもたらすかどうかは、準拠しようとしている特定のアクセシビリティ要件によって異なります。
管理者
Richard Mayowa
ただただ素晴らしい可能性です
WPBeginnerサポート
Glad you like the available option
管理者
Jennifer C. Valerie
これは素晴らしいです。ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
Adarsh Gupta
すごい、素晴らしい。
ダークモードのことは知りませんでした。でもWordPressにダークモードを追加するのはとても簡単ですね。
素晴らしい解説をありがとうございます。
WPBeginnerサポート
You’re welcome, glad our guide was helpful
管理者