ダークモードに対応したWordPressテーマをブログ向けに厳選しました。ダークモードを実装したいけどハードルが高いと感じるサイト運営者のために、ダークモードがすでに実装された高機能なワードプレステーマを選びました。
今回載せるテーマはすべてブログ・Webメディアといったコンテンツマーケティング向けに制作されています。コーディングに慣れていないけどカスタマイズしたいという人にもおすすめの内容です。
{tocify} $title={Table of Contents}
{tocify} $title={Table of Contents}
無料配布中！当サイトの運営者Natchanが制作したフリー素材を『イラストAC』にて無料でDLできちゃいます( ^o^)⊃―☆{codeBox}
ダークモードの実装は簡単じゃない
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を利用する人のために購入方法などを説明しているのでぜひチェックしてください。
それでは、厳選したダークモード実装済みのWordPressテーマを教えます。どれもブログに最適なレイアウトになっていますが、配色・フォント・レイアウト等は自由にカスタマイズできます。
ダークモード対応WordPressテーマ12選
それでは、厳選したダークモード実装済みのWordPressテーマを教えます。どれもブログに最適なレイアウトになっていますが、配色・フォント・レイアウト等は自由にカスタマイズできます。
有料テーマは以下の項目を基準にして厳選しました。
| ✔ 6ヵ月のアフターサポート付 | ✔ ブログに最適なデザイン | ✔ 最終更新が2022年以降 |
| ✔ レスポンシブ対応 | ✔ ブロックエディター対応 | ✔ 多くの高評価を獲得 |
※価格はUSドル
Verta〈とてもおすすめ〉
.jpg) |
| ヘッダーからフッターまで非の打ち所がない |
テーマ名：Verta
特徴：
✔ 9種類のテンプレート
✔ 記事編集中もダークモード
✔ 余白がきれいで見やすい
✔ ヘッダーに動画を設定可能
機能：
ダークモード/ブロックエディター対応/細かい配色設定/多言語対応/豊富なヘッダーデザイン/豊富なWebフォント/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
どのテンプレートも丁寧に作り込まれていて、メルマガフォームなど1つ1つのウィジェットがプロフェッショナルなデザイン{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Caards〈とてもおすすめ〉
 |
| 流行りのカーブを活かしたデザイン |
テーマ名：Caards
特徴：
✔ 6種類のテンプレート
✔ 記事編集中もダークモード
✔ 読みやすいタイポグラフィー
✔ 詳しい使用説明書あり
機能：
ダークモード/ブロックエディター対応/細かい配色設定/多言語対応/豊富な記事レイアウト/豊富なWebフォント/メガメニュー対応/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
ブログカードだけじゃなく、画像やコメント欄まですべて美しいカーブで統一されたデザインがトレンド感あるテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Squaretype〈とてもおすすめ〉
特徴：
✔ 6種類のテンプレート
✔ 記事編集中もダークモード
✔ 余白がきれいで見やすい
✔ おしゃれなタイムライン
機能：
ダークモード/ブロックエディター対応/細かい配色設定/多言語対応/豊富な記事レイアウト/豊富なWebフォント/メガメニュー対応/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
ダークモード/ブロックエディター対応/細かい配色設定/多言語対応/豊富な記事レイアウト/豊富なWebフォント/メガメニュー対応/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
SquaretypeはTwitterのタイムラインやInstagramのフィードをおしゃれに表示できるスタイリッシュなテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Zeen
 |
| 海外の人気サイトによく使われる |
テーマ名：Zeen
特徴：
✔ 30種類のテンプレート
✔ Retinaディスプレイにも対応
✔ PR記事向けの機能あり
✔ 多くのプラグインと互換性あり
機能：
ダークモード/ブロックエディター対応/メルマガフォーム付/多言語対応/Cookie同意ポップアップ/豊富なWebフォント/レスポンシブ/絵文字リアクション/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
ZeenはブログだけじゃなくECサイト・ポートフォリオ・ニュースメディアなど様々なウェブサイトに対応したテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Schematic
 |
| 画像よりもタイポグラフィが際立つ |
テーマ名：Schematic
特徴：
✔ 8種類のテンプレート
✔ モダンでミニマルなデザイン
✔ ユーザー登録なしでゲスト投稿可
✔ 目次・読了時間・閲覧数を表示可
機能：
ダークモード/ブロックエディター対応/細かい配色設定/メルマガフォーム付/Cookie同意ポップアップ/多言語対応/豊富なWebフォント/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Schematicは他ではあまり見ないスタイリッシュなレイアウトやタイポグラフィがとてもお洒落なテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Chloé
 |
| 整ったフッターがおしゃれ |
テーマ名：Chloé
特徴：
✔ 9種類のテンプレート
✔ ユーザー登録なしでゲスト投稿可
✔ 目次・読了時間・閲覧数を表示可
機能：
ダークモード/ブロックエディター対応/細かい配色設定/メルマガフォーム付/Cookie同意ポップアップ/多言語対応/豊富なWebフォント/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Chloéはどのテンプレートもサムネイルやヘッダーが大きいので画像をダイナミックに見せたい人向け{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Newsblock
 |
| ブロックを多用したデザインが特徴 |
テーマ名：Newsblock
特徴：
✔ 9種類のテンプレート
✔ 目次・読了時間・閲覧数を表示可
機能：
ダークモード/ブロックエディター対応/メルマガフォーム付/Cookie同意ポップアップ/多言語対応/豊富なWebフォント/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Newsblockはどのテンプレートもクールな雰囲気をもつメディア向けのテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
Katen
 |
| 個人ブログ向けのテンプレが多め |
テーマ名：Katen
特徴：
✔ 7種類のテンプレート
✔ 追従型のダークモード
✔ 記事上部にスクロールバー
機能：
ダークモード/ブロックエディター対応/メルマガフォーム付/多言語対応/Webフォント/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Katenはどのテンプレートもクリーンでミニマルなデザインの親しみやすい雰囲気のテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
SmartMag
 |
| 個人向けから法人まで幅広いテンプレート |
テーマ名：SmartMag
特徴：
✔ 32種類のテンプレート
✔ デフォルトでダークモード可
機能：
ダークモード/ブロックエディター対応/豊富なヘッダー/メルマガフォーム付/豊富なWebフォント/レスポンシブ/豊富なシェアボタン/アドセンス最適化/高速化/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}
Mura
 |
| 文字が大きくて見やすい |
テーマ名：Mura
特徴：
✔ 15種類のテンプレート
✔ 追従型のダークモード
機能：
ダークモード/ブロックエディター対応/メルマガフォーム付/レスポンシブ/豊富な記事レイアウト/アドセンス最適化/高速化/SEO強化/定期的にアップデート,etc.
Muraはトップページや記事レイアウトが豊富なのが特徴のテーマ{alertSuccess}
{getButton} $text={デモサイトをみる} $icon={preview} $color={#0099ff}
最後に｜おすすめ制作会社
以上、ダークモード実装済みWordPressブログテーマを厳選しました。
すでにお気づきかもしれませんが、紹介したテーマのほとんどがCodeSupplyCo.が手掛けたデザインです。
この制作会社はワードプレステーマに特化したデザイン会社で、とても良く出来たテーマばかりでかなりおすすめです。販売しているテーマのほとんどがダークモードに対応しています。
また何か良いWordPressテーマを見つけたら今後も紹介していきます。以下の記事もおすすめです↓
You may also like :
- Envato Marketの購入方法や使い方を解説〈海外フリー素材〉
- 写真を魅せるポートフォリオ向けWordPress有料テーマを厳選
- WordPressテーマを購入する際の注意点とチェックポイント PR 初心者でも安心！たった10分で出来るWordPressブログの始め方
