MENU
おすすめの記事
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!

さとしん
WordPressとSWELLが好きなブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。
【2024/9/22】SWELLサイト事例集を更新しました!→【20240922】SWELLサイト集更新!→クリックタップ

SWELLカスタマイズ!サイト型トップページの作り方!素敵なブログを作ろう!

当ページのリンクには広告が含まれています。
SWELLカスタマイズ!サイト型トップページの作り方!素敵なブログを作ろう!
  • URLをコピーしました!

この記事では、WordPressテーマ『』を使って、トップページをカスタマイズする手順を紹介します。

SWELLはブロックエディターに完全対応したテーマです。

ブロックを組み合わせることで、プログラミングの知識がなくてもオシャレなトップページを作ることができます。

プログラミング知識不要でオシャレなブログが作れるよ…!
この記事の内容まとめ
  • トップページで設定できる機能の紹介
  • トップページを作る際に良く使うブロックの紹介
  • 筆者運営サイトのトップページ作成手順

オリジナルなデザインのトップページを作ることは、サイト訪問者の方に興味を持ってもらったり、サイトを覚えてもらうきっかけにもなると思っています。

さとしん

そして、自分のサイトが今以上に好きになりますよ…!

せっかくSWELLを導入するのであればチャレンジしてみる価値はあると僕は考えています。

ぜひ、この記事を参考にトップページをお好みのデザインにカスタマイズしてみてください。

\ 一度公式サイトも見てみる! /

【SWELL関連のおすすめ記事】

SWELLの導入を検討中の方↓↓
>>SWELLレビュー!ブログが楽しいと感じさせてくれた素敵なWordPressテーマ!

SWELLの設定や使い方の紹介↓↓
>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

目次

サイト型のトップページを作る手順

まず前提として「サイト型」、「ブログ型」について、この記事では以下の様に定義しています。

ブログ型:記事が新着順に並べられた状態
サイト型:必要な情報が探しやすい様に整理された状態

例えば、以下の様な状態のトップページをサイト型と表現しています。

  • カテゴリごとに記事を探すことができる
  • オススメの記事をすぐに見つけることができる

トップページを以下の手順で作成していきます。

STEP
トップページ機能の設定
STEP
ホーム/投稿ページの作成
STEP
トップページを固定ページで作りこむ
STEP
ホーム/投稿ページの設定

それぞれ順番に解説していきます。

サイト型のトップページ作成に関連するのは、STEP2「投稿ページとホームページの作成」からです。

STEP1「トップページ機能」の情報が不要な方は、STEP2からご覧ください。

この記事では、僕が運営する2サイトのトップページの作り方をご紹介します。

さとしん

それぞれ参考になりそうな部分があれば見てみてください…!

トップページ機能の設定

トップページ機能の設定をしていきます。以下3つの設定が可能です。

  • メインビジュアル
  • 記事スライダー
  • ピックアップバナー
設定方法

WordPress管理画面:「外観」→「カスタマイズ」→「トップページ」

さとしん

ここは簡単なので、概要だけ説明しますね…!

各機能で細かい設定も可能なので、いろいろとアレンジしてみてください。

メインビジュアル

メインビジュアルはサイトを開いた際、1番最初に訪問者の目に見えるエリアです。

例えば、僕が運営する「SoccerNote+」では以下の様に、画像が画面全体に表示される設定にしています。

SWELLのメインビジュアル

では、動画が画面全体に表示されるようになっています。

さとしん

僕はSWELL公式サイトのメインビジュアルに憧れてマネをしました(笑)

設定方法は公式サイトの「」に詳しく記載されています。

記事スライダー

記事スライダーは、指定した記事をスライドしながら表示してくれる機能です。

メインビジュアルの下に表示されているものが「記事スライダー」です。

SWELLの記事スライダー

設定方法は公式サイトの「」に詳しく記載されています。

ピックアップバナー

ピックアップバナーは、サイト訪問者に特に見てもらいたいコンテンツなどを目立つ場所に表示する事ができる機能です。

メインビジュアルの下に表示されているものが「ピックアップバナー」です。

SWELLのピックアップバナー

設定方法は公式サイトの「」に詳しく記載されています。

トップページのカスタマイズで良く使うブロック

実際にページを作り始める前に、トップページをカスタマイズしていく中で良く使うブロックをご紹介しておきます。

