1年に一度の超セール!Amazonブラックフライデー! ※11/26(金)~12/2日(木)まで!セール品を見る

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

トップページで新着記事が並んでいるだけなのはつまらないですよね?

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

※WordPressテーマ「SWELL」での作成例です。

すいみん

雑記ブログ「すいみんブログ」のトップページを参考に解説します。

目次

ブロックエディタだけでサイト型トップページを作成する方法

では早速チュートリアルを紹介します。

今回は雑記ブログ「すいみんブログ」のトップページを参考に解説します。

STEP

2つの固定記事の作成

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

  • トップページ(top)
  • 新着記事(achive)
STEP

記事の表示設定

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

  • サイドバーを非表示
  • 目次を非表示
  • 目次前広告を隠す
  • 追記:コンテンツ下の余白をなくす(フッターとの余白を嫌う人はチェック)

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

STEP

サイト情報エリアの作成

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

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

  • 記事と同じ
  • サイト幅
  • フルワイド

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

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

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

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

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

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

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

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

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

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

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

STEP

カテゴリーエリアの作成

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

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

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

  • 表示する投稿数を6に
  • カード型
  • 人気順
  • タイトルのHTMLタグをh3

にしています。

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

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

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

STEP

トップページの設定

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

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

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

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

すいみん

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

ブロックエディタだけでサイト型トップページを作成する方法まとめ

本記事では「【SWELL】簡単15分!ブロックエディタだけでトップページを作成する方法」について書きました。

本来、トップページを作成するのは手間と時間がかかりますが、ブロックエディタをうまく使うことで簡単に構成が作成できます!

すいみん

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

目次
閉じる