SWELLのトップページを固定ページで作る方法｜サイト型の作り方

2026年9月26日2026年10月7日

当ページのリンクには広告が含まれています。

「SWELLで、おしゃれなサイト型のトップページを作りたい」「固定ページをトップページにするには、どこを設定すればいい？」。ブログの記事が増えてくると、トップページの見せ方を変えたくなる人は多いと思います。

私はWordPressを8年使っていて、今はこのブログを含めてSWELLを使っています。この記事では、SWELLで固定ページを使ってサイト型のトップページを作る方法を、設定の順番どおりに解説します。

この記事でわかること

ブログ型とサイト型のトップページの違い
固定ページをトップページに設定する手順
サイト型トップページで使うSWELLのブロック
トップページの構成例と、作るときの注意点

はじめに

この記事は、WordPressとSWELLの2026年9月時点の画面をもとにしています。メニューの名前や配置は、バージョンによって変わることがあります。SWELLの細かい設定は、SWELL公式のマニュアルもあわせて確認してください。

タクミ

トップページを固定ページにすると、何が変わるの？

ガイ

新着記事が並ぶだけのトップページから、自分で自由に組み立てたトップページに変えられるんです。見せたい記事やカテゴリーを、狙った順番で並べられますよ。

結論｜SWELLのサイト型トップページは「固定ページ＋表示設定」で作る

先に全体の流れです。

手順	やること
1	トップページ用の固定ページを作る（例：「HOME」）
2	新着記事一覧用の固定ページを作る（例：「新着記事」）
3	「ホームページの表示」を固定ページに切り替える
4	トップページのサイドバーや余白を調整する
5	SWELLのブロックで中身を組み立てる

ポイントは、「どのページをトップページにするか」はWordPress側の設定、「見た目」はSWELLのブロックで作るという役割分担です。プラグインもコードも不要で、SWELLの標準機能だけで作れます。

POINT

表示設定を切り替えるのは、固定ページの中身をある程度作り込んでからにしましょう。先に切り替えると、作りかけのトップページを読者に見せることになります。

ブログ型とサイト型の違い

WordPressのトップページは、大きく2つのタイプに分かれます。

項目	ブログ型	サイト型
トップページの中身	新しい記事が順番に並ぶ	自分で組み立てたページ
設定	「最新の投稿」を表示（初期設定）	固定ページを表示
手間	ほぼかからない	最初の作り込みが必要
向いているサイト	日記・雑記ブログ、更新頻度を見せたいサイト	特化ブログ、見せたい記事が決まっているサイト、店舗・会社のサイト

ちなみに、このブログ「仕事以外。」は、今はトップページに最新の記事が並ぶブログ型です。記事が少ないうちはブログ型、記事が増えて「読んでほしい記事」がはっきりしてきたらサイト型を考える、という順番でも遅くありません。

手順1・2｜トップページ用と新着記事用の固定ページを作る

まずは、2つの固定ページを用意します。

トップページ用の固定ページを作る管理画面の「固定ページ」→「新規固定ページを追加」で、タイトルを「HOME」などにします。スラッグ（URL）は「home」など、分かりやすい英字にしておきます。中身は空のままで大丈夫です。
新着記事一覧用の固定ページを作る同じように、タイトル「新着記事」などの固定ページを作ります。スラッグは「blog」「new-post」などにします。こちらは中身を書かずに、空のままにしておきます。
2つとも公開する表示設定で選べるのは、公開済みの固定ページです。公開しても、メニューやリンクを張らなければ読者の目にはほぼ触れません。

注意

新着記事一覧用のページに文章やブロックを書いても、投稿ページに設定すると記事の一覧が表示されるだけで、書いた内容は表示されません。中身は空のままでOKです。

手順3｜ホームページの表示を固定ページに切り替える

次に、作った固定ページをトップページに設定します。

「設定」→「表示設定」を開くカスタマイザーの「ホームページ設定」からでも同じ設定ができます。
「ホームページの表示」で「固定ページ」を選ぶ初期設定は「最新の投稿」になっています。
「ホームページ」に「HOME」を選ぶトップページとして表示する固定ページです。
「投稿ページ」に「新着記事」を選ぶここに設定したページが、記事の一覧ページになります。
「変更を保存」を押すサイトのトップページを開いて、表示が切り替わったか確認します。

設定項目	選ぶもの
ホームページの表示	固定ページ
ホームページ	HOME（トップページ用に作った固定ページ）
投稿ページ	新着記事（記事一覧用に作った固定ページ）