今回の紹介するトップページは、主に以下のブロックを組み合わせてページを作っています。

  • フルワイドブロック
  • 投稿リストブロック
  • カラムブロック
  • タブブロック

基本的な考え方は、フルワイドブロック+他のブロックを組み合わせていく。というイメージです。

それぞれのブロックについて簡単に紹介していきます。

フルワイドブロック

フルワイドブロックは画面横幅をフルに活用するブロックです。以下の様な機能があります。

  • 文字色、背景色や背景画像を設定できる
  • ブロックの境界線の形状を選択できる
  • セクション用の見出しを設定できる

フルワイドブロックの使用イメージ

【SWELL】トップページをおしゃれなサイト型にカスタマイズする! (2)

上記はあくまで僕が良く使う機能の一例で、他にも細かな設定ができます。「」を参考にしてください。

さとしん

最も重要で大活躍するブロックです…!

カラムブロック

カラムブロックはコンテンツを横並びに表示するブロックです。

フルワイドブロックの背景に画像を適用した状態で、カラムブロックと組み合わせて使うのもオススメです。

カラムブロックの使用イメージ

【SWELL】トップページをおしゃれなサイト型にカスタマイズする! (3)

詳細はSWELL公式サイトの「」を見てみてください。

投稿リストブロック

投稿リストブロックは、任意の投稿を任意の数呼び出すことができるブロックです。

カテゴリーやタグを指定して投稿を呼び出すこともできます。

さとしん

トップページのカスタマイズには必須…!

リストのスタイルも5種類準備されています。

  • カード型
  • リスト型
  • リスト型(左右交互)
  • テキスト型
  • サムネイル型

それぞれ以下の様なイメージです。

かなり長くなるので、見たいスタイルをクリック(タップ)して広げてください。

カード型を見てみる
リスト型を見てみる
リスト型(左右交互)を見てみる
テキスト型を見てみる
サムネイル型を見てみる

タブブロック

タブブロックは、タブをクリック(タップ)することで表示する内容を変えることができるブロックです。

例えば、「新着記事」と「人気記事」などのタブを作り、上述した投稿リストでそれぞれの投稿を表示させてあげることができます。カテゴリやタグ、自分が指定した記事を表示させることも可能です。

以下の様なイメージです。

タブの中は文字や画像など、リスト以外も入力できるので色々な使い方ができます。

投稿ページとホームページの作成

ここからがトップページをカスタマイズしていく工程です。

まずは、新着記事を表示するための「投稿ページ」を作成します。

固定ページで、タイトルとURLスラッグのみ設定した記事を作成し、公開します。

タイトルとスラッグは何でもOKです。新着記事であることが分かると良いと思います。

設定方法

WordPress管理画面:「固定ページ」→「新規追加」

次に、実際にトップページになる「ホームページ」の枠を作ります。

タイトルとスラッグは「home」などでOKです。

設定方法

WordPress管理画面:「固定ページ」→「新規追加」

それから、せっかくサイト型のトップページを作るので、サイドバーを非表示にする方法もお伝えします。

設定方法

WordPress管理画面:「外観」→「カスタマイズ」→「サイドバー」

以下画面で、「トップページにサイドバーを表示する」のチェックを外しておきましょう。

サイドバーを非表示にする方法
さとしん

ではここから、いよいよトップページを作っていきます…!

この後の工程は、ブロックエディターの機能を使ってページを作っていきます。

この記事ではブロックエディターの基本的な操作にはあまり触れません。操作方法が分からない方は、以下の記事を参考にしてください。

トップページカスタマイズ【SoccerNote+編】

まずはサブブログ「SoccerNote+」のトップページの作り方を紹介します。

トップページの構成は以下のとおりです。

  • おすすめ記事の一覧
  • 主要なカテゴリー&タグの一覧
  • 全記事の一覧
SoccerNote+

メインビジュアルで画面いっぱいの画像を表示させてインパクトを出しています。

CSSは全く書いていません。全て標準のブロックエディターの機能のみで作成しています。

それぞれの作り方の概要を紹介していきます。

おすすめ記事の一覧

まず、メインビジュアルのすぐ下に、オススメしたい記事を3つピックアップして表示しています。

おすすめ記事の一覧

