【SWELL】サイト型トップページ作成方法【導入序盤の方向け】

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

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

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

この記事の内容まとめ

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

【SWELL】サイト型トップページ作成方法：サイト型のトップページを作る手順

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

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

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

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

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

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

【SWELL】サイト型トップページ作成方法：トップページ機能の設定

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

設定方法

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

【SWELL】サイト型トップページ作成方法：メインビジュアル

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

SWELLの公式サイトでは、動画が画面全体に表示されるようになっています。

SWELL公式サイト

【SWELL】サイト型トップページ作成方法： 記事スライダー

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

【SWELL】サイト型トップページ作成方法：ピックアップバナー

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

【SWELL】サイト型トップページ作成方法：トップページのカスタマイズで良く使うブロック

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

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

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

【SWELL】サイト型トップページ作成方法：フルワイドブロック

フルワイドブロックは画面横幅をフルに活用するブロックです。

以下の様な機能があります。

【SWELL】サイト型トップページ作成方法：カラムブロック

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

【SWELL】サイト型トップページ作成方法：投稿リストブロック

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

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

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

【SWELL】サイト型トップページ作成方法：タブブロック

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

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

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

【SWELL】サイト型トップページ作成方法：投稿ページとホームページの作成

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

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

設定方法

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

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

設定方法

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

設定方法

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

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

【SWELL】サイト型トップページ作成方法：トップページカスタマイズ

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

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

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

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

【SWELL】サイト型トップページ作成方法：おすすめ記事の一覧

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

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

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

【SWELL】サイト型トップページ作成方法：主要なカテゴリーとタグの一覧

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

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

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

【SWELL】サイト型トップページ作成方法：全ての記事の一覧

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

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

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

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

【SWELL】サイト型トップページ作成方法：固定ページをホームページに設定

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

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

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

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

ホームページの表示

固定ページを選択する

ホームページ

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

投稿ページ

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

まとめ｜【SWELL】サイト型トップページ作成方法【導入序盤の方向け】

SWELLでサイト型トップページの作成をすることでおしゃれな雰囲気が出たと思います。