Diviサイトにダークモードトグルを実装する方法

ダークモードは、ユーザーが目に負担をかけずにWebを体験するための便利なオプションとして、人気が高まっています。 それに直面しましょう。私たちは皆、おそらく必要以上に画面を見ることに多くの時間を費やす傾向があるので、ユーザーエクスペリエンスの追加の快適さ（ダークモードなど）は大いに役立つ可能性があります。 オペレーティングシステム、プログラム、およびブラウザには通常、ダークモード機能が組み込まれていますが、一部の開発者は、Webサイトにカスタムダークモードエクスペリエンスを含めることで、それを別のレベルに引き上げています。 アイデアは、ブランディングやデザインに妥協することなく、ダークモードでのWebサイトの外観をより細かく制御することです。

このチュートリアルでは、プラグインを使用せずに、Diviでカスタムダークモードトグルを最初から作成する方法を紹介します。 このダークモードトグル機能を使用すると、ダークモードのデザインを制御し、ブランドに合わせたユーザーエクスペリエンスを向上させることができます。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

これが、作成するカスタムダークモードトグルです。

これが、既成のレイアウトの1つに適用されるダークモードの前後です。

そして、これがグローバルヘッダーに追加されたダークモードトグルです。 サイトをナビゲートするときに、ライト/ダークモードがどのように維持されるかに注目してください。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：ダークモードトグルの構築

チュートリアルのこの最初の部分では、Diviのページでダークモードトグルを作成します。 コードを使用してトグルを作成すると、それをDiviライブラリに保存して、Webサイトの任意の場所に追加できるようになります。

まず、フロントエンドでDiviを使用して最初から構築しながら、デフォルトのセクションに1列の行を追加します。

宣伝文を追加

カスタムトグルを作成するために、少しカスタムCSSを使用して宣伝文句モジュールを設計します。

行に新しい宣伝文モジュールを追加します。

コンテンツ

タイトルと本文のデフォルトのモックコンテンツを取り出します。 次に、画像の代わりに正方形のアイコンを追加します。

設計

デザイン設定にジャンプして、以下を更新します。

• アイコンの色：＃666666
• 画像/アイコンの配置：左
• アイコンフォントサイズ：22px

• 幅：50px
• モジュールの配置：中央
• 高さ：25px

• マージン：0px下
• 丸みを帯びた角：4px
• ボーダー幅：2px
• ボーダーカラー：＃666666

カスタムCSS

デザインが配置されたら、[詳細設定]タブにジャンプします。 カスタムCSSの下で、次のカスタムCSSをメイン要素に追加して、オーバーフローが丸みを帯びた角のスタイルから隠されないようにします。

overflow: visible !important;

次に、次のカスタムCSSをAfter要素に追加します。

content: "light";
position: absolute;
left: -35px;
top:0px;

これにより、宣伝文句モジュールにラベルが追加され、クリックすると「明るい」から「暗い」に変わります。

本文のデザイン

after疑似要素のテキストは本文のテキストスタイルを継承するため、次のようにDiviオプションを使用して本文のテキストスタイルを追加できます。

• ボディフォント：Roboto
• 本文の色：＃666666
• 本文サイズ：13px
• 本文の文字間隔：1px

コードモジュールを使用したカスタムコードの追加

ダークモードトグルを魔法のように機能させるために必要なコード（CSS / JQuery）を追加するには、コードモジュールを使用します。

同じ列の宣伝文モジュールの下に新しいコードモジュールを作成します。

次に、コードボックスに次のコードを貼り付けます。

<style>
/**
 * Dark Mode Toggle Styles
 */
.et-dark-mode {
  transition: all .5s;
  }
.et-dark-toggle {
  cursor: pointer;
  transition: all .5s;
  }
body.et-dark-mode .et-dark-toggle {
  border-color: #666666;
  }
body.et-dark-mode .et-dark-toggle:after {
  content:"dark";
  color: #666666;
  left: 54px;
  }
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
  text-align:right;
  }
body.et-dark-mode .et-dark-toggle .et-pb-icon {
  color: #666666;
  }
/**
 * Body Dark Mode Style
 */