このエリアは、以下のブロックで作っています。

  • フルワイドブロック
  • 投稿リストブロック

以下の手順で作っていきましょう。

STEP
フルワイドブロックを配置

フルワイドブロックを追加できたら、画像の赤枠部をお好みに設定してきましょう。今回は以下の設定にしました。

おすすめ記事の一覧の作り方-1
STEP
セクション見出しにテキストを入力

見出し部分にお好みのテキストを入力しましょう。

フルワイドブロックには、デフォルトでセクション用の見出しが設定されています。

おすすめ記事の一覧の作り方-2
STEP
投稿リストブロックを配置

セクション見出しの下に投稿リストブロックを配置します。

投稿リストブロックで、特定の記事を表示させたい場合は、画像赤枠部に記事IDを直接入力すればOKです。

おすすめ記事の一覧の作り方-3

主要なカテゴリーとタグの一覧

おすすめ記事一覧の下には、サイト内の主要なカテゴリとタグページへのリンクを表示しています。

カテゴリーの一覧

このエリアは、以下のブロックで作っています。

  • フルワイドブロック
  • カラムブロック
  • 画像ブロック

こちらは以下の手順で作っていきます。

STEP
フルワイドブロックを配置

フルワイドブロックを追加できたら、おすすめ記事の一覧と同様にお好みで設定を編集しつつ、セクション見出しにテキストを入力しましょう。

カテゴリー一覧の作り方
STEP
カラムブロックを配置

見出しの下にカラムブロックを追加しましょう。

PC表示では列数を4列、スマホ表示では2列に設定しているのがポイントです。

カテゴリー一覧の作り方-2

カラムブロックの使い方はこちらの記事でも解説しています。
関連記事>>【ブロックエディター】素敵なレイアウトを作る!カラムブロックの使い方!

STEP
カラムの中に画像ブロックを配置

先ほど追加したカラムブロックに画像ブロックを追加していきます。

事前に準備していた画像を4列分それぞれ設定していきます。

カテゴリー一覧の作り方-3

画像に各カテゴリーページへのリンクも忘れずに設定しておきましょう。
関連記事>>【画像ブロックの使い方】ブロックエディターの画像挿入方法!テーマ独自のデザインも紹介

全ての記事の一覧

その下にはサイト内の全ての記事を色々な条件で表示しています。

新着順や人気順、カテゴリー毎など、サイト訪問者の方が自由に表示を切り替えることができるようになっています。

全ての記事の一覧

このエリアは、以下のブロックで作っています。

  • フルワイドブロック
  • タブブロック
  • 投稿リストブロック

基本はこれまで同様ですが、作り方も簡単に紹介します。

STEP
フルワイドブロックを配置

フルワイドブロックを追加できたら、これまで同様にお好みで設定を編集しつつ、セクション見出しにテキストを入力しましょう。

全ての記事の一覧の作り方-1
STEP
タブブロックを配置

見出しの下にタブブロックを追加します。

PC表示、スマホ表示それぞれでタブのサイズを設定しておきましょう。

全ての記事の一覧の作り方-2
STEP
タブの中に投稿リストブロックを配置

先ほど追加したタブブロックに投稿リストブロックを追加していきます。

各タブで投稿リストブロックの記事を表示させる条件を調整しましょう。

例えば、特定のカテゴリーやタグの記事を表示させる場合は、画像赤枠部から設定できます。

全ての記事の一覧の作り方-3

こんなイメージで、各ブロックを組み合わせていくことで、お好みのトップページを作っていくことができます。

さとしん

いろいろ試してみてください…!

トップページカスタマイズ【WebNote+編】

次は当サイト、「WebNote+」のトップページの作り方を紹介していきます。

まず、トップページの構成は以下のようになっています。

今はページの構成が変わっています。すみません…!

  • おすすめ記事の一覧
  • カテゴリー毎の一覧
  • 全記事の一覧
WebNote+

とにかく「シンプル」に白をベースにしたデザインにしてみました。

ちなみに、WebNote+はCSSで色々な箇所を微調整しています。

今回はCSSを記述しない範囲でできるところまで紹介していきます。

さとしん

要望があれば記述しているCSSを追記することも検討します…!

おすすめ記事の一覧

まずは、サブブログ同様におすすめしたい記事を3つ表示しています。

おすすめ記事の一覧
さとしん

