WordPressテーマ「SWELL」を使い始めて、最初に悩むのがフロントページ設定ではないでしょうか。
インストールした直後はブログ一覧がそのままトップページに表示されていて、「これをどうやっておしゃれなサイト型に変えるの？」と頭を抱える人は少なくありません。
実は手順さえ理解すれば、プログラミングの知識がなくても、見栄えのするトップページを作ることができます。
この記事では、SWELLのフロントページ設定を順を追って丁寧に説明します。
この記事でわかること
- SWELLでフロントページをサイト型に切り替えるための基本手順
- 固定ページの作成からWordPress表示設定までの流れ
- メインビジュアルやフルワイドブロックを使ったトップページのカスタマイズ方法
- よくあるつまずきポイントと、その対処法
SWELLのフロントページ設定とは？ブログ型とサイト型の違いを理解しよう
SWELLのフロントページ設定を変更する前に、まず「ブログ型」と「サイト型」の違いを把握しておくことが大切です。
どちらを選ぶかによって、サイト全体の印象が大きく変わる可能性があります。
ブログ型トップページとは
WordPressをインストールして何も設定を変えていない状態のトップページは、ブログ型と呼ばれます。
最新の投稿記事が新しい順に一覧表示されるシンプルな形式で、読者が訪れるたびに新着記事がすぐ目に入るメリットがあります。
日記感覚で記事を更新していくスタイルのブログには向いていますが、企業サイトや複数ジャンルを扱うメディアには少々物足りない見た目になりがちです。
ブログ型は設定不要で使えるので、立ち上げたばかりのころは多くの人がこのまま運用しています。
しかしサイトの規模が大きくなってきたり、特定のコンテンツをピックアップして見せたくなったりすると、自然とサイト型への切り替えを検討するようになります。
サイト型トップページとは
一方のサイト型は、自分で作った固定ページをトップページとして表示する方式です。
大きなメインビジュアル（バナー画像やスライドショー）を配置したり、カテゴリ別の記事一覧を並べたり、自己紹介や問い合わせへの導線を自由にレイアウトできます。
SWELLが人気を集める理由のひとつが、この「コードを書かなくてもサイト型トップページが作れる」点です。
Gutenberg（グーテンベルク）エディターのブロック機能を使い、フルワイドブロックやカラムブロック、投稿リストブロックなどを組み合わせるだけで、プロフェッショナルな見た目のページを作成することができます。
どちらを選べばいい？
| タイプ | 向いているケース | 主なメリット |
|---|---|---|
| ブログ型 | 日記・雑記ブログ・記事数が少ない段階 | 設定不要ですぐ使える |
| サイト型 | メディアサイト・複数ジャンル・見た目重視 | 自由なレイアウト・ブランディングしやすい |
どちらが絶対に優れているというわけではありませんが、SWELLを選んだ人の多くはサイト型を目指していることが多いです。
SWELLの機能を活かしてサイト型トップページを作成することが、多くのユーザーにとって人気の選択肢となっています。
なお、サイト型に切り替えたあとでも、ブログ一覧ページ（投稿ページ）は別途設定することで、記事一覧へのアクセスを確保できます。
トップページをおしゃれにしながら、記事へのナビゲーションも両立できるのがSWELLの魅力です。
この仕組みを理解した上で、次のセクションから実際の操作手順を見ていきましょう。
手順に沿って管理画面の操作を進めることで、設定が可能です。
固定ページを作成してフロントページの下準備をする手順
SWELLでサイト型トップページを実現するには、まず「フロントページ用の固定ページ」と「投稿一覧用の固定ページ」の2つを用意する必要があります。
この準備ができていないと、WordPress側の表示設定が正しく機能しません。
フロントページ用の固定ページを新規作成する
WordPress管理画面の左サイドバーから「固定ページ」→「新規追加」をクリックします。
タイトルは「HOME」や「トップページ」など、自分がわかりやすい名前をつけておけばOKです。
ページの本文エリアは、このタイミングでは空白のまま（もしくはメッセージを一行だけ入れておく程度）で構いません。
あとでブロックエディターを使って本格的なデザインを作り込んでいきます。
作成した固定ページは必ず「公開」状態にしておいてください。
下書きのままだと、表示設定でページを選択しても正常に反映されません。
これがよくあるつまずきポイントのひとつなので注意しましょう。
また、固定ページを公開するときに「スラッグ（URL）」を確認しておくと後々便利です。
スラッグは右サイドバーの「パーマリンク」欄で変更できます。
「home」や「top」などシンプルな英字にしておくと管理しやすいです。
投稿一覧用の固定ページも作っておく
次に、ブログの記事一覧を表示するための固定ページも別途作成します。
タイトルは「BLOG」や「記事一覧」が一般的です。
こちらも本文は空白のままで問題ありません。
WordPressが自動的に最新の投稿記事を一覧表示してくれます。
この固定ページを用意しておくことで、「トップページ＝サイト型」「記事一覧ページ＝ブログ型」という構成が成立します。
ヘッダーメニューに「記事一覧」リンクを追加しておけば、読者が記事を探しやすくなります。
テンプレート設定も忘れずに確認する
固定ページを作成したら、右サイドバーの「テンプレート」欄を確認してください。
SWELLには固定ページ専用のテンプレートが複数用意されています。
フロントページ用のページには「サイトトップ用（タイトルなし）」を選択しておくのがベストです。
このテンプレートを選ぶと、ページタイトルやサイドバーが非表示になり、全幅でコンテンツを表示できます。
一方、投稿一覧用のページには特別なテンプレートは不要です。
デフォルトのままで大丈夫です。
2つの固定ページが公開状態になったら、次のステップであるWordPressの表示設定に進みます。
ここまでの作業は数分でできる内容ですが、このステップを飛ばして表示設定だけ変えようとすると選択肢が出てこないことがあります。
必ず固定ページを先に作ってから次へ進んでください。
WordPressの表示設定からフロントページを変更する操作手順
固定ページの準備ができたら、いよいよWordPressの管理画面からフロントページの設定を切り替えます。
ここがSWELLフロントページ設定の核心部分です。
操作自体はとてもシンプルなので、落ち着いて進めましょう。
「設定」→「表示設定」を開く
WordPress管理画面の左サイドバー下部にある「設定」をクリックし、サブメニューの「表示設定」を選択します。
表示設定のページが開くと、最上部に「ホームページの表示」という項目があります。
デフォルトでは「最新の投稿」にチェックが入っているはずです。
これがブログ型の状態です。
ここを「固定ページ」に変更することで、サイト型トップページへの切り替えが始まります。
ラジオボタンを「固定ページ」にクリックすると、すぐ下に2つのドロップダウンメニューが現れます。
ホームページと投稿ページをそれぞれ選択する
「ホームページ」のドロップダウンから、先ほど作成した「HOME」や「トップページ」という名前の固定ページを選択します。
次に「投稿ページ」のドロップダウンから、「BLOG」や「記事一覧」という名前の固定ページを選択します。
2つのドロップダウンに同じページを選択した場合、設定が正常に機能しないため、必ず別々のページを選ぶようにしてください。
正しく設定できたら、ページ下部の「変更を保存」ボタンをクリックします。
これだけでフロントページの切り替えは完了です。
設定が正しく反映されているか確認する方法
保存後、サイトのトップURL（例：https://あなたのドメイン.com/）にアクセスしてみてください。
先ほど作成した固定ページの内容が表示されていれば成功です。
まだ本文に何も入力していない場合は白紙に近い状態ですが、それで正常です。
もし以前のブログ一覧がそのまま表示されている場合は、SWELLのキャッシュをクリアすると解決するケースがほとんどです。
管理画面上部のSWELLツールバーか、「SWELL設定」→「キャッシュの削除」から実行できます。
キャッシュが残っていると設定変更が反映されないことがあるので、変更後は必ずキャッシュクリアをセットで行う習慣をつけておくと安心です。
また、フロントページに設定した固定ページのURLを直接ブラウザに打ち込んでアクセスすると、トップページではなく個別の固定ページとして表示されることがあります。
これはWordPressの仕様で、固定ページのスラッグではなくドメイン直下（/）にアクセスすることで正しくトップページとして機能します。
カスタマイズ画面からも確認できる
「外観」→「カスタマイズ」を開くと、右側にリアルタイムのプレビューが表示されます。
左メニューから「トップページ」の各設定を触りながら、すぐに見た目に反映されるので直感的に操作できます。
設定が正しく反映されているかどうかをこのプレビュー画面で確認しながら作業を進めると、手戻りが少なくなります。
なお、カスタマイズ画面での変更は「公開」ボタンを押すまでは本番サイトに反映されません。
確認しながらじっくり調整できるので、初心者にも安心な仕組みです。
SWELLのカスタマイズ機能でトップページをおしゃれに仕上げる方法
フロントページの基本設定が終わったら、いよいよデザインを作り込む段階です。
SWELLには豊富なカスタマイズ機能が搭載されており、メインビジュアルの設定からブロックの配置まで、自由度の高いデザインが実現できます。
メインビジュアルの設定方法
SWELLのトップページカスタマイズで最初に手をつけるべきはメインビジュアルです。
「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」と進むと設定画面が表示されます。
メインビジュアルには以下の種類から選べます。
- 画像（1枚のスタティック画像）
- スライドショー（複数画像を自動切り替え）
- 動画（MP4などの動画ファイル）
- なし（メインビジュアル自体を非表示）
画像を使う場合は、推奨サイズの画像を用意しておくと画面いっぱいにきれいに表示されます。
スマートフォンとPCで別々の画像を設定できる点もSWELLの強みで、デバイスに最適化された見た目を実現できます。
メインビジュアルの上にキャッチコピーテキストを重ねることもできます。
「メインビジュアル上のテキスト」欄に文字を入力し、フォントサイズや色を調整すれば、プロが作ったようなヘッダーデザインが完成します。
フルワイドブロックで幅広レイアウトを作る
フロントページの固定ページをエディターで編集する際、フルワイドブロックは必ずといっていいほど活用するブロックです。
このブロックを使うと、コンテンツを画面の端から端まで全幅で表示でき、セクションごとに背景色をつけて視覚的にゾーニングできます。
たとえば、「自己紹介エリア」「カテゴリ紹介エリア」「おすすめ記事エリア」をそれぞれ異なる背景色のフルワイドブロックで区切ると、メリハリのあるページ構成になります。
背景色だけでなく、背景画像を設定してテキストを重ねることも可能です。
投稿リストブロックで記事一覧を配置する
フロントページに最新記事や特定カテゴリの記事を表示したいときは、投稿リストブロックが活躍します。
このブロックをページに追加すると、表示件数・カテゴリ・並び順・デザインスタイルなどを細かく設定できます。
デザインスタイルはカード型・リスト型・コンパクト型など複数から選べ、サイトの雰囲気に合わせて変更できます。
タブブロックと組み合わせて、タブを切り替えるとカテゴリ別の記事一覧が切り替わる仕組みも作れます。
これを使えば、ひとつのエリアに複数カテゴリの記事をコンパクトにまとめられます。
カラムブロックで横並びレイアウトを実現する
サービス紹介や特徴のアピールなど、複数の情報を横並びで見せたいときはカラムブロックを使います。
SWELLには標準のカラムブロックに加えて、リッチカラムブロックという独自ブロックもあり、アイコンや画像を使った視覚的にわかりやすいレイアウトが組めます。
2カラム・3カラム・4カラムから選択でき、スマートフォン表示時に何カラムに切り替えるかも設定できるので、モバイル対応も問題ありません。
見出しに画像を入れる方法
トップページのセクションタイトルに画像を添えると、テキストだけのページより格段におしゃれに見えます。
SWELLのブロックエディターでは、見出しブロックの設定から装飾やアイコン画像を追加する機能があります。
また、フルワイドブロックの背景画像とテキストの組み合わせで、画像＋見出しの効果的なセクション区切りを作ることもできます。
Canvaなどのデザインツールで作ったセクション見出し画像を、画像ブロックとして配置する方法も広く使われています。
この場合はAlt（代替テキスト）を設定することを忘れずに。
SEO的にもアクセシビリティ的にも大切な設定です。
SWELLフロントページ設定でよくあるトラブルと対処法
設定の手順を追ってきたところで、実際に作業を進めると「あれ、うまくいかない」と感じる場面が出てくることがあります。
よくあるトラブルとその解決策をまとめておくので、困ったときの参考にしてください。
トップページにタイトルが表示されてしまう
フロントページ用の固定ページにテンプレートを設定し忘れていると、ページタイトルがそのまま表示されてしまうことがあります。
前述のとおり、固定ページの編集画面の右サイドバーから「テンプレート」を「サイトトップ用（タイトルなし）」に変更してください。
また、SWELLのフォーラム（SWELLERS）でも「フロントページのタイトルが表示されない（または消えない）」という問い合わせが実際に出ています。
テンプレート設定の確認と、キャッシュクリアの2ステップで解決するケースがほとんどです。
設定を保存したのに見た目が変わらない
キャッシュが原因のトラブルは非常に多いです。
SWELLには独自のキャッシュ機能があり、設定変更後にキャッシュが残っていると古い表示が続くことがあります。
「SWELL設定」→「リセット」からキャッシュをクリアしてみてください。
それでも改善しない場合は、ブラウザ側のキャッシュも疑ってみましょう。
ChromeであればCtrl+Shift+R（Mac: Command+Shift+R）でスーパーリロードができ、ブラウザキャッシュを無視して最新の状態を読み込めます。
固定ページが表示設定のドロップダウンに出てこない
「表示設定」でドロップダウンを開いても、作成したはずの固定ページが選択肢に表示されないことがあります。
これは固定ページが「下書き」状態になっている可能性場合がほとんどです。
固定ページ一覧を確認し、対象のページが「公開済み」ステータスになっているか確認してください。
トップページのSEO設定はどうすればいい？
サイト型にしたフロントページのメタディスクリプションやタイトルタグが気になる人も多いです。
SWELLはAll in One SEOやRank Math、SEO SIMPLE PACKなどのSEOプラグインと連携できます。
SEO SIMPLE PACKはSWELL開発者が作ったプラグインなので相性が良く、固定ページ単位でメタ情報を設定できます。
トップページのタイトルタグには、サイト名とサイトのコンセプトを簡潔に盛り込むのがセオリーです。
「サイト名｜サイトのキャッチコピー」という形式が一般的で、検索結果での見た目もよくなります。
スマートフォンで見たときに崩れる場合の対処
PCでは問題ないのに、スマートフォンで見るとレイアウトが崩れることがあります。
多くの場合、カラムブロックのモバイル表示設定が原因です。
カラムブロックの設定から「スマートフォン表示時のカラム数」を調整してください。
また、画像の横幅指定をピクセル固定にしていると、モバイルでははみ出すことがあります。
横幅は「%」や「auto」など、可変の指定に変えると解決しやすいです。
SWELLのカスタマイズ画面ではプレビューをスマートフォン表示に切り替えて確認できるので、こまめにチェックしながら作業を進めると安心です。
| よくあるトラブル | 主な原因 | 対処法 |
|---|---|---|
| タイトルが消えない/表示される | テンプレートの未設定 | 「サイトトップ用（タイトルなし）」に変更 |
| 設定が反映されない | キャッシュが残っている | SWELLキャッシュ削除＋ブラウザリロード |
| ページが選択肢に出ない | 固定ページが下書き状態 | 固定ページを「公開済み」にする |
| モバイルでレイアウト崩れ | カラム設定や画像幅の固定指定 | スマートフォン用カラム数・幅を可変指定に変更 |
まとめ｜SWELLフロントページ設定は手順を守れば誰でもできる
この記事のポイントをまとめます。
- SWELLのフロントページ設定は「固定ページ作成」→「WordPressの表示設定変更」の2ステップが基本
- フロントページ用とブログ一覧用、2つの固定ページを事前に公開状態で用意することが必須
- 固定ページのテンプレートは「サイトトップ用（タイトルなし）」を選ぶとタイトルが非表示になり全幅デザインが実現する
- 設定変更後はSWELLのキャッシュクリアをセットで行うことでトラブルを防げる
- メインビジュアル・フルワイドブロック・投稿リストブロックを活用することでおしゃれなサイト型トップページが完成する
- トラブルの大半はキャッシュ・テンプレート未設定・固定ページの公開状態のいずれかが原因
SWELLのフロントページ設定は、初めて触るとどこから手をつければいいか迷いがちですが、固定ページを2つ作って表示設定を変えるだけという基本の流れさえ掴めば、あとは自分のアイデアを形にしていく楽しい作業になります。
メインビジュアルのデザインにこだわったり、セクションごとに背景色を変えたり、カテゴリ別の記事一覧を配置したり、SWELLのブロック機能を使ったカスタマイズは無限に広がります。
「完璧なデザインにしてから公開しよう」と思うと永遠に完成しないので、まずはシンプルな構成で公開して、少しずつ改善していくスタイルが長続きするコツです。
今日の記事を参考に、ぜひ自分だけのトップページを作ってみてください。
