こんにちは、阿久梨絵です！
近年、多くのWebサイトやアプリでダークモード が採用されています。
ダークモードは、背景色を暗くし、文字色を明るくすることで、目の負担を軽減し、バッテリー消費を抑える 効果が期待できます。
WordPress サイトでも、CSSとJavaScriptを活用することで簡単にダークモードを導入 できます！
この記事では、ダークモードのメリット・実装方法・カスタマイズのポイント を詳しく解説します。
1. ダークモードのメリット
・目の負担軽減 → 長時間の閲覧でも疲れにくい
・バッテリー消費の抑制 → 有機ELディスプレイでは特に効果的
・デザインの多様性 → ユーザーに異なる視覚体験を提供
・アクセシビリティ向上 → コントラスト比の調整が容易
ダークモードを導入すると、ユーザーの快適な閲覧環境を提供できます！
2. ダークモードの実装方法
ダークモードを実装する方法は、CSSのメディアクエリを使う方法 と JavaScriptで切り替えボタンを設置する方法 の2種類があります。
① CSSのメディアクエリを使う方法
ユーザーのOS設定（ライトモード or ダークモード）に応じて、自動的に切り替える 方法です。
以下のCSSを追加すると、ダークモードが適用 されます。
/* ライトモードのスタイル（デフォルト） */
body {
background-color: #fff;
color: #000;
}
/* ダークモードのスタイル */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #eee;
}
a {
color: #add8e6; /* ダークモード時のリンク色 */
}
}
この方法を使うと、ユーザーのOS設定に応じて自動的にダークモードが適用されます！
② JavaScriptで切り替えボタンを設置
ユーザーが手動でダークモードを切り替えられる ようにする方法です。
以下のコードを追加すると、ボタンでダークモードをON/OFF できます。
HTML
<button id=”theme-toggle”>ダークモードに切り替える</button>
CSS
/* ライトモードのスタイル（デフォルト） */
body {
background-color: #fff;
color: #000;
transition: background-color 0.3s, color 0.3s;
}
/* ダークモードのスタイル */
body.dark-mode {
background-color: #333;
color: #eee;
}
/* ダークモード時のリンク色 */
body.dark-mode a {
color: #add8e6;
}
JavaScript
const themeToggle = document.getElementById(‘theme-toggle’);
const body = document.body;
themeToggle.addEventListener(‘click’, () => {
body.classList.toggle(‘dark-mode’);
if (body.classList.contains(‘dark-mode’)) {
themeToggle.textContent = ‘ライトモードに切り替える’;
localStorage.setItem(‘theme’, ‘dark’); // ローカルストレージに保存
} else {
themeToggle.textContent = ‘ダークモードに切り替える’;
localStorage.setItem(‘theme’, ‘light’); // ローカルストレージに保存
}
});
// ページ読み込み時にテーマを復元
document.addEventListener(‘DOMContentLoaded’, () => {
const savedTheme = localStorage.getItem(‘theme’);
if (savedTheme === ‘dark’) {
body.classList.add(‘dark-mode’);
themeToggle.textContent = ‘ライトモードに切り替える’;
}
});
この方法を使うと、ユーザーがボタンをクリックすることでダークモードを切り替えられます！
3. ダークモード導入時の注意点
・コントラスト比を適切に設定 → 文字が読みにくくならないように調整
・画像の色調整 → ダークモード時に画像が見えづらくならないようにする
・ローカルストレージを活用 → ユーザーの設定を保存し、次回アクセス時にも適用
適切な設定を行えば、ダークモードはサイトのデザインを向上させる強力なツールになります！
まとめ
・ダークモードを導入すると、目の負担軽減＆デザインの多様性向上
・CSSのメディアクエリを使えば、OS設定に応じて自動適用可能
・JavaScriptを使えば、ユーザーが手動で切り替えられるボタンを設置できる
・適切なコントラスト比や画像調整を行い、快適な閲覧環境を提供！
WordPress サイトを運営するなら、ダークモードの導入はデザインカスタマイズの重要なポイント です！
ぜひ、適切な方法でダークモードを実装し、ユーザーの利便性を向上させましょう。
阿久梨絵でした！