個人的にこの構成が好きです…!

このエリアは、以下のブロックで作っています。

  • フルワイドブロック
  • 投稿リストブロック

作り方もサブブログと同様です。

STEP
フルワイドブロックを配置

フルワイドブロックを追加できたら、画像の赤枠部をお好みに設定してきましょう。今回は以下の設定にしました。

おすすめ記事の一覧の作り方-1
STEP
セクション見出しにテキストを入力

見出し部分にお好みのテキストを入力しましょう。

おすすめ記事の一覧の作り方-2

見出しを2行にするには、改行したい場所で、Shift+Enterキーを押すことでできます。

文字サイズはお好みで調整してください。

STEP
投稿リストブロックを配置

セクション見出しの下に投稿リストブロックを配置します。

投稿リストブロックで、特定の記事を表示させたい場合は、画像赤枠部に記事IDを直接入力すればOKです。

おすすめ記事の一覧の作り方-3

これでおすすめ記事のエリアは完成です。

実際のサイトでは、投稿リストブロックにCSSを当ててカスタマイズをしているので、内容だけ紹介しておきます。

以下の2点を調整しています。

  • ボックスの様な見た目にカスタマイズ
  • カーソルを合わせた時にフワッと動かす

それぞれ、デフォルトの状態と比較してみましょう。

ボックスの様な見た目にカスタマイズ

投稿リストを枠で囲むようなイメージにしました。実際には、枠を線ではなく影で作っています。

デフォルト

おすすめ記事の一覧の作り方-4

カスタマイズ後

おすすめ記事の一覧の作り方-5

カーソルを合わせた時にフワッと動かす

リストの上にカーソルを合わせた時に、フワッと記事が浮きあがるようにカスタマイズしています。

デフォルト

おすすめ記事の一覧の作り方-6

カスタマイズ後

おすすめ記事の一覧の作り方-7

記事が浮き上がった時と通常時の影の度合いも少し変えています。

さとしん

画像だと分かりにくいので、トップページを見てみてくださいね…!

カテゴリーごとの記事の一覧

次はカテゴリーの一覧です。当サイトは4つのカテゴリーがあるので、4つ表示しています。

各カテゴリーで2記事表示していますが、この2記事はカテゴリーの中で特に読んで欲しい記事をピックアップして表示させています。

カテゴリー毎の一覧
さとしん

一部、画像が切れてますがご了承ください…!

このエリアは、以下のブロックで作っています。

  • フルワイドブロック
  • カラムブロック
  • 投稿リストブロック

作り方は以下のとおりです。

STEP
フルワイドブロックを配置

フルワイドブロックを追加できたら、画像の赤枠部をお好みに設定してきましょう。今回は以下の設定にしました。

ここでは、セクション見出しを使わないので削除しています。

カテゴリーごとの一覧の作り方-1
STEP
カラムブロックを「2カラム:等分」にして挿入

スタイルは「影をつける」にしています。

カテゴリーごとの一覧の作り方-2

カラムブロックの詳しい使い方を知りたい方は「【ブロックエディター】素敵なレイアウトを作る!カラムブロックの使い方!」を参考にしてください。

STEP
カラムブロックの中にセクション見出しを挿入

「セクション用」見出しは、見出しブロックを配置した後にサイドバーの「スタイル」から呼び出せます。

カテゴリーごとの一覧の作り方-3

見出しを2行にするには、先ほど同様に改行したい場所でShift+Enterキーを押すことでできます。

STEP
セクション見出しの下に投稿リストブロックを挿入

ここでも記事IDを指定して、カテゴリーの中で見せたい記事を表示しています。

カテゴリーごとの一覧の作り方-4

投稿リストブロックの「もっと見る」というボタンは、サイドバーから設定できます。

カテゴリーごとの一覧の作り方-11
STEP
セクション見出しと投稿リストをコピーして、右側のカラム内に貼り付け

見出しと投稿リストの記事を別のカテゴリに設定し直しましょう!

カテゴリーごとの一覧の作り方-5

便利な複数ブロックの選択やコピペのショートカットキーは「ブロックエディターの記事執筆を快適にするショートカットまとめ!」を参考にしてください。

STEP
カラムブロック全体を複製する

複製はブロックツールバーの「オプション」もしくは「Ctrl(command)+Shift+D」でできます。

