最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressウェブサイトにダークモードを追加する方法(簡単な方法)

WordPressウェブサイトにダークモードを追加することは、読者の間で話題になっています。🌙

トレンドを追うだけではありません。調査によると、ダークモードは夜間の読書における目の疲れを軽減し、モバイルデバイスのバッテリー寿命を節約できる可能性があります。

多くのサイト所有者は技術的な専門知識が必要だと考えていますが、最新のWordPressツールにより、はるかにアクセスしやすくなりました。💡

このガイドでは、WordPressにダークモードを追加するための実績のある方法を共有します。このソリューションは、さまざまなテーマやセットアップでテスト済みであり、信頼性が高く簡単に追加できることを保証します。

WordPressウェブサイトにダークモードを追加する方法

TL;DR: WordPressにダークモードを追加する最も簡単な方法は、WP Dark Modeプラグインをインストールすることです。サイトにカスタマイズ可能なトグルスイッチが自動的に追加され、訪問者は好みのオプションを選択でき、WordPress管理画面でもダークモードをサポートしています。

WordPressウェブサイトにダークモードを追加する理由

WordPressウェブサイトにダークモードを追加すると、訪問者はコンテンツを viewing する別の方法を得ることができ、特に暗い環境での viewing が快適になります。

多くの人がダークモードを好むのは、夜間の読書をより快適にし、画面からの明るい光の量を減らすことができるからです。

また、モバイルデバイス、アプリ、ウェブサイトでも人気の機能であり、ユーザーにとって familiar な experience となります。WordPressにダークモードを追加する最大のメリットをいくつかご紹介します。

  • 読書体験の向上: 暗い背景は、特に薄暗い環境で目に優しくなります。
  • アクセシビリティの向上: ダークモードは、光に敏感なユーザーや特定の視覚障害を持つユーザーに代替 viewing オプションを提供します。
  • ユーザーの好みに対応: 多くの訪問者は、すでに携帯電話、タブレット、コンピューターでダークモードを使用しています。
  • モダンな体験を創造: ライトモードとダークモードの両方を提供することで、ユーザーはウェブサイトの browsing 方法をより自由に control できます。
  • バッテリー寿命の節約の可能性: OLEDスクリーンを搭載した一部のデバイスでは、ダークモードは消費電力を削減できます。

ウェブサイトにダークモードトグルを追加することで、訪問者はブラウザ拡張機能やデバイス設定に頼ることなく、いつでもライトテーマとダークテーマを切り替えることができます。

YouTubeのダークモード

WordPress管理画面でもダークモードを有効にすることができ、深夜の作業セッション中にウェブサイトの管理をより快適にすることができます。

それを念頭に置いて、WordPressウェブサイトにダークモードを追加する方法を見てみましょう。

ヒント:訪問者のデバイスが通常のモードまたは昼間のモードであっても、ダークカラー配色を使用したいですか?それなら、WordPress向けの最高のダークテーマのリストをご覧ください。

WordPressウェブサイトにダークモードを追加する方法

ウェブサイトのダークモードを作成する最も簡単な方法は、WP Dark Modeを使用することです。

コードに一切触れることなく、プロフェッショナルなダークモードトグルを追加したい初心者や忙しいサイトオーナーに最適です。直感的な設定と自動実装により、非常にユーザーフレンドリーです。

詳細については、WP Dark Modeのレビューで詳しく知ることができます。

まず、無料のWP Dark Modeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPressダッシュボードからWP Dark Mode » 設定ページにアクセスし、「フロントエンドダークモードを有効にする」スイッチを「ON」に切り替えます。

それが完了したら、ドロップダウンやラジオボタンなどの提供されたオプションを使用して、ウェブサイトのフロントエンドのデフォルトモードを選択することもできます。

その後、「変更を保存」ボタンをクリックして設定を保存します。

フロントエンドでダークモードを有効にする

次に、「カスタマイズ」タブに切り替えて、スイッチのレイアウト、サイズ、位置をカスタマイズします。

ダークモードスイッチの色を変更することもできますが、そのためにはプラグインのプロバージョンが必要です。

ダークモードスイッチをカスタマイズする

完了したら、「変更を保存」ボタンをクリックして設定を保存します。次に、WordPressサイトにアクセスして、ダークモードトグルが機能していることを確認してください。

ウェブサイトをモバイルまたはタブレットで表示することもできます。これにより、ダークモードがモバイルデバイスでも機能することを確認できます。

ウェブサイトのダークモードプレビュー

WordPress管理画面にダークモードを追加する

組み込みの設定を使用して、WordPressの管理画面の配色を変更することができます。ただし、デフォルトの配色では、画面からの白い光を軽減するものはありません。

夜遅くまで作業する場合や、目の疲れに悩んでいる場合は、WordPress の管理画面とブロックエディターにダークモードを追加することを試すことができます。

これを行うには、WP Dark Mode » 設定ページにアクセスし、左側の列から「管理パネルダークモード」タブに切り替えます。

