「SWELLは使いやすい。でも、どのサイトも同じに見える……」
そんな悩みを持っていませんか？ WordPressテーマ「SWELL」は国内No.1の人気を誇りますが、そのぶんデザインが被りやすいのが唯一の欠点です。特に、デフォルトの「白ベース」のままだと、どうしても「よくあるブログ」になりがちです。
「もっとクールで、没入感のあるサイトを作りたい」 「サイバーパンクや、テック感のある黒いサイトにしたい」
そう思って「背景 黒」に設定してみたものの、文字が見にくくなったり、白い枠線が浮いてしまったりして、結局元に戻した経験がある方もいるかもしれません。
実は、SWELLで美しいダークモードサイトを作るには、「設計図（配色のロジック）」が必要です。
この記事では、私が立ち上げた本ブログ「FUKO NEURO RELAX」を実例に、CSS（コード）を一切書かずに、SWELL標準機能だけで「プロ級のダークモードサイト」を作る全手順を公開します。
なぜ背景を「真っ黒（#000000）」にしてはいけないのか？
まず、最大の失敗例からお伝えします。 ダークモードにしようとして、背景色を完全な黒（#000000）にするのはNGです。
自然界に「完全な黒」や「完全な白」はほとんど存在しません。 モニター上でコントラストが強すぎる配色は、読者の目を強烈に疲れさせます（＝離脱率が上がる）。
洗練されたダークサイトを作るための「黄金比」は以下の通りです。
推奨のカラーコード
私がこのサイトで使用している配色はこれです。
- ベースカラー（背景色）：
#1A1A1A（そのままコピペしてください。）- 真っ黒ではなく「限りなく黒に近いダークグレー」にすることで、画面に奥行きが生まれます。
- テキストカラー（文字色）：
#F0F0F0- 真っ白（#FFFFFF）だと眩しすぎます。少しだけ明度を落とすのがコツです。
- メインカラー（アクセント）：
#00E0D0（エレクトリック・ターコイズ：本サイトのエメラルドグリーン）- ダークモードの中で「ネオンサイン」のように光る色を選びます。これで一気にサイバー感が出ます。
【手順】SWELLカスタマイザー設定のすべて
それでは、実際の画面で設定していきましょう。 いじるのは**「外観」＞「カスタマイズ」**だけです。
① 「コンテンツ背景」の白を消す（最重要）
多くの人がつまづくのがここです。 SWELLの初期設定では、記事の文章が入る部分に「白い背景」が設定されています。
黒背景に白い箱が浮いている状態は、非常にダサいです。
【設定手順】 サイト全体設定 ＞ 基本デザイン
- 「コンテンツの背景を白くする」：オフにする（チェックを入れる）
これで、サイト全体がシームレスなダーク空間になります。これだけで印象が激変します！
② 記事リストを「テキスト型」にする
トップページの記事一覧デザインです。 「カード型」は便利ですが、カードごとの影（ドロップシャドウ）の調整が難しく、ダークモードでは浮いて見えがちです。
【設定手順】 記事一覧リスト ＞ リストレイアウト設定
- PC / SPレイアウト：「テキスト型」 選択
これで、背景に馴染むスタイリッシュなリストになります。
③ フォントを「Noto Sans JP」に変える
黒背景のサイトは「モダン（現代的）」な印象が命です。
デフォルトのフォントから、デジタルデバイスで最も美しく見えるフォントに変更します。
【設定手順】 サイト全体設定 ＞ 基本デザイン
- フォント設定：「Noto Sans JP」 を選択
これだけで、サイト全体が「テック企業」のような知的な雰囲気に変わります。
④ 見出しデザインをシンプルにする
見出し（H2, H3）のデザインも、黒背景に合わせて調整します。
「吹き出し」や「ステッチ」などの装飾系は、ダークモードでは子供っぽくなるので避けましょう。
【設定手順】 外観カスタイマイズ ＞ 投稿・固定ページ＞ コンテンツのデザイン
- H2：「左に縦線」や「左に2色のブロック」など、シンプルなもの（ここはお好みで！）
- H3：「下線（メインカラー）」など
線の色に、先ほどの メインカラー（#00E0D0）が効いてきます。闇の中でネオンが光るような演出です。
⑤ キャプションボックスの色も調整する
ここが見落としがちなポイントです。 記事内で使う「ポイント」「注意」などの囲み枠（キャプションボックス）。
ここがデフォルトのままだと、黒サイトの中で淡いカラーが浮いてしまい、めちゃくちゃダサくなります。
【設定手順】 SWELL設定 ＞ エディター設定 ＞ カラーセット
- カラーセットの
「キャプションボックス」の右側の「色を選択」を 「極めて薄いグレー（#333333）」 に変更
こうすることで、枠線だけが光るサイバーな表現になります。
⑥ 【盲点】アイコンボックスは「ボーダー」に変える
ここが今回、私が実際にいじっていて発見した一番のこだわりポイントです。
記事の中で「ここをチェック！」などを目立たせる「アイコンボックス（小）」。
デフォルトの「スタイル」は中身が塗りつぶされていることが多いですが、黒背景でこれをやると、色がくすんだり、野暮ったい印象になってしまいます。
【設定手順】 SWELL設定 ＞ エディター設定 ＞ アイコンボックス
- スタイル：「ボーダー」 を選択
こうすることで、枠線だけが光って見えるようになり、まるで「サイバーパンクなモニター表示」のようなクールな見た目になります。
中を塗りつぶさないことで「抜け感」が出て、記事全体がスッキリ読みやすくなる効果もあります。これは絶対にやっておくべき設定です。
仕上げ：Midjourney（AI画像）との相性
私がダークモードにこだわった最大の理由は、「AI画像（Midjourney）を最高に美しく見せるため」です。
白い画用紙の上に絵を飾るより、暗い美術館でスポットライトを当てた方が、作品は際立ちますよね？
Webサイトも同じです。
このように、背景を落とすことで、AIが生成した「光の表現」や「鮮やかな色」が、画面から飛び出してくるような没入感を生みます。
結論：SWELLは「白」だけじゃない
SWELLは「かわいい」「柔らかい」デザインが得意だと思われがちですが、設定次第でここまで「クールで尖ったサイト」に変身します。
しかも、これらすべてがCSS（プログラミング）なしで、マウス操作だけで完結する。
やはりSWELLの機能性はバケモノ級です。
もしあなたが、
- 「人とは違うサイトを作りたい」
- 「自分の世界観を爆発させたポートフォリオを作りたい」
- 「でも、コードを書くのは面倒くさい」
そう思っているなら、選ぶべきテーマは間違いなくSWELL一択です。
自分だけの「秘密基地」のようなサイト、あなたも作ってみませんか？
＼ 当サイトも使用中！ ／