body.et-dark-mode {
  background-color: #23282d !important;
  }
/**
 * Divi Element Dark Mode Styles
 *
 * Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".
 */
/* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  background-blend-mode: overlay;
  transition: opacity .5s ease-in-out;
  color: #dddddd !important;
  }
 /* Row with dark mode */
.et_pb_row.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
}
/* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
  }
/* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
  background-color: transparent !important;
  color: #dddddd !important;
  }
/* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {
color: #dddddd !important;
}
</style>
<script>
  function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
  }
  jQuery(document).ready(function($) {
      var storageAvailable = window.storageAvailable('sessionStorage');
      $(".et-dark-toggle").click(function() {
          $(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
          if ( storageAvailable ) {
              $("body").hasClass("et-dark-mode") ?
              sessionStorage.setItem('etDarkModeEnabled','1'):
              sessionStorage.removeItem('etDarkModeEnabled');
          }
      });
      if (storageAvailable) {
          '1' == sessionStorage.getItem('etDarkModeEnabled') ?
          $(".et-dark-mode-capable,body").addClass("et-dark-mode"):
          $(".et-dark-mode-capable,body").removeClass("et-dark-mode");
      }
  });
</script>

カスタムCSSクラスの追加

カスタムコードでは、カスタムCSSクラスをblurbモジュールまたはトグルに追加する必要があります。 これにより、宣伝文句がクリック時にダークモードの切り替えと機能をトリガーできるようになります。

宣伝文モジュールクラス

宣伝文モジュールの設定を開き、次のようにカスタムCSSクラスを追加します。

• CSSクラス：et-dark-toggle

ダークモード対応クラス

また、ダークモードの機能が必要なすべてのDivi要素にカスタムCSSクラスを追加する必要があります。 要素にCSSクラスが含まれると、その要素は、ダークモードがオンに切り替えられたときに追加したコードの「ダークモード」カスタムCSSを継承します。 一部の要素はダークモードスタイルを必要としない場合があるため、この方法ではダークモードデザインをより細かく制御できます。

まず、ダークモードの切り替えを含むセクションにダークモードを追加します。

セクション設定を開き、次のCSSクラスを追加します。

• CSSクラス：et-dark-mode-capable

パート2：Diviページへのダークモード機能の追加

コードとCSSクラスが配置されたので、ダークモード機能とデザインをDiviのページ全体に適用する準備が整いました。 これを行うには、モバイルアプリのランディングページの既成のレイアウトを使用します。

レイアウトを追加するには、ビジュアルビルダーの下部にある設定メニューを開き、[新しいレイアウトの追加]アイコンをクリックします。

次に、[既成のレイアウト]タブの下から[モバイルアプリのランディングページ]レイアウトを選択します。

「既存のコンテンツを置き換える」オプションが選択されていないことを確認してください。 ダークモードトグルでセクションを消去したくない。

ダークモードスタイルはCSSクラス「et-dark-mode-capable」の要素にのみ適用されるため、いくつかの異なる方法でページに追加することを選択できます。

1. ページの各要素にCSSクラスを個別に追加できます。
2. CSSクラスをページ全体の要素に拡張できます（これは、各要素を手動で実行するよりも高速です）。 たとえば、一番上のセクションのセクション設定を開き、そのセクションのCSSクラスをページ全体のすべてのセクションに拡張できます。
   
3. 要素のグローバルデフォルトにCSSクラスを追加できます。 これにより、CSSクラスがサイト全体のすべての要素に適用され、サイト全体にダークモード機能が追加されます。 たとえば、セクション設定を開き、グローバルデフォルトアイコンをクリックして、グローバルセクションデフォルトを編集できます。 次に、CSSクラスを追加して、サイト全体のすべてのセクションのCSSクラスとして保存できます。
   

ページ要素へのCSSクラスの追加

この例では、CSSクラスをセクションとテキストモジュールのグローバルデフォルトに追加して、ページ要素を更新します。 また、ページ上の他の要素にもいくつか追加します。

すべてのセクション

すべてのセクションにCSSクラスを追加するには、ダークモードトグルを含む上部セクションの設定を開きます。 次に、セクションのグローバルデフォルトを編集し、次のCSSクラスをセクショングローバルデフォルトに追加します。

• CSSクラス：et-dark-mode-capable

すべての専門セクション

専門セクションのグローバルデフォルトにもCSSクラスを追加します。

テキストモジュール

次に、ページ上のテキストモジュールの1つの設定を開き、同じCSSクラスをテキストグローバルデフォルトに追加します。

宣伝文

次に、ページレイアウトの宣伝文の1つの設定を開き、CSSクラスを宣伝文のグローバルデフォルトに追加します。

お客様の声のコラム

ページレイアウトのさらに下には、いくつかの証言があり、それぞれがカスタムの白い背景の列の中にあります。 ダークモードで列スタイルを上書きするには、CSSクラスを列の1つに追加し、それを行内の他の列に拡張します。

注：CSSクラスを列のグローバルデフォルトに追加すると、一部のデザイン要素が破損するため、お勧めできません（つまり、ほとんどの場合、列の背景が暗い場合は、すべての列に暗い背景を付けることはお勧めできません。透明です）。

結果をテストするには、ライブページにジャンプして、ページ上部のダークモードトグルをクリックします。

ライトモードでのページの外観は次のとおりです。

そして、これがダークモードでのページの外観です。

パート3：グローバルヘッダーへのダークモードトグルの追加

ダークモード機能をサイト全体に拡張する場合は、ダークモードトグルをDiviグローバルヘッダーに追加することをお勧めします。 そうすれば、サイト全体のユーザーが1つの便利な場所で利用できるようになります。

ダークモードの切り替えとコードをDiviライブラリに保存する

ただし、その前に、ダークモードのトグルとコードをDiviライブラリに保存する必要があります。 これにより、グローバルヘッダーなど、サイトの他の領域への追加が簡単になります。

フロントエンドにDiviをデプロイして構築したレイアウトに戻ります。 次に、ダークモードトグルの作成に使用した宣伝文モジュールのメニューを開き、[ライブラリに保存]を選択します。 レイアウトに名前を付けて、ライブラリに保存します。

次に、コードモジュールもDiviライブラリに保存します。

既製のグローバルヘッダーテンプレートのインポート

グローバルヘッダーをまだお持ちでない場合は、独自のヘッダーを作成するか、事前に作成されたテーマビルダーパックのいずれかを使用する必要があります。

このチュートリアルでは、5番目のテーマビルダーパックに含まれているグローバルヘッダーを使用します。 テーマビルダーを使用してグローバルヘッダーを追加するには、テーマビルダーパックをダウンロードしてから、移植性オプションを使用して「divi-theme-builder-pack-5-default-website-template.json」というJSONファイルをインポートする必要があります。 。

テンプレートが読み込まれたら、クリックしてグローバルヘッダーを編集します。

次に、ライブラリからヘッダーの2行目の列1にダークモードトグルを追加します。

ダークモードトグル/宣伝文モジュールの下で、保存したコードモジュールをダークモードトグルのすぐ下のライブラリに追加します。

すべてのセクションのデフォルトとして「et-dark-mode-capable」CSSクラスがあるため、ヘッダー内のセクションにもデフォルトでそれがあります。 これを無効にするには、オーバーライドするCSSクラスを指定するだけです。

最終結果

ダークモードのトグルページの最終結果は次のとおりです。

そして、これがヘッダーのダークモードトグルです。 選択したモード（暗いまたは明るい）は、サイトの他のページに移動してもそのまま残ります。

カスタムCSSダークモードスタイルの調整

トグル要素またはDivi要素のダークモードスタイルを調整する場合は、コードモジュール内のコード内で調整する必要があります。

現在、コードには、ダークモードで一度だけ各要素に適用される基本的なダークモードスタイルのみがあります。 これは、暗い背景色と明るいテキスト色で構成されます。

最終的な考え

Diviサイトにカスタムダークモードトグルを装備することは、UXを向上させ、目を楽しませ、楽にするまったく新しいデザインを作成するための優れた方法です。 うまくいけば、それはあなたのために役立つでしょう。

コメントでお返事をお待ちしております。

乾杯！