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

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

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

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

シェアはこちらから!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!
目次
上へ
目次
閉じる