Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts
WPダークモードは、公開サイトと管理ダッシュボードにダークモードを追加することができます。また、ユーザーの端末設定やユーザーが設定したスケジュールに基づいて、このモードを自動的に有効化することもできます。
以前に "WPダークモード" を使用したことがありますか? コミュニティを支援するために、あなたのレビューを追加してください。

長所だ:

  • ダークモード・プラグイン
  • フロントエンドとWordPressダッシュボードにダークモードを追加します。
  • 19種類の切り替えスタイル
  • ユーザーの設定やタイムゾーンに基づいてダークモードをスケジュールする
  • トランジションアニメーション
  • カスタム投稿タイプ、ページ、投稿、カテゴリー、タグをダークモードから除外する。
  • ビルトイン分析およびメールレポート

WPBeginnerユーザーは最大25%割引

WPダークモード を訪れる

(この割引は自動的に適用されます)

| Reader Disclosure

WP Dark Mode レビュー:それはあなたのための正しいダークモードプラグインですか?

WPダークモードのレビューをお探しですか?それがあなたのための正しいダークモードプラグインかどうかを判断するのに役立ちます?

このプラグインは、公開サイトとWordPress管理エリアにダークモードを追加することができます。多くの人にとって、暗い場所でサイトを閲覧していても、眼精疲労や頭痛を防ぎ、より良い睡眠を促すことができます。

このWP Dark Modeのレビューでは、この人気のダークモード・プラグインがあなたのWordPressサイトに適しているかどうかを見ていきます。

WP Dark Mode review: Is it the right dark mode plugin for you?

WPダークモード:なぜWordPressでダークモードを使うのか?

WPダークモードを使用すると、訪問者は、個別クリックで、WordPressのサイトやブログでダークモードを有効化することができます。

How to add dark mode to your WordPress blog or website

また、管理ダッシュボードにトグルが追加され、ユーザーはWordPressダッシュボードでダークモードを有効化することができる。

ユーザーエクスペリエンスをシームレスにするために、WPダークモードは、ユーザーの端末設定に基づいて、またはあなたが設定したスケジュールに基づいて、このモードを自動的に有効化および無効化することができます。訪問者の位置に基づいて、夕暮れ時に自動的にダークモードを有効化することもできます。

もしあなたが始めたばかりであったり、予算が限られているのであれば、WordPress.orgからWP Dark Modeのライトバージョンをダウンロードすることができる。

The free WP Dark Mode WordPress plugin

この無料プラグインは、WordPressブログやサイトにダークモードを追加します。

ダークモードをサイトの初期設定にしたり、ユーザーの設定に基づいて自動的に有効化・無効化することもできます。 しかし、プレミアムプラグインは、特定の時間に自動的にダークモードを有効化したり、訪問者の地理的位置に基づいて日没時に有効化したりすることで、よりシームレスなエクスペリエンスを提供します。

プレミアム・プランには、スイッチのデザインが追加され、さらに多くのカスタマイズ・オプションが用意されているので、企業や個人のブランディングを完璧に引き立てるスイッチを作ることができます。

WP Dark Mode レビュー:それはあなたのための正しいダークモードプラグインですか?

サイトにダークモードのトグルを追加することで、ユーザーはブラウザー拡張機能を区切りインストールすることなく、好みのモードを選択することができます。ユーザーが夜遅くまで定期的にサイトで作業していたり、眼精疲労に悩まされている場合、ダークモードプラグインは管理者、投稿者、その他の寄稿者にもメリットがあります。

それでは、WP Dark Modeがあなたにぴったりのダークモード・プラグインかどうかを見てみましょう。

1.フローティング・ダークモード・スイッチ

WPダークモードは、画面の下部にフローティングダークモードスイッチを追加します。

An example of a floating dark mode switch on a WordPress website

これにより、サイト、ブログ、オンラインストアのどのページでも、訪問者がダークモードとライトモードを切り替えることができます。

2.WordPressテーマとの互換性

WP Dark Modeは、Astra、OceanWP、Diviを含む最も人気のあるWordPressテーマすべてと互換性があります。

多くのテーマと互換性があるため、ダークモードの設定を失うことなく、WordPressテーマをいつでも変更できる。

3.フルカスタマイズ可能なスイッチ

無料のプラグインは、あなたが使用できる3つの異なるスイッチスタイルが付属しています。しかし、あなたがプレミアムプラグインにアップグレードした場合、あなたは19ダークモードスイッチスタイルにアクセスできるようになります。

Applying a ready-made style to a toggle

