Elementorにダークモードを追加する方法

このチュートリアルでは、ElementorWebサイトにフロントエンドダークモードを追加します。

この記事の内容は、数か月前の一般的な「WordPressにダークモードを追加するにはどうすればよいですか」の投稿で概説されている手順に厳密に従っていますが、ダークモードをすばやく簡単に追加する方法を示すために、ここですべてを調整しましたElementorのWebサイトに移動します。

ダークモードとは何かをよく知らない場合は、iOSデバイス、Facebookページ、またはRedditブラウザを検討してください。 これらのユーザーインターフェイスはすべて、「通常の」UIカラースキームと「暗い」UIカラースキームを切り替えることができます。

ダークモードは、夜間にコンテンツを読みやすくし、デバイスのバッテリーの使用量を減らし、見た目がかっこいいため、Webサイトに追加するのに最適です。 ほとんどの主要なアプリケーションとプラットフォームが独自の「ナイトモード」を追加したため、ここ数年で人気が高まっています。

Elementorを使用してWebサイトを構築した場合、フロントエンドにナイトモードを追加するのは比較的簡単です。

エディターにはすでにバックエンドダークモードがあります。次に、この機能をフロントエンドに追加します。

WordPressとElementorにダークモードを追加する場合、2つの主要なコンポーネントがあります。 1つは、2つの配色を切り替えるために使用する実際のインターフェイスであり、2つ目は、ダークモードが切り替えられたときに適用される色です。

ダークモードの色を見つける

Elementorにダークモードを追加するための最初のステップは、ダークモードの色を見つけて生成することです。

Color Huntという無料のWebサイトを使用して、Webサイトに簡単に統合できる暗いカラーパレットを見つけるのが好きです。

場合によっては、ページの元の色の逆を選択するだけです。 たとえば、背景が白の場合、ダークモードバージョンは黒になります。 テキストの色は通常、白またはライトグレーに変換され、アクセントカラーは、両方の背景で機能する場合、通常は同じに保たれます。

Elementorサイトのダークモードを作成するときの色の一部を次に示します。

Coolors.coの使用に関するガイドをここで読んでください。

ダークモードの計画

ダークモードの色を理解したら、ダークモードをオンに切り替えたときに実際に変更されるElementor要素を計画しておくと便利です。 変更する必要のない暗い背景がすでに存在する場合もあれば、画像、フォント、および全体的な背景色を変更する必要がある場合もあります。

通常、ダークモードを切り替えたときに色を変更する必要がある要素を特定した後、Elementorエディターの[詳細設定]タブを使用して、カスタムCSSIDを割り当てます。

Elementorにダークモードを追加する

Elementorにダークモードを実際に追加するために、このタスク用に設計されたWordPressプラグインの目的を使用します。 もちろん、JavaScriptとCSS（基本的にこのプラグインが行うこと）を使用してこれを行うことができますが、この方法で行うと、多くの時間と労力を節約できます。

私たちのテストによると、ダークモードをサイトに組み込んだ場合、目立ったパフォーマンスの低下はありません。

プラグインはWPナイトモードと呼ばれ、WordPressリポジトリから無料で入手できます。 他にもいくつかの製品がありますが、WPナイトモードは群を抜いて最も強力で拡張可能です（言うまでもなく、無料です！）。

このプラグインは、ElementorWebサイトにダークモードを追加するときに必要な2つの主要な機能を提供します。 まず、短いコードを使用して、ダークモードトグルスイッチをWebサイトの任意の場所に配置できます。 2つ目は、このダークモードを切り替えるときに、サイトのどこにでも適用される色を定義できることです。

インストール後、ダークモードトグルをElementorWebサイトに追加します。 これは、どこかにショートコードを追加することによって行われます。 この例では、ページの上部に短いコードを追加します（デモの目的でのみ）が、Elementor Proヘッダーエディターは、Elementorのダークモードのプロダクションアプリケーションに役立ちます。

                            

                        
コード言語： JSON /コメント付きJSON （ json ）

このプラグインを使用して、ショートコードをサイドバーに配置したり、メニューに直接配置したりすることもできます。 プラグインには、ショートコードで指定することで選択できる4つの組み込みのトグルスタイルが付属しています。

                            

                        
コード言語： JSON /コメント付きJSON （ json ） 

