SWELLカスタマイズ！サイト型トップページの作り方！素敵なブログを作ろう！

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

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

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

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

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

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

＼ 一度公式サイトも見てみる！ ／

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

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

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

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

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

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

この記事では、僕が運営する2サイトのトップページの作り方をご紹介します。

トップページ機能の設定

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

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

メインビジュアル

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

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

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

記事スライダー

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

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

ピックアップバナー

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

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

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

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

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

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

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

フルワイドブロック

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

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

カラムブロック

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

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

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

投稿リストブロック

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

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

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

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

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

タブブロック

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

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

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

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

投稿ページとホームページの作成

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

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

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

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

それから、せっかくサイト型のトップページを作るので、サイドバーを非表示にする方法もお伝えします。

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

この後の工程は、ブロックエディターの機能を使ってページを作っていきます。

この記事ではブロックエディターの基本的な操作にはあまり触れません。操作方法が分からない方は、以下の記事を参考にしてください。

トップページカスタマイズ【SoccerNote+編】

まずはサブブログ「SoccerNote+」のトップページの作り方を紹介します。

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

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

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

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

おすすめ記事の一覧

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

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

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

主要なカテゴリーとタグの一覧

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

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

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

全ての記事の一覧

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

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

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

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

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

トップページカスタマイズ【WebNote+編】

次は当サイト、「WebNote+」のトップページの作り方を紹介していきます。

まず、トップページの構成は以下のようになっています。

今はページの構成が変わっています。すみません…！

とにかく「シンプル」に白をベースにしたデザインにしてみました。

ちなみに、WebNote+はCSSで色々な箇所を微調整しています。

今回はCSSを記述しない範囲でできるところまで紹介していきます。

おすすめ記事の一覧

まずは、サブブログ同様におすすめしたい記事を3つ表示しています。

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

作り方もサブブログと同様です。

これでおすすめ記事のエリアは完成です。

実際のサイトでは、投稿リストブロックにCSSを当ててカスタマイズをしているので、内容だけ紹介しておきます。

以下の2点を調整しています。

それぞれ、デフォルトの状態と比較してみましょう。

ボックスの様な見た目にカスタマイズ

投稿リストを枠で囲むようなイメージにしました。実際には、枠を線ではなく影で作っています。

カーソルを合わせた時にフワッと動かす

リストの上にカーソルを合わせた時に、フワッと記事が浮きあがるようにカスタマイズしています。

記事が浮き上がった時と通常時の影の度合いも少し変えています。

カテゴリーごとの記事の一覧

次はカテゴリーの一覧です。当サイトは4つのカテゴリーがあるので、4つ表示しています。

各カテゴリーで2記事表示していますが、この2記事はカテゴリーの中で特に読んで欲しい記事をピックアップして表示させています。

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

作り方は以下のとおりです。

これでカテゴリーごとの表示エリアも完成です。

実はここで、すごく細かいこだわりポイントがあります。

先ほどの手順の通りに作ると、カラムの間の余白が縦と横で違うはずです。

僕はこれが気になるので、以下の方法で縦横の余白を同じにしています。

これで余白が揃いました。

それから、このエリアはカラムブロックの影と角の丸みをCSSでカスタマイズしているので内容だけ紹介しておきます。

デフォルトの状態と比較すると以下のようなイメージです。

全ての記事の一覧

最後に記事の一覧を新着順に表示して完了です。

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

ここは簡単で、以下の手順で作ることができます。

これで全ての記事を新着順に表示することができました。

これでトップページのコンテンツ部分の作成は完了です。

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

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

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

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

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

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

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

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

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

ちなみに、SWELLではトップページだけでなく、カテゴリーページやタグページも自由にカスタマイズすることができます。

以下の記事でカテゴリー、タグページのカスタマイズ方法を紹介しているので良ければ見てみてください。

自分好みのページを作りつつ、SWELLのブログ運営を楽しんでいきましょう。

SWELLでみなさんの工夫あふれる素敵なサイトを作られたら、僕が運営しているSWELLサイト集でも紹介させてくださいね。

運営者さとしんの Twitter( @__satoshin) で掲載依頼を受け付けています。

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

---

SWELL公式サイトはこちらからどうぞ…！

SWELLのレビュー記事はこちら↓↓

>>SWELLレビュー！ブログが楽しいと感じさせてくれた素敵なWordPressテーマ！

SWELLの基本的な設定や使い方はこちら↓↓

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ！

SWELLで作られたサイト集↓↓

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました！！