ダークモードに対応したWordPressテーマをブログ向けに厳選しました。ダークモードを実装してみたいけど自分でやるにはハードルが高いと感じてるサイト運営者のために、ダークモードがすでに実装された高機能なワードプレステーマを選びました。
今回載せるテーマはすべてブログ・Webメディア/マガジンといったコンテンツマーケティング向けに制作されています。コーディングに慣れていないけどカスタマイズしたいという人にもおすすめの内容です。
{tocify} $title={Table of Contents}
Ads
無料体験で耳活!月額1,500円で12万冊以上の対象作品が聴き放題になる【Amazon Audible】
WordPressでダークモードを実装する簡単なやり方として「WP Dark Mode」というプラグインを利用する方法がありますが、このプラグインはレビューを確認すると、テーマやOSによっては上手く機能しないことが指摘されています。
{tocify} $title={Table of Contents}
Ads
無料体験で耳活!月額1,500円で12万冊以上の対象作品が聴き放題になる【Amazon Audible】
ダークモードの実装は簡単じゃない
WordPressでダークモードを実装する簡単なやり方として「WP Dark Mode」というプラグインを利用する方法がありますが、このプラグインはレビューを確認すると、テーマやOSによっては上手く機能しないことが指摘されています。
If I change the display mode (light<–>dark) in macOS Ventura, my website doesn’t switch to dark mode. It worked once at the beginning, but now the functionality is broken. ―Review
When you uninstall it, these changes remain! It can break your whole design ! Very very intrusive plugin !!! ―Review
macOSでは動作しない、テーマ内のCSSコードを勝手に書き換えてしまうなどの問題があるようです。また、各サイトによって利用されるブログパーツは異なり、そのパーツごとに追加でCSSコードを書き足す必要があるのは、コーディングに慣れていない人にとっては結構ハードルが高いです。
そこで、ダークモード実装済みの高機能なWordPressテーマを海外デザインストアのThemeForestから厳選しました。どれも基本ノーコードでカスタマイズできる優秀なテーマです。
ThemeForestとは?
ThemeForestとはEnvato Marketに属する主にWordPressのテーマを販売するデザインストアです。オーストラリア企業Envatoによるサービス。
海外ではとても知名度が高いストアですが、日本語非対応のため国内ではあまり知られていません。ここら辺の詳しい説明は以下の関連記事で解説しています。
初めてThemeForestいわゆるEnvato Marketを利用する人のために購入方法などを説明しているのでぜひチェックしてください。
関連記事:
Envato Marketの購入方法や使い方を解説〈海外フリー素材〉
それでは、厳選したダークモード実装済みのWordPressテーマを教えます。どれもブログに最適なレイアウトで制作されていますが、配色・フォント・レイアウト等は自由にカスタマイズできます。※価格はUSドル
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
テーマ名:Networker
関連記事:
Envato Marketの購入方法や使い方を解説〈海外フリー素材〉
ダークモード対応WordPressテーマ10選
それでは、厳選したダークモード実装済みのWordPressテーマを教えます。どれもブログに最適なレイアウトで制作されていますが、配色・フォント・レイアウト等は自由にカスタマイズできます。※価格はUSドル
Verta〈とてもおすすめ〉
![]() |
ヘッダーからフッターまで非の打ち所がない |
テーマ名:Verta
特徴:
✔ 9種類のテンプレート
✔ 記事編集中もダークモード
✔ 余白がきれいで見やすい
✔ ヘッダーに動画を設定可能
機能:
ダークモード/ブロックエディター対応/細かい配色設定/多言語対応/豊富なヘッダーデザイン/Adobe Fonts/Google Fonts/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
どのテンプレートも丁寧に作り込まれているかつメルマガフォームといった1つ1つのウィジェットがプロフェッショナル{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Networker〈とてもおすすめ〉
![]() |
Vertaと同じ会社が制作 |
特徴:
✔ 6種類のテンプレート
✔ 記事編集中もダークモード
✔ 余白がきれいで見やすい
✔ ヘッダーに動画を設定可能
機能:
ダークモード/ブロックエディター対応/細かい配色設定/多言語対応/豊富な記事一覧デザイン/Adobe Fonts/Google Fonts/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
ダークモード/ブロックエディター対応/細かい配色設定/多言語対応/豊富な記事一覧デザイン/Adobe Fonts/Google Fonts/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Networkerはサイトの外観だけじゃなく記事編集画面までダークモードに対応したWordPress史上初のテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Zeen
![]() |
海外の人気サイトによく使われる |
テーマ名:Zeen
特徴:
✔ 30種類のテンプレート
✔ Retinaディスプレイにも対応
✔ PR記事向けの機能あり
✔ 多くのプラグインと互換性あり
機能:
ダークモード/ブロックエディター対応/メルマガフォーム付/多言語対応/Cookie同意ポップアップ/Typekit Fonts/Google Fonts/レスポンシブ/絵文字リアクション/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
ZeenはブログだけじゃなくECサイト・ポートフォリオ・ニュースメディアなど様々なウェブサイトに対応したテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Schematic
![]() |
画像よりもタイポグラフィが際立つ |
テーマ名:Schematic
特徴:
✔ 8種類のテンプレート
✔ モダンでミニマルなデザイン
✔ ユーザー登録なしでゲスト投稿可
✔ 目次・読了時間・閲覧数を表示可
機能:
ダークモード/ブロックエディター対応/細かい配色設定/メルマガフォーム付/Cookie同意ポップアップ/多言語対応/Adobe Fonts/Google Fonts/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Schematicは他ではあまり見ないスタイリッシュなレイアウトやタイポグラフィがとてもお洒落なテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Chloé
![]() |
整ったフッターがおしゃれ |
テーマ名:Chloé
特徴:
✔ 9種類のテンプレート
✔ ユーザー登録なしでゲスト投稿可
✔ 目次・読了時間・閲覧数を表示可
機能:
ダークモード/ブロックエディター対応/細かい配色設定/メルマガフォーム付/Cookie同意ポップアップ/多言語対応/Adobe Fonts/Google Fonts/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Chloéはどのテンプレートもサムネイルやヘッダーが大きいので画像をダイナミックに見せたい人向け{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Newsblock
![]() |
ブロックを多用したデザインが特徴 |
テーマ名:Newsblock
特徴:
✔ 9種類のテンプレート
✔ 目次・読了時間・閲覧数を表示可
機能:
ダークモード/ブロックエディター対応/メルマガフォーム付/Cookie同意ポップアップ/多言語対応/Adobe Fonts/Google Fonts/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Newsblockはどのテンプレートもクールな雰囲気をもつメディア向けのテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
SmartMag
![]() |
個人向けから法人まで幅広いテンプレート |
テーマ名:SmartMag
特徴:
✔ 32種類のテンプレート
✔ デフォルトでダークモード可
機能:
ダークモード/ブロックエディター対応/豊富なヘッダー/メルマガフォーム付/Adobe Fonts/Google Fonts/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
SmartMagはPC・モバイルともにヘッダーの種類が多く用意されていることが特徴{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Foxiz
![]() |
全体的にアメリカン |
テーマ名:Foxiz
特徴:
✔ 95種類のテンプレート
✔ ブックマーク機能あり
機能:
ダークモード/ブロックエディター対応/メルマガフォーム付/Cookie同意ポップアップ/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Foxizはテンプレートが95種類ととにかく多いのと1つ1つ雰囲気が変わるので複数サイトを運営する人におすすめ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Wesper
![]() |
多機能ではないが安く購入できる |
テーマ名:Wesper
特徴:
✔ 23種類のテンプレート
機能:
ダークモード/ブロックエディター対応/レスポンシブ/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Wesperは多機能ではありませんが他社と比べて価格が低いのが魅力{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Pressroom
![]() |
デモサイト内で編集可 |
テーマ名:Pressroom
特徴:
✔ 1種類のテンプレート
✔ 閲覧数を表示可
機能:
ダークモード/ブロックエディター対応/Google Fonts/レスポンシブ//定期的にアップデート,etc.
Pressroomはところどころにアニメーションが活用されているのが特徴{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
最後に|おすすめ制作会社
以上、ダークモード実装済みWordPressブログテーマを厳選しました。
すでにお気づきかもしれませんが、紹介したテーマのほとんどがCodeSupplyCo.が手掛けたデザインです。
この制作会社はワードプレステーマに特化したデザイン会社で、とても良く出来たテーマばかりでかなりおすすめです。
また何か良いWordPressテーマを見つけたら今後も紹介していきます。
You may also like :
Ads
ブログ運営始めるなら要チェック!1円で取得&移管可能で更新料も安い【Xserverドメイン】
