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

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

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

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

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

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

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

さとしん

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

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

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

この記事では、僕が運営している「SoccerNote+」のトップページを例にしながら解説していきます。

目次

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

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

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

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

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

今回は、SWELLで上記の行動が可能なトップページを以下の手順で作成していきます。

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

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

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

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

トップページ機能の設定

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

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

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

さとしん

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

ちなみに、当サイトではメインビジュアルのみ表示させています。

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

メインビジュアル

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

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

SWELLのメインビジュアル

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

さとしん

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

設定方法は公式サイトの「メインビジュアルの設定方法」に詳しく記載されています。

記事スライダー

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

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

SWELLの記事スライダー

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

ピックアップバナー

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

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

SWELLのピックアップバナー

設定方法は公式サイトの「ピックアップバナー機能の使い方」に詳しく記載されています。

投稿ページの作成

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

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

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

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

設定方法

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

無事に公開できたら、ひとまず先に進みましょう。

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

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

今回の解説の例に使う僕のサブブログでは、以下のブロックを組み合わせてページを作っています。

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

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

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

フルワイドブロック

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

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

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

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

上記はあくまで僕が良く使う機能の一例で、他にも細かな設定ができます。「【SWELL専用ブロック】フルワイドブロックの使い方」を参考にしてください。

さとしん

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

カラムブロック

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

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

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

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

詳細はSWELL公式サイトの「カラムブロックで使えるSWELLのオリジナル機能」を見てみてください。

投稿リストブロック

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

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

さとしん

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

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

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

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

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

タブブロック

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

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

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

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

トップページを固定ページで作りこむ!

では、トップページをカスタマイズしていきます。ここでも固定ページを使用します。

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

設定方法

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

準備ができたら、いよいよトップページを作っていきます。

今回の解説に使うサイトのトップページは以下の構成になっています。

  • おすすめ記事の一覧
  • 主要なカテゴリー&タブの一覧
  • 全記事の一覧
【SWELL】トップページをおしゃれなサイト型にカスタマイズする! (1)

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

おすすめ記事の一覧

まず、メインビジュアルのすぐ下に、オススメしたい記事を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

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

さとしん

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

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

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

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

設定方法

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

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

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

固定ページを選択する

ホームページ

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

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

投稿ページ

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

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

さとしん

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

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

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

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

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

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

さとしん

サイト訪問者にも運営者にもメリットがあるはずです…!

SWELLでブログ運営を楽しみましょう!

もし、まだ『SWELL』を使っていない方は、ぜひ導入を検討してみてください。きっとサイト運営が楽しくなると思います。

SWELLは頻繁にアップデートもされているので、これからも楽しく便利な新機能が続々追加されていくはずです。

【参考】SWELLのアップデート情報はこちら

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

WordPressテーマ「SWELL」
  • ブロックエディタ完全対応
  • 複数サイトで使用OK
  • サポートも充実
オシャレなサイトで楽しく記事を書こう!
【SWELL】トップページをおしゃれなサイト型にカスタマイズする!

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

よかったらシェアしてね!

この記事を書いた人

WordPressが好きで毎日触って勉強しています。ブロックエディタが好きです!WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

目次
閉じる