スタイルを選択した後、サイズ、アイコン、テキスト、色、コールトゥアクションなどを変更してカスタマイズすることができます。トグルで使用するカスタムアイコンをアップロードすることもできます。このようにして、あなたのWordPressテーマにぴったり合ったスイッチを作ることができます。

また、13色のプリセットから選ぶこともできる。プリセットを選択した場合でも、テキスト、配色、ボタン、スクロールバーの変更など、プリセットのあらゆる部分を調整することができます。

Choosing a color preset for your WordPress dark mode

もう一つのオプションは、カスタマイザーを作成し、初期設定のプリセットと全く同じ方法で使用することです。これは、あなたのブランディングと配色を完璧に引き立てるデザインを素早く簡単に作成する方法です。

4.ビルトイン・アニメーション

WPダークモードには、フェードイン、パルス、フリップなど、訪問者がダークモードとライトモードを切り替えるときに使用できるトランジションアニメーションがいくつか用意されています。

さらに良いことに、WPダークモードエディターにはビルトインプレビューが搭載されているので、さまざまなアニメーションを試して、どれが好みか確認することができる。

Adding transition effects to dark and light mode

5.複数のスイッチ配置

WPダークモードでは、画面上のスイッチの外観を正確に選択することができます。まず最初に、左、右、カスタマイザーのアライメントを選択できます。

Changing the position of a toggle on your WordPress website, blog, or online marketplace

WPダークモードは、ナビゲーションメニューにスイッチを追加することもできます。

メニューの設定でボタンをチェックするだけで、あとはWPダークモードが処理してくれる。

Adding a dark mode switch to your WordPress navigation menu

また、「メニューの編集」ダッシュボードで基本的なカスタマイザーオプションにアクセスできるので、あなたのメニューにぴったり合うようにスイッチをスタイリングすることができます。

また、ページや投稿コンテンツにスイッチを追加することもできます。スイッチをメインコンテンツの前に表示するか、ページコンテンツの下に表示するかを選択できます。

Adding a dark mode toggle to your pages and posts

6.ダークモードスイッチブロック

ダークモードのトグルを画面上のどこに表示するかを厳密にコントロールする必要がありますか?あるいは、特定のランディングページなど、特定のページだけに追加したい場合もあるでしょう。

その場合、WPダークモードはWordPressコンテンツエディターで追加できるブロックを提供します。

Adding a Dark Mode block in the WordPress block editor

WordPressのブロックエディターを使って、スイッチのスタイルやサイズを変更することもできます。これにより、初期設定を上書きし、各スイッチにユニークなルック&フィールを与えることができます。また、WP Dark Modeが自動的にプロバイダーとして提供するショートコードを使ってスイッチを追加することもできます。

7.ダークモードを自動的にスケジュールする

WPダークモードは、特定の時間に自動的にサイトのモードを変更することができます。これはユーザーの設定に基づいているので、海外のユーザーがいる場合に最適です。

もう一つのオプションは、訪問者の位置情報に基づいて、日没時に自動的にダークモードを有効化することです。これは「設定して忘れる」オプションなので、ユーザーごとに適切なタイミングで常にダークモードを有効化します。

8.ユーザー設定に基づくモードの切り替え

WPダークモードは、ユーザーの端末がライトモードかダークモードかを検出することができます。そして、よりシームレスな訪問者体験のために、端末の設定に適したモードに切り替えることができます。

この機能は、iOS、Android、macOS、Windows 10を含むすべての主要なオペレーティングシステムに対応している。 つまり、端末に関係なく、すべてのユーザーに同じエクスペリエンスを提供するはずだ。

9.管理者用ダークモード

WordPressでは、ビルトイン設定を使って管理画面の配色を変更することができます。しかし、初期設定の配色はどれも画面からの白色光の量を減らすことはできません。

とはいえ、WPダークモードが管理ダッシュボードにもトグルを追加できることを知ったら、きっと満足するだろう。

Enabling dark mode in the WordPress admin area

ダークモードを有効化すると、管理者やその他のログイン中のユーザーには、WordPressダッシュボードのダークモードバージョンが表示されます。

プラグインはまた、よりシームレスなユーザーエクスペリエンスのために、ブロックエディターにダークモードを追加することができます。

Enabling dark mode for the WordPress content editor

この設定を有効化した後、コンテンツエディターで任意のページや投稿を開くだけです。

ダークモードを有効化するオプションが表示されます。

How to enable dark mode in the WordPress block editor

さらに良いことに、複数の投稿者でWordPressブログを運営している場合、各ユーザーが好みに応じてダークモードのオン・オフを切り替えることができる。プラグインは、次回ログイン時に各ユーザーの好みを記憶することもできる。

