【SWELL】超簡単！ブロックエディタだけでサイト型トップページを作成する方法

まず2つの固定記事を作成します。新着記事一覧のページはタイトルだけでOKです。
基本的には作成したトップページを編集していきます。

中身を作る前に記事の表示設定を整えます。

記事タイトルはどうするの？と思われるかもしれませんが、トップページに指定すると自動で消えてしまうので安心してください。

まず、フルワイドのブロックでベースを作成します。

表示幅は3段階で調整できます。今回は真ん中のサイト幅で少し広めに表示させます。

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

まず左右に見出し（h3）を入れましょう。新着記事とかプロフィール等。

あとは左側に投稿リストとその下にSWLLボタン（リンク先は先の新着記事に）を挿入します。

追記：新着記事の投稿リストの設定、HTMLタグはdivをおすすめします。（h3の下なので）

右側はプロフィールを入れました。

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

ブログパーツにはカスタムHTMLのコードで下記の様に入力しています
※プロフィールのHTMLのコードをコピーして整理しただけです。

最新版のSWELLでプロフィールにリストの●が表示されるようになってしました。

下記のCSSをいれると表示が削除できます。

.p-authorBox ul {
　　list-style: none;
　　padding-left: 0em;
}

以上でサイト情報のエリアは完成です。
あとはカテゴリーエリアの項目を作成しましょう！

カテゴリーごとに記事リストを作成します。

まずはフルワイドの下敷きを作成します。背景色もお好みで変更しましょう。

続いて投稿リストを作成します。

にしています。

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

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

あとはカテゴリーごとに繰り返すだけです。

最後にトップページの設定をします。

ダッシュボードから設定>表示設定から

• 固定ページにチェック
• ホームページを固定ページ｢トップページ｣に
• 投稿ページを固定ページ｢新着記事｣を選びます

以上でトップページが更新されました。

すいみん

あとはカスタマイズ>トップページからメインビジュアルなど変更して、見た目をお好みに調整していきましょう。