SWELLでサイト型にカスタマイズ！つまづきポイントを解説

2022年11月20日2023年2月26日

サイト型トップページって憧れるけど難しそう……
私もおしゃれにカスタマイズしてみたいなぁ～！

今回はこのような悩みに答えていきます。

この記事を読んで得られること

SWELLを使用してサイト型トップページを作る上での「つまづきポイント」と「その解決法」を把握できるので、壁にぶつかることなく、誰でも簡単にトップページをカスタマイズできます！

私もサイト型トップページにチャレンジして、壁にぶつかり丸2日間足止めされた経験があります。

調べた通りに実行しても、なぜか上手くいかず、心が折れそうでした。

私が実際にSWELLを使用して、サイト型トップページを作る過程で、つまづいたポイントとその解決法をお伝えします！

結論から言うと、つまづきやすいポイントを理解すれば、誰でも簡単にサイト型トップページを作ることができます！

サイト型トップページに「チャレンジしてみたい方」や「チャレンジしたけど諦めてしまった方」はこの記事を最後まで読んで、自分好みのサイト型トップページを完成させましょう！

つまづきポイント！【新着記事＆人気記事】編

私が最初につまづいたポイントでもある新着記事＆人気記事編を解説していきます。

ホームページ（トップページ）のベースをつくる

ホームページの下準備

まずは、固定ページでホームページ（トップページ）のベースを作るための下準備をします。

ホームページのベースの作り方

STEP

固定ページを新規追加

WordPressの管理画面サイドバーの「固定ページ」→「新規追加」をクリックします。

STEP

タイトルを設定

タイトルは表示されないので、自分がわかりやすいものでOKです。今回は、「HOME」にしました。

STEP

URLスラッグを設定

URLスラッグはそのままURLになるので英数字でつけましょう！今回は、タイトルと同じ「home」にします。

STEP

公開する

「公開」をクリックして保存しましょう。

これでホームページの下準備は終わりです。

今作ったホームページ（トップページ）のベースに、自分が設置したいエリアを作っていきます。

次は新着記事エリアを作っていきます。

新着記事エリアと新着記事一覧ページの作り方

新着記事エリアは完成するとこんな感じになります！

新着記事エリアの作り方

次は、新着記事エリアを作っていしましょう！

新着記事エリアの作り方

STEP

ホームページのベースに新着記事エリアを作る

先ほど固定ページで作ったホームページのベースに、新着記事エリアを作っていきます。

STEP

フルワイドセクションを追加

まずは、ブロックの追加ボタンを押してメニューを開き、フルワイドセクションを追加してください。

STEP

フルワイドセクションの設定

フルワイドセクションの設定はお好みで構いません。

当ブログの設定はこんな感じです。

フルワイドブロック設定項目

コンテンツ横幅：記事
上下のpadding量：pc60 sp40
背景色：白

STEP

見出しの設定

見出しはそのまま「テキスト」入力してもいいですし、オリジナルの画像にしたいなら「インライン画像」のどちらでもお好きな方を選んでください。

今回は「インライン画像」を選択します。（「インライン画像」を選択すると見出しH2と認識されます。）

「インライン画像」に挿入するオリジナル画像はcanvaなどで作りましょう！

メニューからインライン画像を選択してください。

お好みの幅に設定してください。

インライン画像の選択方法

インライン画像を選択
画像を選択、画像の横幅を設定

STEP

投稿リストを追加

まずは、ブロックの追加ボタンを押してメニューを開き、投稿リストを追加してください。

STEP

投稿リストの設定1

「投稿表示順序:新着順」以外はお好みで構いません。

当ブログの設定はこんな感じです。

投稿リストの設定項目1

表示する投稿数：3
レイアウトの選択：カード型
投稿の表示順序：新着順
カテゴリー表示位置：日付の横

新着記事エリアに表示される投稿表示の順序なので、必ず新着順にしましょう！

STEP

投稿リスト設定2

こちらもお好みで構いません。

当ブログの設定はこんな感じです。

投稿リストの設定項目2

最大カラム数（pc）：3列
最大カラム数（sp）：２列
抜粋文の文字数（pc）：0
抜粋文の文字数:（sp）：0

STEP

MOREリンクの設定

MOREリンクとは「もっと見るボタン」のことです

「MOREリンクの表示テキスト」と「MOREリンクのリンク先」を決めます。

拡大した画像がこちらです。

新規記事一覧ページのURLはここで使います。URLを忘れてしまった方はこちらをクリックして確認してください！

当ブログの設定はこんな感じです。

MOREリンクの設定

MOREリンクの表示テキスト:新着記事をもっと見る
MOREリンクのリンク先URL:「https://mahiro-blog.net/new-post/」

これで新着記事エリアは完成です。

しかし、このままでは新着記事一覧ページが空ページのまま表示されてしまうので、表示設定を変更していきましょう。

表示設定の変更

次はMOREリンクボタンのリンク先に、新着一覧ページを表示させるための設定をしていきます。

WordPressの管理画面サイドバーの「外観」→「カスタマイズ」→「WordPress設定」→「ホームページ設定」と進みます。

画像はただいま準備中です。

今しばらくお待ちください。

ホームページ設定項目

ホームページ表示 : 固定ページ
ホームページ : HOME
投稿ページ : New Post

公開をクリックすれば完了です！

人気記事エリアと人気記事一覧ページの作り方

人気記事エリアは完成するとこんな感じになります。

まとめ:つまづきポイント！【新着記事＆人気記事】編

この記事では、SWELLでサイト型トップページの新着記事エリア＆人気記事エリアの作り方とつまづき安いポイントを解説してきました。

新着記事一覧ページは空ページで作り、表示設定で表示させる！
人気記事一覧ページは空ページではなく、きちんと投稿リストの人気順で作る！

この2つのポイントを覚えておけば、間違うことはないでしょう。

今回は、新着記事エリア＆人気記事エリアだけでしたが、これからもサイト型トップページをブラッシュアップしていく予定です！

その時に気づいた「つまづきポイント」をこれからも記事にしていきたいと思います！

今回は以上になります！最後までお読みいただきありがとうございました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

SWELLでサイト型にカスタマイズ！つまづきポイントを解説

つまづきポイント！【新着記事＆人気記事】編