SWELLのデザイン設定｜ヘッダー・カラー・トップページの整え方

2026.09.26

SWELLを導入したあと、「サイトの色はどこで変える？」「トップページは何から整える？」と迷うことがあります。設定項目は多いものの、全体の色→ヘッダー→トップページの順に決めると、変更を確認しやすくなります。

この記事では、SWELLを使うブログのデザインを整える基本手順を説明します。機能全体の購入前の確認はSWELLとは？特徴とできること、導入直後の確認はSWELLの初期設定にまとめています。画面名と設定内容は2026年9月26日にSWELL公式マニュアルで確認しました。

この記事でわかること

ヘッダー・サイトカラー・トップページの設定場所
統一感を出すための設定順
スマートフォン表示と公開前の確認点

この記事を書いた人

この記事を書いている僕は、2021年8月ブログ開始。最初の記事がA8コンテスト入賞。3ヶ月目に収益：単月5桁。シンプルなブログ作りを発信。地味にコツコツ、が得意です。

※当ブログの情報は執筆時点のものであり、最新の情報は各サービスの公式サイトよりご確認ください。
※当ブログのリンクには広告が含まれる場合があります。

SWELLのデザイン設定は3段階で進める

まずメインカラーと背景・文字色を決め、次にロゴやメニューを載せるヘッダー、最後にトップページのメインビジュアルや導線を整えます。すべての装飾を一度に変える必要はありません。ブログの目的に合う配色と読みやすさを優先しましょう。

サイト全体：メインカラー・背景色・テキスト色
ヘッダー：ロゴ、背景・文字色、メニュー、パソコンとスマホの表示
トップページ：メインビジュアル、ピックアップバナー、記事への導線

サイトカラーを設定する

WordPress管理画面の「外観」→「カスタマイズ」から「サイト全体設定」→「基本カラー」を開き、メインカラー、背景色、テキスト色を確認します。SWELLではヘッダーやフッターなどの色も個別に設定できます。SWELL公式：サイトカラー設定を参照してください。

最初は基調色を絞る

メインカラーを1色決め、背景と本文のコントラストを保つと統一感が出ます。見出し、リンク、ボタンの色だけを部分的に変えても、サイト全体の色と合わないことがあります。変更前後をパソコンとスマートフォンで確認しましょう。

記事内のブロック色は別の設定も確認する

本文中のブロックやマーカーの色は、サイトの基本カラーとは別に「SWELL設定」→「エディター設定」→「カラーセット」などから調整する項目があります。SWELL公式：エディターのカラーセットも確認し、サイトカラーと同じ設定だと思い込まないようにします。

ヘッダーとメニューを整える

「外観」→「カスタマイズ」→「ヘッダー」で、ロゴ画像、背景色、文字色、レイアウトなどを設定します。ロゴがない段階はサイト名のテキスト表示で始めても構いません。詳細はSWELL公式：ヘッダー設定を参照してください。

ロゴとサイト名が読めるか
ヘッダーの色とメニュー文字色のコントラストは十分か
メニューに「ブログの始め方」など読者が探す入口があるか
スマートフォンのメニューが開き、目的の記事へ進めるか

メニュー項目の内容はWordPressのメニュー設定で管理します。デザインだけでなく、初めて訪れた人が次に読む記事を見つけられる構成にしましょう。

トップページの見せ方を決める

メインビジュアルは必須ではない

「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」で、画像や動画などの表示を調整できます。ブログの目的が記事検索なら大きな画像を置かずに記事への導線を優先する構成もあります。使う場合は文字と画像の可読性、スマホでの切り抜き、画像容量を確認します。SWELL公式：メインビジュアル。

ピックアップバナーは目的のページへつなぐ

ピックアップバナーには「ブログの始め方」「SWELLとは」など、読者の次の行動に合うページを置きます。SWELL公式はメニューで画像を指定して表示する方法を案内しています。SWELL公式：ピックアップバナー。記事を増やしただけでトップページの導線が自動で整うわけではないので、リンク先と並び順を確認しましょう。

注意：公開中のサイトでは変更前の状態を控える
カスタマイザーのプレビューで確認してから反映しましょう。色やヘッダーの変更はサイト全体に及ぶため、よく読まれる記事とスマートフォン画面も合わせて確認してください。