ユイ

投稿ページって、設定しないとダメなの？

ガイ

設定しなくても動きますが、「すべての記事の一覧」を見られるページがなくなってしまいます。読者が過去の記事を探しやすいように、設定しておくのがおすすめです。

手順4｜トップページのサイドバーと余白を調整する

サイト型のトップページは、横幅を広く使うと見栄えがよくなります。

サイドバーを非表示にする

SWELLでは、カスタマイザーの「サイドバー」の設定で、トップページにサイドバーを表示するかどうかを切り替えられます。サイト型なら、チェックを外して1カラムにするのが一般的です。固定ページの編集画面の右側にある「SWELL設定」からも、そのページだけ表示を上書きする設定ができます。

余白やタイトルの表示を整える

固定ページの編集画面の右側にある「SWELL設定」では、ページごとに表示を調整できます。コンテンツの上下の余白や、タイトルの表示などを調整すると、メインビジュアルやフルワイドブロックとの間の余計なすき間をなくせます。実際に表示を見ながら、好みの見た目に調整しましょう。

メインビジュアルを使うかどうか決める

SWELLのメインビジュアル（トップページの一番上に大きく表示される画像）は、固定ページをトップページにしても使えます。メインビジュアルを使う場合は、固定ページの中身は「その下に続く部分」として作ります。メインビジュアルを使わず、固定ページの中にフルワイドブロックで大きな画像を置く方法もあります。

手順5｜SWELLのブロックでトップページを組み立てる

いよいよ中身です。SWELLには、サイト型トップページ作りに使いやすいブロックがそろっています。

ブロック	できること	トップページでの使い方の例
フルワイド	画面の横幅いっぱいに背景色や画像を敷ける	セクションごとの区切り、大きな見出しエリア
投稿リスト	条件を指定して記事の一覧を表示できる	カテゴリー別の記事、新着記事、人気記事
ボックスメニュー	アイコン付きのボタンを並べられる	カテゴリーへの入り口
リッチカラム	複数の列に分けてレイアウトできる	「このブログについて」とプロフィールの横並び
SWELLボタン	目立つボタンを置ける	おすすめ記事や問い合わせへの誘導
ブログパーツ	よく使うパーツを登録して使い回せる	複数のページで共通のバナーや案内

SWELLを使っている私の本音

SWELLのいいところは、こうしたブロックを並べるだけで、コードを書かずにページを組み立てられることです。私は記事の装飾をAIにHTMLで作ってもらい、SWELLの「カスタムHTML」ブロックに貼り付けて使っています。トップページのように、あとから並べ替えや差し替えをすることが多いページは、SWELLのブロックで組んでおくと画面を見ながら編集できます。

サイト型トップページの構成例

何を置けばいいか迷ったら、次の順番を土台にするのがおすすめです。

メインビジュアルサイトのテーマがひと目で分かる画像とキャッチコピー。
カテゴリーへの入り口ボックスメニューで、主要なカテゴリーへのボタンを並べます。
おすすめ記事いちばん読んでほしい記事を、投稿リストやピックアップバナーで目立たせます。
カテゴリー別の記事一覧フルワイドで区切り、カテゴリーごとに投稿リストを置きます。
新着記事更新していることが伝わるよう、新しい記事の一覧を置きます。
運営者プロフィール誰が書いているサイトかを伝え、信頼につなげます。

読者に最初に見てほしいものを上に置くのが基本です。特化ブログなら「おすすめ記事」、雑記ブログなら「カテゴリーへの入り口」を上に置くと、読者が迷いにくくなります。

サイト型トップページを作るときの注意点

作り込みすぎない：要素を詰め込むと、スマホで縦に長くなりすぎます。スマホでの見え方を必ず確認しましょう
画像を重くしない：大きな画像を多用すると、表示が遅くなります。画像は圧縮してから使います
更新の手間を考える：手動で選んだ記事は、新しい記事を書いたら入れ替える必要があります。投稿リストのように自動で更新されるブロックも組み合わせると、手間が減ります
元に戻す方法を知っておく：「ホームページの表示」を「最新の投稿」に戻せば、いつでもブログ型に戻せます

タクミ

作ってみて気に入らなかったら、元に戻せる？

ガイ

戻せます。表示設定で「最新の投稿」を選び直すだけです。作った固定ページも消えずに残るので、気軽に試してみてください。

ブログ運営や副業については、こちらの記事も参考にしてください。