【SWELL】固定ページ表示でサイト型にカスタマイズ｜基本的な手順を初心者むけに解説

この記事は、こんな疑問におこたえします。

「記事の書きやすさ」や「デザインの美しさ」などで、ブロガーに大人気のワードプレス有料テーマSWELL。

トップページを簡単にサイト型にカスタマイズできるのも人気のポイントです。

SWELLのおしゃれなトップページに憧れて、SWELLにされた方も多いのではないでしょうか。

私も、SWELLサイト集を見て、CocoonからSWELLに乗りかえをしました。

ただ、SWELL購入後に最初につまずいたのが、「固定ページ表示」でトップページをサイト型にカスタマイズする方法がイマイチ理解できなかったこと。

そこで本記事では、SWELL初心者の方むけに＜固定ページ表示＞でトップページをサイト型にカスタマイズする基本的な手順をくわしく解説します。

【固定ページ表示】と【ブログパーツのウィジェット表示】のカスタマイズ方法を比較

トップページをサイト型にカスタマイズする方法は、大きく分けてふたつあります。

❶と❷それぞれの方法の違いについてまとめてみました

	固定ページでカスタマイズ	ブログパーツ でカスタマイズ
表示 設定	固定ページ	最新の投稿
作成 場所	固定ページでコンテンツを作成	ブログパーツでコンテンツを作成
表示 方法	表示設定で表示させる固定ページを選択	ブログパーツをウィジェット表示させる
新着 記事 エリア	自分で「投稿リストブロック」で作成 （非表示にすることも可）	デフォルトの新着記事が自動で表示される （非表示にはできない）
メリット	新着記事を含めてカスタマイズが自由 コンテンツを固定ぺージで作成するためプレビュー表示で確認ができる	コンテンツの表示場所の入れかえがしやすい トップページ以外の場所にも表示できる
デメリット	新着記事コーナーの作り方が少しわかりにくい	新着記事コーナーを非表示やオリジナルにできない コンテンツをブログパーツで作成するためプレビュー表示で確認できない

当サイトの姉妹ブログ『まったり旅するblog』のトップページは、❶の固定ページを表示させる方法でカスタマイズをしています。

本記事では姉妹ブログを実例にして、固定ページ表示でトップページをカスタマイズする基本的な手順をわかりやすく解説します。

固定ページに作ったコンテンツ（新着記事コーナー）をトップページに表示させる手順

姉妹ブログ『まったり旅するblog』のトップページにある新着記事コーナーの作り方手順を説明します。

この手順をマスターすれば、固定ページ表示でトップページをサイト型にカスタマイズする方法がわかります。

固定ページで「新着記事コーナー」のコンテンツをつくる

「投稿ページ」用の固定ページ（空ページ）をつくる

「MOREボタン（もっと見る）」をクリックしたときに、記事一覧を表示させるために、固定ページに空ページをつくります。

新着記事コーナーのタイトルを装飾する

お好みで「新着記事コーナー」のタイトルを装飾します。

今回は、このようなタイトル用の画像を用意しました。

固定記事の表示設定を変更する

トップページに【新着記事】以外のコンテンツを表示する方法

トップページに「新着記事コーナー」以外のコンテンツを表示させる方法は、大きく３つあります。

１）固定ページにトップ画面に表示するコンテンツを作り込む

固定ページ画面で、トップ画面に表示させたいコンテンツを作っていく方法です。

作成する過程で、プレビュー表示できるのがメリットです。

ただ、各コンテンツの順番を入れ替えたいときは少しめんどうです。

２）固定ページの前後にブログパーツをウィジェット表示させる

新着記事コーナーだけ固定ページで作成し、前後のコンテンツはブログパーツをウィジェット表示させる方法です。

各コンテンツの順番を入れ替えたいときは便利です。

ブログパーツは「ヘッダー内部」や「フッダー直前」にもウィジェット表示させることができます。

３）固定ページとブログパーツを組み合わせる

１）と２）をミックスさせた方法です。

表示させるコンテンツの内容により「固定ページ」と「ブログパーツ」を使い分けると管理しやすい場合があります。

トピックス的な内容のコンテンツは、ブログパーツで表示させる方が管理しやすいかもしれません。

まとめ

今回は、固定ページ表示でトップページをカスタマイズする基本的な手順を紹介しました。

固定ページ表示でカスタマイズすると、「新着記事一覧」をオリジナルなスタイルや非表示にできるためカスタマイズのバリエーションが広がりますよね。

SWELLの独自機能であるブログパーツと組み合わせれば、サイト全体をオシャレなサイトにカスタマイズすることも可能です。

どうぞ、あなただけのおしゃれなサイトにカスタマイズしてみてくださいね。

この記事を読んでいただいた方が、少しでもカスタマイズの参考していただければ嬉しいです。

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

カスタマイズの参考になる記事をチェック！