SWELLでトップページをカスタマイズする方法【初心者向け完全ガイド】

SWELLのトップページは、カスタマイズ画面から自由にデザインを変更できます。

トップページはブログの顔です。

初めて訪れた読者が「このブログを読み続けよう」と思うかどうかは、トップページの印象で大きく変わります。

この記事では、SWELLのトップページをカスタマイズする方法を手順通りに解説します。

トップページのカスタマイズを始める前に

SWELLのトップページ設定は「外観」→「カスタマイズ」→「トップページ」から行います。

カスタマイズ画面ではリアルタイムでプレビューを確認しながら設定を変更できます。

「公開」ボタンを押すまで変更は反映されないので、気軽に試しながら設定できます。

メインビジュアルの設定

トップページの最上部に表示される大きな画像・動画エリアがメインビジュアルです。

メインビジュアルに画像を設定する

メインビジュアルを非表示にする

メインビジュアルが不要な場合は「メインビジュアルを表示する」のトグルをオフにすることで非表示にできます。

シンプルなトップページにしたい場合はオフにするのもアリです。

記事一覧のデザインを設定する

トップページに表示される記事一覧のデザインを設定します。

表示形式を選ぶ

カスタマイズ→「記事一覧リスト」を開きます。

SWELLでは以下の表示形式から選べます。

表示形式	特徴
サムネイル型	アイキャッチ画像が大きく表示される。視覚的にわかりやすい
リスト型	縦に並んで表示される。情報量が多く見やすい
マガジン型	雑誌のように複数カラムで表示される

アイキャッチ画像を設定している場合は「サムネイル型」が最も見栄えが良くなります。

1ページに表示する記事数を設定する

「WordPress設定」→「表示設定」→「1ページに表示する最大投稿数」から変更できます。8〜12記事程度が一般的です。

ピックアップバナーの設定

トップページにおすすめ記事やカテゴリーへのリンクをバナー形式で表示できます。

カスタマイズ→「トップページ」→「ピックアップバナー」を開きます。

読者に見てほしいカテゴリーや特集記事へのリンクをバナーで表示することで、ブログ内の回遊を促せます。

新着記事・カテゴリー別記事の表示設定

トップページに表示する記事の種類を設定できます。

カスタマイズ→「トップページ」→「記事一覧」を開きます。

カテゴリーが複数ある場合は、カテゴリーごとに記事一覧を表示させることで読者が目的の記事を見つけやすくなります。

スライダーの設定

トップページに記事をスライドショー形式で表示できます。

カスタマイズ→「トップページ」→「スライダー」を開きます。

スライダーはアイキャッチ画像が統一されているとより見栄えが良くなります。

サイドバーの表示設定

トップページにサイドバーを表示するかどうかを設定できます。

カスタマイズ→「トップページ」→「レイアウト」を開きます。

サイドバーなしの全幅レイアウトはスッキリした印象になります。アイキャッチ画像を大きく見せたい場合はサイドバーなしがおすすめです。

トップページ設定のおすすめの組み合わせ

迷った場合は以下の設定から始めるのがおすすめです。

このブログ（egolab）もこの組み合わせを参考に設定しています。

よくある質問

Q. メインビジュアルの画像はどこで作ればいいですか？ Canvaを使うと無料で簡単に作れます。1200×400px程度のサイズで、ブログ名やキャッチコピーを入れた画像を作るのがおすすめです。

Q. トップページの設定を変えると既存の記事に影響しますか？ トップページの設定は記事ページには影響しません。安心して変更できます。

Q. スライダーとメインビジュアルは同時に使えますか？ 使えます。メインビジュアルの下にスライダーを表示する設定にすることで、両方を活用できます。ただし要素が多すぎるとページが重くなる場合があるので注意しましょう。

まとめ

SWELLのトップページカスタマイズの手順をまとめます。

トップページは一度設定して終わりではなく、記事が増えてきたタイミングで見直すことも大切です。

読者がブログ全体を把握しやすいトップページを目指しましょう。

SWELLの他の設定については、SWELLの初期設定完全ガイドやSWELLのカラー・フォント設定方法も合わせて確認してみてください。