ここで、「管理画面ダークモードを有効にする」オプションのスイッチを「ON」に切り替え、「変更を保存」ボタンをクリックします。

WordPressダッシュボードにダークモードを追加する

それを行うと、WordPressダッシュボードの上部にダークモードスイッチが表示されていることに気づくでしょう。

ここから、いつでもこのモードを有効にするためにスイッチを切り替えることができます。

WordPress ダッシュボードでダーク モード スイッチを切り替える

ブロックエディターにもダークモードを追加したい場合は、「ブロックエディターダークモード」スイッチを「ON」に切り替える必要があります。

次に、「変更を保存」ボタンをクリックします。

ブロックエディターでダークモードを有効にする

これで、コンテンツエディタでページまたは投稿を開きます。上部にダークモードアイコンが表示されます。それをクリックしてドロップダウンメニューを開き、「ダークモード」オプションを選択します。

これは、ブロックエディターがダークモードでどのように表示されるかです。

ブロックエディタのダークモードプレビュー

動画チュートリアル

文章での説明がお好みでない場合は、ビデオチュートリアルをご覧ください。

WPBeginnerを購読する

WordPress のダークモードに関するよくある質問

WordPress でダークモードを有効にする前に、読者からよく寄せられる質問をいくつかご紹介します。

WordPress にはナイトモードがありますか?

いいえ、WordPressにはウェブサイトのフロントエンド用の組み込みナイトモード機能はありません。この機能を追加するには、WP Dark Modeのようなプラグインを使用するか、特定のダークテーマをインストールする必要があります。

テーマをダークモードに変更するにはどうすればよいですか?

現在のテーマをダークモードに変更する最も簡単な方法は、トグルスイッチを追加するプラグインをインストールすることです。または、外観 » テーマ に移動して、ダークカラー配色で設計されたテーマを有効にすることもできます。

ダークモードの欠点は何ですか?

主な欠点は、明るい日差しの環境ではダークモードの可読性が低下することです。さらに、標準のロゴやダークな要素を含む透過画像は、暗い背景に対して消えたり、歪んで見えたりする可能性があります。

目のためにはどのカラーモードが最適ですか?

ダークモードは、まぶしさと画面のちらつきを軽減するため、通常は低照度条件下で目に最適です。ただし、日中や明るい部屋での可読性やテキストの理解には、ライトモードの方が適していることがよくあります。

ウェブサイトのコンテンツのダークモードの色をカスタマイズできますか?

はい、WP Dark Mode Proバージョンでは、複数のダークモードスタイル、カスタムCSS、画像/ビデオダークモード機能など、豊富なカスタマイズオプションが提供されています。これにより、トグルスイッチだけでなく、ウェブサイト全体のコンテンツの色調をブランドに合わせて微調整できます。

WordPressの代替ダークモードプラグインにはどのようなものがありますか?

WP Dark Mode は使いやすさから強く推奨されていますが、その他の人気のあるオプションには、WPPOOL によるダークモード(旧 Droit Dark Mode)、Darklup Lite、Go Dark などがあります。それぞれ、WordPress サイトにダークモードを実装するためのさまざまな機能を提供しています。

ダークモードを使用している人の割合は?

調査によると、かなりの割合のモバイルユーザーがデバイスでダークモードを利用しているか、好んでいます。ウェブサイトでこのモードをサポートすることは、ユーザーの好みの大きなセグメントに対応することになります。

ダークテーマは目に健康的ですか?

はい、ダークテーマは、目に当たる強いブルーライトの曝露を最小限に抑えるため、目に健康的である可能性があります。ブルーライトのこの低減は、デジタル眼精疲労を防ぐのに役立ち、夜遅くにデバイスを使用する場合、睡眠の質を改善する可能性があります。

このガイドが、WordPressウェブサイトにダークモードを追加する方法を学ぶのに役立ったことを願っています。また、WordPressサイトに最適な配色を選択する方法に関するガイドをご覧になるか、サイトをカスタマイズするための最高のWordPressテーマビルダーの専門家による選択肢をご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

19 コメント返信する

  1. 私はよく夜にウェブサイトで作業しますが、WordPress が使用するライト モードで目が疲れることがあります。さらに、睡眠にもあまり良くありません。このガイドに感謝します。ウェブサイトと管理エリアの両方をダーク モードに切り替えることで、目の疲れを軽減するのに大いに役立ちます。

  2. これは人々の目を守るための素晴らしいプラグインです。私は長年Windowsでダークカラースキームを使用してきましたが、これでWPサイトにも追加できます。いくつかのオプションについてのあなたの説明に感謝します。本当にありがとうございます!

    • これが何らかの効果をもたらすかどうかは、準拠しようとしている特定のアクセシビリティ要件によって異なります。

      管理者

  3. すごい、素晴らしい。
    ダークモードのことは知りませんでした。でもWordPressにダークモードを追加するのはとても簡単ですね。
    素晴らしい解説をありがとうございます。

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。