WordPressで、WebサイトのようなトップページをWPテーマ「SWELL」で作る方法!

WordPressテーマ「SWELL」で、トップページをWebサイトのようにする
URLをコピーする
URLをコピーしました!

WordPressテーマ「SWELL」は、ブログのデザインテーマだけでなく、Webサイト(ホームページ)風のトップページを作る機能も持っています。

もともとWordPressの機能として、Webサイトを作れるようにもなっていますが、コードを書いたカスタマイズが必要です。

SWELLなら、コードを書かなくても、固定ページでブロックエディターを使っていくだけで、Webサイトのようなトップページを作ることができます。

もともとブログトップページにある新着記事一覧ページの設定方法と合わせて、作り方をご紹介します。

作成する固定ページは2つ!
  1. 新着記事一覧ページ用
  2. トップページ用
目次

新着記事一覧ページの作成方法

もともとあるブログ記事一覧が表示されるトップページになる新着記事一覧ページを作成します。

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

新規固定ページ作成

固定ページのタイトルは、[新着記事]としておきます。一度、[下書き保存]します。

新規固定ページのパーマリンク設定

[新着記事]固定ページのパーマリンクを、new-postとし、固定ページを公開します。

新着記事一覧ページの作成は、以上です。ただし、この時点では、新着記事一覧ページとして機能していません。

後ほど紹介するWordPressの設定をすることで、機能するようになります。

トップページ(フロントページ)の作成方法

新規固定ページを作成

管理画面で、固定ページを新規作成します。先の新着記事の固定ページとは別に、新しく作ります。

新規固定ページ作成

[Home]とタイトルをつけます。[Top]などでもかまいません。一度、下書き保存します。

新規固定ページのパーマリンク設定

パーマリンクも確認します。

固定ページを作り込む

SWELL専用ブロックのフルワイドブロック背景色

ブロックをうまく組み合わせることで、コンテンツを作っていくことができます。

WordPressテーマ「SWELL」には、とても使い勝手のいいブロックがあります。トップページで使えるブロックをご紹介していきます。

フルワイドブロック

WordPressテーマ「SWELL」の専用ブロック

フルワイドブロックは、コンテンツを1つにまとめるブロックに使うことができます。

WordPressテーマ「SWELL」のフルワイドブロックを使ったところ

フルワイドなので、左右いっぱいに広がって、コンテンツを表現することができます。

機能としては、背景色をつけたり、背景画像を配置することができます。見出しを入れたり、不要なら消すこともできます。

WordPressテーマ「SWELL」のフルワイドブロック設定メニュー
WordPressテーマ「SWELL」のフルワイドブロックの見出し設定メニュー

また、フルワイドブロックの中に、段落やボタンブログなども入れることができるので、背景と合わせたコンテンツが作成できます。とても自由度の高いブロックです。

カラムブロック

WordPressのレイアウト要素のブロック

コンテンツを横に並べるブロックです。

WordPressテーマ「SWELL」のフルワイドブロックとカラムを使ったところ

上の画像の場合、フルワイドブロックの中に、カラムブロックを入れています。3つに分けたカラムの中に、画像ブロックや段落ブロックを入れています。

カラムは、最大6つまで横並びさせることができます。SWELL専用設定として、スタイルやカラム幅の設定も簡単にできます。

WordPressテーマ「SWELL」のカラムブロック設定
WordPressテーマ「SWELL」のカラムブロック設定
WordPressテーマ「SWELL」のカラムブロック設定

カラム幅は、基本的に均等です。SWELLでは、最初もしくは最後のカラムだけを幅広に調整できたりします。

投稿リスト

WordPressテーマ「SWELL」の専用ブロック

投稿リストブロックは、投稿した記事を表示してくれるブロックです。

WordPressテーマ「SWELL」の投稿リストを使ったところ

上の画像では、新着記事をカード型で表示したところです。

WordPressテーマ「SWELL」の投稿リストブロック設定
WordPressテーマ「SWELL」の投稿リストブロック設定

▲投稿リストのカード型の設定

WordPressテーマ「SWELL」の投稿リストブロック設定テキスト型を使っているところ

赤枠[お知らせ]部分でも投稿リストブロックを使用。[お知らせ]カテゴリーを抽出して、テキスト型表示の設定をしています。

WordPressテーマ「SWELL」の投稿リストブロック設定テキスト型
WordPressテーマ「SWELL」の投稿リストブロック設定テキスト型

▲投稿リストのテキスト型表示の設定

WordPressテーマ「SWELL」の投稿リストを使ったところ

▲[もっと見る]ボタンも、ブロックの設定で表示するテキストを入力すると、表示されます。

新着記事一覧ページとトップページ(フロントページ)を表示する設定

2つの固定ページを作成したら、WordPress側でそれぞれのページに、役割を設定する必要があります。

管理画面メニュー[設定]-[表示設定]をクリックします。

WordPress表示設定で、固定ページをトップページ設定

ホームページの表示を[固定ページ]にします。

ホームページ:Home
投稿ページ:新着記事

作成した固定ページを割り当てます。

WordPressの変更を保存ボタン

[表示設定]ページの下部にある[変更を保存]ボタンを押します。

トップページにアクセスすると、[Home]の固定ページが表示されます。

WordPressテーマ「SWELL」で、新着記事一覧ページを表示したところ

▲新着記事ページは、サイトアドレス/new-post にアクセスすると表示されます。

トップページのメインビジュアル設定

水輝亭トップのスライダー

トップページには、メインビジュアルを設置することができます。SWELLのカスタマイザーから設定可能です。

私が設定しているメインジュアルの設定値を参考にアップします。

WordPressテーマ「SWELL」のカスタマイザー
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー
スライド画像は5枚まで
WordPressテーマ「SWELL」のカスタマイザー の[TOP]メインビジュアル設定メニュー

▲動画もメインジュアルに設定することも可能です。

まとめ

WordPressテーマ「SWELL」を使うと、コードを書くことなく、Webサイトのようなトップページを作ることができます。

固定ページを2つ作り、それぞれトップページ用と投稿記事一覧用に、WordPressで設定することを忘れずに行ってください。

ブロックエディターで、直感的にブログもページ表示もコントロールできるようになりました。コードを書かずにブログ記事も作成できて楽に運用ができます。

当サイトで使用している有料WordPressテーマ「SWELL」

WordPressテーマSWELL シンプル美と機能性の両立
あわせて読みたい
WordPressテーマ「SWELL」に変更!クールなデザインで、ブロックエディター完全対応でとても使いやすい!
WordPressテーマ「SWELL」に変更!クールなデザインで、ブロックエディター完全対応でとても使いやすい!2019年10月頭に、当サイトのWordPressテーマを「SWELL(スウェル)」に変更しました。以前は、「Snow Monkey」を使っていました。どちらもWordPress最新型のブロックエ...
あわせて読みたい
WordPressテーマ「SWELL」の画像ブロックは、枠や影が簡単に付けられるスタイル設定があり、サイズ制御...
WordPressテーマ「SWELL」の画像ブロックは、枠や影が簡単に付けられるスタイル設定があり、サイズ制御...頻繁にアップデートされてくWordPressテーマ「SWELL」。その度に、新機能が増えたり、使い勝手がどんどん良くなっていっていくブロックエディター完全対応のテーマです...

ブログ・サポートsupport

ブログコンサルティングサポートサービス

ブログを継続的に発信していくサポートを行っています。

ブログのお悩みや技術的なことを相談できます。

WordPressブログのコンサル・運用サポートプランもあり、メンテナンスやトラブルにも対応します。

WordPressテーマ「SWELL」で、トップページをWebサイトのようにする

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる