WordPressテーマ「SWELL」でトップページをサイト型にカスタマイズする方法

WordPressテーマ「SWELL」を使って、トップページをサイト風にカスタマイズしました。

HTML/CSSなどのコード不要で、カスタマイズの作業自体は1〜2時間で終わるかと。

この記事では、当サイトを事例として「トップページをサイト型にカスタマイズする方法」について書いていきます。

「テーマカスタマイザーでのアレンジに加えて、もう少し自由にデザインをカスタマイズしたい」という方に向けた記事になっています。

トップページ（当サイト）の全体像

当サイトのトップページ全体像はこんな感じです。

このトップページを例に挙げて作り方を解説していきます。

作るコンテンツの中身は自由にアレンジできるので、よかったらトップページ作りの参考にしてみてください。

【参考】調べたところ、一般にサイト型とは「ピックアップやカテゴリーなどによって過去記事を埋もれない工夫がされたトップページ」 といえそうです。この条件を満たすだけなら、SWELLテーマカスタマイザーの設定だけで実現可能だと思います。なので、この記事のタイトルには少し語弊があることをはじめにお伝えしておきます。
とはいえ、この記事で紹介するトップページ の作り方なら、デザインに幅を効かせられることは確かです。

では、順番に解説していきます。

トップページを固定ページで作る

ここで行う作業は大きく分けて3ステップです。

ステップ１｜新着記事用の固定ページを作成する

新着記事リスト（上記画像）を表示したい場合、新着記事用の固定ページをトップページとは別に作る必要があります。

まずWordPress管理画面で、固定ページを新規作成します。

タイトルを「New-Post」、パーマリンクを「new-post」と設定し公開します。（わかり易ければ何でもいいです）

この時点では新着記事リストとしては機能しません。必要な設定は後述します。

ステップ２｜トップページ用の固定ページを作る

続いてトップページ用の固定ページを作っていきます。

トップページ作りに便利な機能

ちなみにこのサイトは①〜④のブロックのみ使用しています。

今回はトップページを作る上で重宝する「フルワイドブロック」と「投稿リストブロック」について紹介します。

フルワイドブロック

【SWELLブロック】▶︎【フルワイドブロック】と選択すると、フルワイドブロックを使用できます。

フルワイドブロックは、画面の横幅いっぱいに広がるエリアを簡単に作れるブロックです。

コーポレートサイトをSWELLで制作する時や、ブログでもトップページを少し凝ったページにしたい時などに大活躍するブロックに仕上がっているかと思います。

SWELL公式サイト

SWELL公式サイトでもこのように述べられているので、ぜひ使ってみてください。

当サイトのトップページでは、3つのフルワイドブロックが使われています。

フルワイドブロックの中で、各種ブロックを使ってコンテンツを作っていくイメージですね。

フルワイドブロックの中で見出しを使う場合は、セクション見出しを使いましょう。通常の見出しを使うと見た目が残念になります。

投稿リストブロック

【SWELLブロック】▶︎【投稿リストブロック】と選択すると、投稿リストブロックを使用できます。

投稿リストブロックを使うとこんな感じで、簡単に投稿リストを表示することができます。

なお投稿リストでは、下記のような項目を自由に設定することができます。

他にもたくさんあります。

実際にいじってみればわかると思いますので、ここでは割愛しますね。

また新着記事リストを表示したい場合は、投稿順序を「新着順」、ボタンリンクを「〜/new-post/（先ほど作成した新着記事用固定ページのURL）」に設定すればOKです。

機能の詳細はSWELL公式サイトで確認してみてください。

ステップ３｜作成したトップページと新着記事を表示させる

さて、2つの固定ページを作成できたら、あとは表示設定を行うだけです。

管理画面から【外観】▶︎【カスタマイズ】▶︎【WordPress設定】▶︎【ホームページ設定】と進むと下記画面が表示されます。

ホームページの表示を「固定ページ」、ホームページを「Articles」、投稿ページを「New-Post」にそれぞれ設定します。

この設定が終われば、トップページが作成した固定ページに切り替わります。

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

メインビジュアルのカスタマイズ設定

メインビジュアル・ヘッダーの設定にあたっては、くろしばさんの記事を参考にさせて頂きましたので、こちらも合わせて読んでみてくださいm(__)m

>>WordPressテーマ「SWELL」を使ったサイト「Kuroshiba Design」のトップページカスタマイズ事例。

管理画面から【外観】▶︎【カスタマイズ】▶︎【トップページ】▶︎【メインビジュアル】にて設定可能です。

このサイトの設定内容を書いておきます。

ざっとこんな感じです。

特に設定していない項目は省略しています。

メインビジュアルの画像はPhotoshopで自作したものを用いています↓

ヘッダーのカスタマイズ設定

最後にヘッダー部分のカスタマイズ設定です。

管理画面から【外観】▶︎【カスタマイズ】▶︎【ヘッダー】にて設定可能です。

ヘッダー設定は次の通りです。

他の部分はデフォルトのままですね。

メインビジュアルとヘッダーの設定については、ご自身のサイトに最適だと思われる内容を探ってみてください。

まとめ｜Wordpressテーマ「SWELL」でトップページをサイト型にカスタマイズする方法

というわけで、記事は以上になります。

WordPressテーマ「SWELL」を使えば、トップページのカスタマイズもコード不要で可能です。

特にこの記事で紹介した方法を実践すれば、かなり自由にカスタマイズできることがわかるはずです。

ぜひ納得のいくトップページを作ってみてください^ ^