カテゴリーごとの一覧の作り方-5

複製後は、またそれぞれの見出しと投稿リストを必要な項目に直しましょう。

カテゴリーごとの一覧の作り方-6

これでカテゴリーごとの表示エリアも完成です。

実はここで、すごく細かいこだわりポイントがあります。

先ほどの手順の通りに作ると、カラムの間の余白が縦と横で違うはずです。

カテゴリーごとの一覧の作り方-7

僕はこれが気になるので、以下の方法で縦横の余白を同じにしています。

STEP
上側のカラムブロックの「ブロック下の余白量」を無しに設定
カテゴリーごとの一覧の作り方-8
STEP
上下カラムの間にスペーサーブロックを挿入

スペーサーブロックも「ブロック下の余白量」を無しに設定し、24pxのスペースを挿入。

カテゴリーごとの一覧の作り方-9

これで余白が揃いました。

カテゴリーごとの一覧の作り方-10
さとしん

僕はすごく気持ちが良いです…!笑

それから、このエリアはカラムブロックの影と角の丸みをCSSでカスタマイズしているので内容だけ紹介しておきます。

デフォルトの状態と比較すると以下のようなイメージです。

デフォルト

カテゴリーごとの一覧の作り方-12

カスタマイズ後

カテゴリーごとの一覧の作り方-13

全ての記事の一覧

最後に記事の一覧を新着順に表示して完了です。

全ての記事の一覧の作り方-3

このエリアは、以下のブロックで作っています。

  • フルワイドブロック
  • 投稿リストブロック

ここは簡単で、以下の手順で作ることができます。

STEP
フルワイドブロックを挿入して、セクション見出しを入力

フルワイドブロックの設定は以下画像のようにしています。

全ての記事の一覧の作り方-1
STEP
投稿リストブロックを挿入する

表示する投稿数や、投稿の表示順はお好みで調整してください。

全ての記事の一覧の作り方-2

これで全ての記事を新着順に表示することができました。

これでトップページのコンテンツ部分の作成は完了です。

固定ページをホームページに設定

ここまでの手順が完了したら、作成した固定ページをトップページに反映させる作業を行います。

以下の手順で「ホームページ設定」を表示させましょう。

設定方法

WordPress管理画面:「外観」→「カスタマイズ」→「WordPress設定」→「ホームページ設定」

「ホームページ設定」では、それぞれの項目を以下画像を参考に設定してください。

SWELL-ホームページ設定
ホームページの表示

固定ページを選択する

ホームページ

作りこんだ固定ページを選択

記事内の説明で「home」としたもの

投稿ページ

新着記事表示用の固定ページを選択

記事内の説明で「new post」としたもの

さとしん

これで完成です…!お疲れさまでした。。。

自分のサイトのトップページを開いて、作成した固定ページが反映されることを確認しておきましょう。

簡単にオシャレなトップページが作れる!

今回は、WordPressテーマ『SWELL』でトップページをカスタマイズする方法を解説しました。

プログラミングなどの知識がなくても、紹介したブロックを組み合わせるだけで簡単にオシャレなデザインのトップページが完成します。

ただ記事が並んでいるだけでなく、自分オリジナルのデザインのトップページを作れるのはとても嬉しいです。

ちなみに、SWELLではトップページだけでなく、カテゴリーページやタグページも自由にカスタマイズすることができます。

以下の記事でカテゴリー、タグページのカスタマイズ方法を紹介しているので良ければ見てみてください。

自分好みのページを作りつつ、SWELLのブログ運営を楽しんでいきましょう。

SWELLでみなさんの工夫あふれる素敵なサイトを作られたら、僕が運営しているSWELLサイト集でも紹介させてくださいね。

運営者さとしんの Twitter(@__satoshin) で掲載依頼を受け付けています。

さとしん

すでに100サイト以上紹介させてもらっています…!

最後まで読んでいただきありがとうございました。


はこちらからどうぞ…!

SWELLのレビュー記事はこちら↓↓

>>SWELLレビュー!ブログが楽しいと感じさせてくれた素敵なWordPressテーマ!

SWELLの基本的な設定や使い方はこちら↓↓

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

SWELLで作られたサイト集↓↓

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

SWELLカスタマイズ!サイト型トップページの作り方!素敵なブログを作ろう!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次