トグルを配置したら、ダークモードスタイルをWebサイトに適用します。 まず、カスタマイザーを開き、ベースカラーリングを実装します。

カスタマイザーのナイトモードタブでは、体の背景、テキストの色、リンクの色、リンクのホバーの色を変更できます。 他の何かを変更するには、カスタムCSSを使用する必要があります。これについては、この記事の次のセクションで説明します。

まず、カスタマイザーのカラーリングオプションにダークモードの配色を入力します。 ナイト/ダークモードをサイトのデフォルトの色に設定することもできます。

カスタマイザーでダークモードをオンに切り替えると、いくつかの変更が適用されていることがわかりますが、サイトは少し壊れているように見えます。 これは、Elementorとテーマが箱から出して提供しなければならないすべてのものにナイトモードを適用できるわけではないためです。 代わりに、カスタムCSS仕様を作成する必要があります。

ElementorのカスタムCSSナイトモードアプリケーション

カスタムCSS指定子は、このプラグインを非常に強力にするものです。 Elementorにダークモードを適用するためにカスタムCSSを知る必要はありません。これは、非常にシンプルで簡単に実行できるためです。

 body.wp-night-mode-on .elementor-selector { night mode styling }

ワークフローは単純です。カスタムCSSダークモードスタイリングが必要な領域を特定してから、色を適用します。

現在、ページはデフォルトのナイトモードスタイル（前の手順で適用）で少し壊れているように見えます。 クリーンアップするために、カスタムCSSを使用して、ダークモードが適用されていないものをすべて指定します。

これは、ページのElementorの高度なカスタムCSS設定、WordPressカスタマイザーのカスタムCSS入力、またはYellowPencilなどのサードパーティプラグインを使用して、ページごとに追加できます。

カスタムCSSスタイルがナイトモードにのみ適用されるようにするには、プレフィックスとして「body.wp-night-mode-on」を付け、一般的なセレクターを追加し、最後にスタイリングルールを追加します。

たとえば、これにより、CSSクラスが「element-class」のフォント要素は、ナイトモードがオンになっている場合にのみ黒に変更されます。

body.wp-night-mode-on .element-class {color：＃000; }

YellowPencilを使用します。これは、Elementorで多くのカスタムCSSを管理するための推奨プラグインです。 最初に、無料の開発ツールワークフローについて説明します。

開発ツールワークフロー

まず、ダークモードが適用されているときに変更する必要がある要素の特定のセレクターを特定します。 たとえば、デフォルトのナイトモードスタイルが適用されている場合、すべての見出しの色が変わるわけではありません。 それを確実にするために、カスタムCSSを使用します。

そのセレクターを識別するために、開発ツールまたは黄色の鉛筆を使用できます。 開発ツールを使用して、ダークモードスタイルに変更する必要のある要素を右クリックし、[要素の検査]をクリックします。

ここでは、見出しがh2セレクターと、「。Elementor-heading-title」のカスタムCSSクラスによって指定されていることがわかります。

Elementorサイトでダークモードがオンになっているときにこれを白に変更するには、次のようなCSSルールを作成します。