10.アクセシビリティ機能

一部の訪問者はアクセシビリティツールを使用していたり、異なるニーズを持っているかもしれません。このようなユーザーをサポートするために、WP Modeではキーボードショートカットまたはドメインパラメータを使用してダークモードを切り替えることができます。

さらに、ダークモードではテキストが読みにくいと感じる訪問者もいるかもしれません。このようなユーザーを助けるために、ダークモードが有効化されたときにフォントサイズを自動的に大きくすることができます。

Automatically adjusting the font size on your website

このトピックについては、WordPressサイトのアクセシビリティを向上させる方法についてのガイドをご覧ください。

11.サイトのパフォーマンスを上げる

WPダークモードには、ページの読み込み速度を向上させることができる多くの設定が用意されています。これには、ページのコンテンツを解析してレンダリングする前にダークモードのスクリプトを読み込むか、非同期でダークモードのスクリプトを取得するかを選択することが含まれます。

また、フッターにスクリプトを読み込むことで、レンダーブロックを減らすこともできる。

12.初期設定の変更

このプラグインでは、ダークモードをサイトの初期設定にするオプションがあります。つまり、あなたのサイトやブログ、オンラインマーケットを訪れた訪問者は、まずダークモードを見ることになります。

Making dark mode the default on a WordPress website, blog, or online store

これらの訪問者は、WPダークモードスイッチをクリックするだけで、いつでもライトモードに切り替えることができます。

13.輝度とグレースケール効果

ダークモードを有効化すると、サイトのメディアが見づらくなったり、動画や画像が明るく表示されたりすることがあります。

とはいえ、このプラグインはあなたの設定に基づいて、画像や動画の輝度を自動的に下げることができます。また、グレースケール効果を追加したり、グレースケールの量を微調整してサイトにぴったり合うようにすることもできます。

Automatically adjusting the brightness on a WordPress image

これらの設定は、画像や動画がサイトの大部分を占める場合に特に便利です。例えば、写真ポートフォリオや デジタルグラフィックをオンラインで販売している場合、これらのオプションを検討することをお勧めします。

低輝度またはグレースケールを有効化した場合、特定の画像や動画を除外することができます。例えば、サイトのロゴを除外することで、ブランディングを弱めることはありません。

Excluding specific images from your grayscale effects

ダークモードが有効化されたときに、特定の画像や動画を置き換えるという設定もあります。例えば、ダークモードに最適化されたインフォグラフィックをデザインすることができます。

同様に、動画の背景が暗い場合、ダークモードを有効化すると背景が消えてしまうことがあります。その場合は、動画を編集して背景を明るくしてから、ダークモード用の新しいバージョンをアップロードしてください。

Showing alternative videos and images when your site is in dark mode

14.特定のページや投稿などを除外する。

重要なランディングページやセールスページなど、特定のページをダークモードから除外したい場合もあるでしょう。

WPダークモードでは、特定のページや投稿、カスタム投稿タイプ、あるいはカテゴリーやタグ全体を除外することができます。

How to exclude categories and tags from dark mode

オンラインストアを運営していますか?それなら、WooCommerceの商品と商品カテゴリーをすべてダークモードから除外することもできます。

15.カスタマイザー対応

WP Dark Modeにはたくさんのカスタマイズオプションがある。しかし、より高度なユーザーは、プラグインの設定にあるビルトインコードエディターを介して カスタムCSSを使用するオプションもあります。

How to add custom CSS to your website

これにより、トグル内の特定の設定や要素を微調整し、完璧なデザインを作成することができます。

16.ダークモード分析

どのようなビジネスサイト、ブログ、オンラインショップを作るにしても、人々があなたのコンテンツにどのように接するかをモニターすることは重要です。

この点を考慮し、WPダークモードにはビルトイン分析が搭載されており、人々がダークモードをどのように使用しているかを確認することができます。

How to track visitors on your WordPress website

このインサイトを使用して、サイトでのダークモードの動作を微調整できます。例えば、特定のカスタム投稿タイプを除外したり、ダークモードのスケジュールを変更したり、トグルのデザインを調整してより見やすくしたりすることができます。

WP Dark Modeは、この情報をメールで送信することもできるので、WordPressダッシュボードにログイン中でなくても、トラフィックや訪問者のアクティビティを監視することができます。

17.Elementorのサポート

Elementorをお使いですか?

WPダークモードは、Elementorウィジェットをプロバイダーすることで、この人気のページビルダーとシームレスに統合されます。このウィジェットを使用すると、任意のページまたは投稿にダークモードスイッチを配置することができます。

18.エクスポートとインポート設定

