トップページで新着記事が並んでいるだけなのはつまらないですよね?
新着記事だけでなくプロフィールとかカテゴリー記事を見やすくしつつ、ちゃんと構造化も意識したトップページを簡単に作成する方法があるので、本記事ではその作成方法を紹介します。
※WordPressテーマ「SWELL」での作成例です。

雑記ブログ「すいみんブログ」のトップページを参考に解説します。
ブロックエディタだけでサイト型トップページを作成する方法
では早速チュートリアルを紹介します。
今回は雑記ブログ「すいみんブログ」のトップページを参考に解説します。
2つの固定記事の作成
まず2つの固定記事を作成します。新着記事一覧のページはタイトルだけでOKです。
基本的には作成したトップページを編集していきます。
- トップページ(top)
- 新着記事(achive)

記事の表示設定
中身を作る前に記事の表示設定を整えます。
- サイドバーを非表示
- 目次を非表示
- 目次前広告を隠す
- 追記:コンテンツ下の余白をなくす(フッターとの余白を嫌う人はチェック)

記事タイトルはどうするの?と思われるかもしれませんが、トップページに指定すると自動で消えてしまうので安心してください。
サイト情報エリアの作成
まず、フルワイドのブロックでベースを作成します。

表示幅は3段階で調整できます。今回は真ん中のサイト幅で少し広めに表示させます。
- 記事と同じ
- サイト幅
- フルワイド

つぎにカラムのブロックで2分割にします。

まず左右に見出し(h3)を入れましょう。新着記事とかプロフィール等。
あとは左側に投稿リストとその下にSWLLボタン(リンク先は先の新着記事に)を挿入します。
追記:新着記事の投稿リストの設定、HTMLタグはdivをおすすめします。(h3の下なので)

右側はプロフィールを入れました。
こちらはブロックが無いので、プロフィールのコードを入れたブログパーツをいれています。

ブログパーツにはカスタムHTMLのコードで下記の様に入力しています
※プロフィールのHTMLのコードをコピーして整理しただけです。
最新版のSWELLでプロフィールにリストの●が表示されるようになってしました。

下記のCSSをいれると表示が削除できます。
.p-authorBox ul {
list-style: none;
padding-left: 0em;
}
以上でサイト情報のエリアは完成です。
あとはカテゴリーエリアの項目を作成しましょう!
カテゴリーエリアの作成
カテゴリーごとに記事リストを作成します。
まずはフルワイドの下敷きを作成します。背景色もお好みで変更しましょう。

続いて投稿リストを作成します。
- 表示する投稿数を6に
- カード型
- 人気順
- タイトルのHTMLタグをh3
にしています。

Pickupでカテゴリーを指定することも忘れないようにしましょう。

投稿リストをH3にするときれいな階層構造になります。
※ちなみにフルワイドの見出しはH2です。

あとはカテゴリーごとに繰り返すだけです。
トップページの設定
最後にトップページの設定をします。
ダッシュボードから設定>表示設定から
- 固定ページにチェック
- ホームページを固定ページ「トップページ」に
- 投稿ページを固定ページ「新着記事」を選びます
以上でトップページが更新されました。




あとはカスタマイズ>トップページからメインビジュアルなど変更して、見た目をお好みに調整していきましょう。
ブロックエディタだけでサイト型トップページを作成する方法まとめ
本記事では「【SWELL】簡単15分!ブロックエディタだけでトップページを作成する方法」について書きました。
本来、トップページを作成するのは手間と時間がかかりますが、ブロックエディタをうまく使うことで簡単に構成が作成できます!

サイトの顔やメニューとしてのトップページ作成、是非チャレンジしてみてください。