body.wp-night-mode-on h2 .Elementor-heading-title {color：#fff; }

基本的に、これは、ダークモードがオンの場合、Elementorの見出しのタイトルクラスが白になることを示しています。 ダークモードがオフの場合、このスタイルは適用されません。

次に、無料のツールであるMicrosoft Visual Studio Codeを使用して、すべてのダークモードCSSスタイルルールをデスクトップスタイルシートに書き留めます。

通常、h1、h2、h3、Section、Divなどの一般的なセレクターにスタイルを適用し、すべてのElementor要素に割り当てられた一意のクラスを使用して微調整します。 たとえば、Elementorの特定の列の背景色を変更する場合、必要なのはその一意のCSSクラスを識別することだけです。

そのユニークなCSSクラスから、CSSルールを生成します。

body .wp-night-mode-on .elementor-element-5b14c912 { background-color : rgba ( 0 , 0 , 0 , 0 ); }
 コード言語： CSS （ css ）

この場合も、このルールはVisualStudioコードに含まれているスタイルシートに記述されています。

Elementorのダークモードでは、通常、背景色またはテキストの色のみを変更します。

ワークフローは、スタイルシートが作成されるまで続きます。 要素のセレクターを識別するFirefoxDevtools、cssを書き込むVSCode。

次に、それをコピーして、[外観のカスタマイズ]の下のカスタムCSS入力に直接貼り付け、ナイトモード/ダークモードがサイトのすべての要素に適用されているかどうかをテストします。

また、このワークフローの「一意のクラスの識別」を切り取りたい場合は、独自のカスタムCSS IDまたはクラスをElementorエディターで直接指定し、そのセレクターからダークモードスタイルを生成できます。

イエローペンシルワークフロー

私たちの代理店は、Elementor WebサイトのカスタムCSSを管理する方法としてYellowPencilを使用しており、Elementorにダークモードを追加するときにこれがワークフローにどのように組み込まれるかを示したいと考えていました。 YellowPencilを使用すると、特定の要素をポイントしてクリックすることができ、CSSエディターにそれぞれのセレクターが自動的に入力されます。

興味のある方は、こちらの記事をご覧ください。

YellowPencilを使用すると、時間を大幅に節約でき、多くのカスタムCSSの適用と管理が非常に簡単になります。

このツールには、入力からCSSを自動的に生成する視覚的なユーザーインターフェイスがあるため、これを作成する必要はありません。

そのベースコードを生成した後、必ずその前にbody.wp-night-mode-onを付け、[保存]をクリックすると、サイトに適用されます。

Elementorの一般的なダークモードCSSルール

主要な見出しのほとんどは、次の方法で変更できます。

body .wp-night-mode-on h1 , body .wp-night-mode-on h2 , body .wp-night-mode-on h3 , body .wp-night-mode-on h4 , body .wp-night-mode-on h5 , body .wp-night-mode-on h6 { color : #fff }
 コード言語： CSS （ css ）

変更するすべてのセクションを指定することにより、セクションの背景を変更できます。

body .wp-night-mode-on section { background-color : #2F374A }
 コード言語： CSS （ css ）

列やその他のセレクターを使用してこれを行うこともできます。

body .wp-night-mode-on .elementor-column { background-color : #2F374A }
 コード言語： CSS （ css ）

一般的なElementorCSSセレクターには次のものがあります。

• elementor-row
• elementor-image
• elementor-widget
• elementor-button

Elementorはスパンを使用するのが好きなので、次のような要素に対処できます。

と：

body .wp-night-mode-on span { background-color : #2F374A }
 コード言語： CSS （ css ）

ホバー効果を設定することもできます（ただし、選択内容を具体的に指定する必要があります）。

body .wp-night-mode-on span :hover { background-color :pink}
 コード言語： CSS （ css ）

画像が暗い背景で機能する場合は、そのままにしておくことができますが、多くの場合、変更が必要な暗い画像があります。 一連のメソッドを使用して、Elementorダークモードで画像をアドレス指定します。

まず、背景色を簡単に変更できます（上記の例で行ったように）。

CSSフィルターinvert（1）を適用して、色を完全に反転することもできます。 これは、背景が透明なソリッドPNGがある場合に最適です。

これをさらに一歩進めて、明るさと反転フィルターの両方を組み込むこともできます。また、背景が透明なPNGを白に変更することもできます。

 Filter : brightness(0) invert (1)
 コード言語： HTTP （ http ）

また、元の画像（不透明度、表示、または可視性）を非表示にし、ラッパーでbackground-imageを使用して新しい画像に置き換えることで、元の画像を簡単に置き換えることもできます。

それ以外は、Elementorのダークモードが適用されたときにスタイルを変更する必要がある各要素のセレクターを見つけ、CSSルールを作成し、それをWordPressWebサイトに追加するだけです。

Youtubeチュートリアル

興味のある方は、こちらのYouTubeチュートリアルをご覧ください。 これはElementor用に特別に作成されたものではありませんが、一般的なウォークスルーを提供し、ElementorWebサイトのフロントエンドにダークモードを追加するプロセスを視覚化するのに役立ちます。

結論

この記事がお役に立てば幸いです。また、ElementorWebサイトにフロントエンドダークモードを追加する方法を説明しました。 詳細については、この記事をチェックしてください。ただし、基本的に同じ情報が含まれています（Elementorには適合していません）。

この効果は多くのクライアントのウェブサイトに適用されます。具体的な質問がある場合は、コメントセクションでお気軽にお問い合わせください。