Dark Modeプラグインの使い方

WordPressのダークモードプラグインは、Webサイトの背景色を黒や暗いグレーを基調とした配色(ダークモード)にワンクリックで切り替えられるようにする拡張機能。

自動下書き

有効にすると、以下のところに表示される。

Dark Modeプラグインの使い方

Frontend Dark Mode(フロントエンドのダークモード)

ウェブサイトのフロントエンドにおけるダークモード設定。

これを選択したら、右側でEnable Frontend Dark Modeをオンにするとユーザーが実際に見る画面は、ダークモードで見るようになる。

Dark Modeプラグインの使い方

Enable Frontend Dark Mode(フロントエンドのダークモードを有効化)
上の画面の一番上のスイッチ、これをオンにすると、フロントエンドでダークモードが有効になる。
フロントエンドの場合は、オンにするとダークモードとして以下のように表示される。

Dark Modeプラグインの使い方

この設定では単純にダークモードの表示設定になるが、そのダークモードの状態をサイトを見ているユーザーが切り替えることがきるようにする設定が以下の方法になる。

Choose how you want to use Dark Mode(ダークモードの利用方法を選択)

  • Default Light Mode(デフォルト:ライトモード)
    サイトのデフォルト表示をライトモードにする場合に選択。訪問者は、最初にライトモードでウェブサイトを閲覧することになり、スイッチで切り替えることができる。
  • Default Dark Mode(デフォルト:ダークモード)
    サイトのデフォルト表示をダークモードにする場合に選択。訪問者は、最初にダークモードでウェブサイトを閲覧することになり、スイッチで切り替えることができる。
  • Use system settings(システム設定を使用)
    ユーザーのデバイス設定に応じて、ダークモードの有効・無効が切り替わりる。
  • Time based dark mode(時間指定ダークモード)ULTIMATE(究極の)
    ユーザーが指定した時間に基づいて、自動的にダークモードを有効にする。
  • Sunset Mode(日没モード)ULTIMATE(究極の)
    ユーザーの現在地に基づき、日没時に自動的にダークモードを有効にする。

以下は、Default Light Modeに設定した状態。
右下に『月のアイコン』が表示され、ダークとライトが切り替えることができるようになる。

Dark Modeプラグインの使い方

Default Dark Modeはこれと逆で最初にダークモードで表示され、ユーザーが右下のアイコンで切り替えることになる。

Admin Panel Dark Mode(管理画面のダークモード)

WordPress管理画面のダークモードを制御する設定。

Dark Modeプラグインの使い方

Enable Admin Dashboard Dark Mode(管理ダッシュボードのダークモード)
これを有効にすると、WordPressダッシュボードでダークモードが適用される。
ダークモードを使うには、まずこれをオンにする必要がある。
しかし、これをオンにしてもダッシュボードはダークモードにならない。

Block Editor Dark Mode(ブロックエディターのダークモード)
『Enable Admin Dashboard Dark Mode』がオンになっていないと使えない。
これを有効にすると、ブロックエディター内にダークモードとライトモードを切り替えるためのスイッチが表示されるようになる。

これをオンにすることにより、以下のように上のところにダークモードに切り替えるスイッチが表示され、簡単に切り替えができるようになっている。

Dark Modeプラグインの使い方

他の管理画面もこのスイッチを一つだけ、どこかで切り替えると全て同じダークモードになる。

Classic Editor Dark Mode(クラシックエディターのダークモード)
『Enable Admin Dashboard Dark Mode』がオンになっていないと使えない。
これを有効にすると、クラシックエディター内にダークモードとライトモードを切り替えるためのスイッチが表示されるようになる。

Customization(カスタマイズ)

Dark Modeプラグインの使い方

Switch Settings(スイッチ設定):Webサイトのダークモード切り替え機能を設定。
Color Settings(カラー設定):最適なダークモードの視覚体験を得るために、利用可能な選択肢を確認してみましょう。カラーに関して色んな設定がある。
Image Settings(画像設定):ダークモードでの画像の見た目をカスタマイズする。
Video Settings(動画設定):ダークモードでの動画の見た目をカスタマイズする。
Site Animation(サイトアニメーション):ページ遷移アニメーションを選択。

Advanced(高度な設定)

Dark Modeプラグインの使い方

Performance(パフォーマンス):パフォーマンス設定を構成します。
Exclude Settings(除外設定):ページ、投稿、および要素の除外設定を構成します。
Custom CSS(カスタムCSS):ダークモード、または両方のモードに適用するカスタムCSSコード。
Accessibility
(アクセシビリティ):障害のある方々にとって、ウェブサイトをより利用しやすいものにしましょう。
Shortcode(ショートコード):ダークモード切り替え用ショートコードを生成する。
Switch Widget
(ウィジェットの切り替え):WordPressウィジェットを使用してダークモード切り替えを表示。

Analytics(分析)

Dark Modeプラグインの使い方

Tools(ツール)

Dark Modeプラグインの使い方

Export Settings(設定のエクスポート):現在の設定をJSONファイルとしてエクスポート。
Import Settings(設定のインポート):WP Dark ModeでエクスポートされたJSONファイルから設定をインポート。
Reset Settings(設定のリセット):すべての設定をデフォルトに戻す。設定をリセットする前に、現在の設定をエクスポートすることをお勧め。