WordPressの開発会社を経営していたり、複数のサイトを所有していたりしませんか?その場合、複数のサイトで同じダークモード設定を使用しているかもしれません。

これらの設定を手動で再作成するのではなく、JSONファイルとしてエクスポートすることができます。

How to export your WP Dark Mode settings

その後、WPダークモードがインストールされている他のサイトに設定をインポートすることができます。

19.ソーシャル共有ボタン

追加ボーナスとして、WP Dark ModeにはWordPressサイトに追加できるソーシャル共有ボタンが付属しています。

How to display social sharing icons on your blog or website

投稿日やページ上のボタンの外観を微調整したり、表示間隔を変更したり、掲載する情報を指定したりと、様々なことが可能です。

これらのボタンはダークモードを念頭に置いてデザインされているため、ユーザーがどのモードを有効化しても美しく表示される。

Customizing the social sharing icons on your website or online store

20.地域社会と専門家の支援

このWordPressプラグインを使用すると、わずか数回のクリックで、あなたのウェブサイトのフロントエンドとダッシュボードにダークモードを追加することができます。しかし、このプラグインには他にもたくさんのカスタマイズ設定やオプションがあります。

もっと深く知りたいのであれば、追加のヘルプが役に立つかもしれません。まずは、プラグインのインストールと有効化の方法を示すオンラインドキュメンテーションがあります。

An example of an online knowledge base

WP Dark Modeチームが様々なトピックを取り上げているブログもあります。ここでは、WPダークモードと一緒に使いたいWordPressプラグインや役立つチュートリアルを紹介しています。

無料のプラグインを使用している場合は、WordPress.orgのWP Dark Modeフォーラムに投稿し、基本的な質問に対する回答を得ることができます。

公共のサポートフォーラムに投稿する場合は、専門家があなたの問題を完全に理解し、役立つレスポンスを投稿できるように、できるだけ多くの情報を含めることを常にお勧めします。このトピックの詳細については、WordPress サポートの適切な依頼方法に関するガイドをご覧ください。

プレミアムプラグインにアップグレードすれば、ライブチャットやVIPサポートへのアクセスも可能になり、エキスパートから直接サポートを受けることができます。

WPダークモードレビュー:価格とプラン

もしあなたが始めたばかりであったり、予算が限られているのであれば、WordPress.orgからWP Dark Modeのライトバージョンをダウンロードすることができる。

ただし、ダークモードを自動的に有効化するようにスケジュールしたり、より多くのカスタマイズ設定を解除したい場合は、プレミアムプラグインにアップグレードする必要があります。

WP Dark Mode's pricing and plans

年間ライセンスまたはライフタイムライセンスのいずれかを購入することができます。どのライセンスを取得する場合でも、価格はWPダークモードを使用したいサイトの数に応じて異なります。

あなたが年間ライセンスを選択した場合, その後、49ドルで個別サイトにWPダークモードをインストールすることができます, 一方, あなたは、年間66.75ドルで最大5つのサイトにプラグインをインストールすることができます.これは、ネットワーク内の複数のアフィリエイトマーケティングブログのような複数のサイトを運営している場合に良いオプションです.

ライフタイムライセンスを購入したいですか?その後、あなたは174.30ドルで50サイトまでWPダークモードを使用することができます.最後に, あなたは226.85ドルで最大1,000サイトにこのプラグインをインストールすることができます.とはいえ、これらのライフタイムライセンスは、大規模なWordPress開発者や、長い顧客リストを持つフリーランスの開発者に最適です。

WP Dark Mode レビュー:それはあなたのための正しいダークモードプラグインですか?

機能、サポート、価格を見て、私たちはWP Dark Modeが素晴らしいダークモードプラグインであると確信しています。公開サイトやWordPress管理エリアにダークモードを追加することで、ユーザーが眼精疲労や頭痛を避けることができます。

このモードを有効化した後、独自の配色、コールトゥアクション、アイコンを追加してスイッチをカスタマイズできます。プラグインが自動的に提供するブロックやショートコードを使用して、特定のページや投稿に追加することもできます。

ユーザー体験を向上させるために、スケジュールやユーザーの端末設定に基づいて自動的にダークモードを有効化することもできる。

このWP Dark Modeのレビューが、あなたにとって適切なダークモードプラグインかどうかを判断する一助となれば幸いです。次に、最高のウェブデザインソフトウェアの選び方についてのガイドをご覧になるか、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.

WPBeginnerユーザーは最大25%割引

究極のWordPressツールキット

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

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Reader Interactions

1件のユーザーレビューレビューを追加する

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

レビューを書く

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

あなたの評価: