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

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

この記事では、SWELLを使うブログのデザインを整える基本手順を説明します。機能全体の購入前の確認はSWELLとは？特徴とできること、導入直後の確認はSWELLの初期設定にまとめています。

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

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

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

サイトカラーを設定する

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

最初は基調色を絞る

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

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

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

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

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

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

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

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

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

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

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

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

デザイン設定後に確認すること

• パソコンとスマートフォンでヘッダー・メニューを操作する
• タイトル、本文、リンク、ボタンの文字が背景と区別できるか確認する
• トップページのバナーが公開中の目的ページへ移動するか確かめる
• メインビジュアルを使う場合は表示速度と画像の見え方を確認する
• 見出しやブロックの装飾が記事ごとにばらついていないか確認する

装飾の使い方を詳しく知りたい場合はSWELL専用ブロックの種類と使い分けも参考にしてください。

よくある質問

デモサイトと同じ見た目にしないといけない？

必要ありません。デモサイトは機能の見本です。ブログでは読者が記事を見つけやすく、本文を読みやすいことが先です。

色を変更したのに記事内のボックスが変わらないのはなぜ？

サイト全体の基本カラーとエディターのカラーセット、個々のブロックに指定した色は設定場所が異なります。該当箇所の設定を順に確認してください。

各装飾の使い分けはSWELL専用ブロックの種類と使い分け、基本操作はSWELLの使い方、テーマ全体の特徴はSWELLとは？特徴とできることで確認できます。

まとめ

SWELLのデザイン設定は、サイトカラー、ヘッダー、トップページの順で整えると迷いにくくなります。最初から多くの装飾を足すよりも、読者が迷わず記事を読める配置を目標にしましょう。機能や画面表示は更新されるため、作業時は公式マニュアルの最新版も確認してください。