SWELL デモサイト「DEMO02」トップページ構成図｜場所・名前・設定まとめ

この記事は、SWELL DEMO02を使って実際に運営している私の記録をもとにまとめています。

SWELL初心者の方でも迷わず設定できるよう、
私自身の試行錯誤を画面つきでまとめています。

DEMO02トップページ構成マップ（全体図）

DEMO02の初期画面をもとに、
各パーツの位置や名前がわかるように整理した図です。

こちらが、構成マップの元になっている
SWELL DEMO02導入直後の画面です。

🌸 各パーツ別・設定場所まとめ

ヘッダーバー

📍 位置：ページ最上部の細い帯

🛠️ 設定：
外観 → カスタマイズ → ヘッダーバー

💡 メモ：
重要なお知らせがあるときだけ表示

---

ヘッダー

📍 位置：ロゴ・メニューが並ぶ部分

🛠️ 設定：
外観 → カスタマイズ → ヘッダー

💡 メモ：
ロゴサイズと背景色を調整

---

お知らせバー

📍 位置：ヘッダー下の横長バー

🛠️ 設定：
外観 → カスタマイズ → お知らせバー

💡 メモ：
トップ案内用に使用

---

メインビジュアル

📍 位置：トップの大きな画像エリア

🛠️ 設定：
外観 → カスタマイズ → トップページ → メインビジュアル

💡 メモ：
暗さ・高さを調整して見やすく

---

記事スライダー

📍 位置：横に流れる記事エリア

🛠️ 設定：
外観 → カスタマイズ → 記事スライダー

💡 メモ：
カテゴリー・タグ両方で試した

ピックアップバナー

📍 位置：タブ付き記事一覧

🛠️ 設定：
外観 → カスタマイズ → ピックアップバナー
＋ 投稿一覧リストブロック

💡 メモ：
固定ページで作成

メインエリア

📍 位置：記事一覧が並ぶ中央部分

🛠️ 設定：
固定ページ（トップ用）編集画面

💡 メモ：
ブロック配置を調整

---

サイドバー

📍 位置：画面右側の縦エリア

🛠️ 設定：
外観 → ウィジェット

💡 メモ：
必要なものだけ表示

---

フッター

📍 位置：ページ最下部

🛠️ 設定：
外観 → カスタマイズ → フッター

💡 メモ：
コピーライト調整

---

🔗関連記事リンク

📸 このあと調整した現在のトップページ（2026年1月）