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

こんにちは!さとしん(@satoshin-soccer)です。

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

『SWELL』って何?どんなテーマ?という方は、「【最高!】WordPressテーマ『SWELL』レビュー!サイト運営が楽しくなる!」をご覧ください。

SWELLは、記事を書くのが楽しく、早く、簡単になり、デザインもとてもおしゃれな魅力たくさんのテーマです。

トップページのカスタマイズもかなり自由に、簡単に行うことが可能です。

ブログだけでなく、コーポレートサイトにも使うことができます。

僕は、当サイトはもちろん、指導しているサッカーチームのホームページもSWELLで作成しました。

さとしんのアイコン画像さとしん

SWELLは本当にオススメのWordPressテーマです…!

もし、まだSWELLを使っていない方がいれば、ぜひこの機会に導入をご検討ください。

プログラミング不要でオシャレなデザインが作れるよ!
この記事はこんな人にオススメ
  • SWELLのトップページのカスタマイズ方法を知りたい人
  • サイト型のトップページを作りたい人
  • SWELLの購入を迷っている人
WordPressテーマ「SWELL」
  • ブロックエディタ完全対応
  • 複数サイトで使用OK
  • サポートも充実
オシャレなサイトで楽しく記事を書こう!
目次

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

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

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

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

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

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

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

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

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

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

トップページ機能の設定

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

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

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

さとしんのアイコン画像さとしん

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

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

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

メインビジュアル

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

当サイトでは以下の様に、画像が画面全体に表示される設定にしています。

SWELL「メインビジュアル」

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

さとしんのアイコン画像さとしん

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

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

記事スライダー

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

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

SWELL「記事スライダー」

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

ピックアップバナー

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

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

SWELL「ピックアップバナー」

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

投稿ページの作成

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

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

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

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

設定方法

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

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

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

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

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

設定方法

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

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

主に、以下のSWELL専用ブロックを上手く活用することで、簡単にデザイン性の優れたトップページが作れます。

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

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

当サイトのトップページも、ほぼ上記のブロックで作っています。

さとしんmemoのトップページ
さとしんのアイコン画像さとしん

本当に、驚くほど簡単に作れますよ…!

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

フルワイドブロック

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

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

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

SWELL_フルワイド

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

さとしんのアイコン画像さとしん

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

カラムブロック

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

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

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

SWELL_カラム

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

投稿リスト

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

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

さとしんのアイコン画像さとしん

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

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

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

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

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

タブブロック

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

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

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

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

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

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

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

設定方法

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

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

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

固定ページを選択する

ホームページ

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

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

投稿ページ

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

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

さとしんのアイコン画像さとしん

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

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

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

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

個人ブログだけでなく、コーポレートサイトでも使用できるテーマです。

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

さとしんのアイコン画像さとしん

本当にありがたく、素晴らしいテーマです…!

しかも、SWELLは頻繁にアップデートされていて、常に進化し続けています。これからも新機能が続々追加されていくはずです。

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

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

WordPressテーマ「SWELL」
  • ブロックエディタ完全対応
  • 複数サイトで使用OK
  • サポートも充実
オシャレなサイトで楽しく記事を書こう!

最後までお読みいただきありがとうございました!

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

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

この記事を書いた人

小さな町のサッカーコーチです。
たくさんの子どもたちがサッカーを好きになることを願っています。
保護者の方も指導者の皆さんもサッカーを楽しみましょう!

目次
閉じる