SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順

当サイトはアフィリエイト広告による収益を得ています。
ニック

こんにちは、ニック(@smplyw)です。

今回は、ブログのトップページにタブを設置してみましたので、その方法をシェアします。

WordPressのテーマはです。

トップページにこんな感じのタブ(新着記事・カテゴリー)を作りたい人は、ぜひ読んでみてください。

SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順1

この記事を読み終わるころには、
トップページに、新着記事やカテゴリー別のタブを作れるはず。

SWELLを使い始めたばかりの人にもできる限り分かりやすいように、画面キャプチャをたくさん使って、ていねいに説明します。

ちなみに筆者は2022年6月からSWELLを使っています。

SWELLが気になる方は、こちらの記事もぜひ読んでみて下さい。

この記事を書いた人
ニック
  • 手取り20万、資産1000万
  • 本業は学童保育の指導員
  • 家事、育児、仕事をしながら、
    2つのブログを運営中

このブログでは、手取り20万円くらいの人に向けて「節約」「投資」「ブログ」で資産を積み上げるための情報を発信しています。
そこそこ働き、自由な時間を増やしながら、お金の不安から解放される人が増えるといいなと思っています。心を込めて記事を執筆します。

この記事の内容

SWELLのトップページにタブを作成する2ステップ

最初に、SWELLのトップページに
タブを設置する流れを、ザックリとお伝えします。

全体像をザックリ把握しておくと、設定作業もスムーズに進むはず。

SWELLのトップページにタブを設置する流れは以下の2ステップです。

  1. 固定ページを作る
  2. 固定ページをホームページにする

固定ページでタブを作って、
それをホームページに指定していきます。

次に、具体的な手順を解説します。

ニック

図を多く取り入れて、なるべく誰でも作れるような解説を心がけます…!

1.固定ページを作る

まず、固定ページを作ります。

さっそくなのですが・・・

ここが一番のポイント

初心者の方は少し難しく感じるかもしれませんが、手順通りに設定すれば大丈夫です!

流れは以下の通りです。

  1. 固定ページを追加
  2. 固定ページにタイトルをつける
  3. タブを追加
  4. タブにタイトルをつける
  5. タブの中身を作る
ニック

順番に見ていきましょう

①固定ページを新規追加

  • WordPressの管理画面より、「固定ページ」→「新規追加」をクリックします。
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順2

②固定ページのタイトルを追加

  • 固定ページのタイトルを入力します。
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順3

今回は「ホームページ」としましたが、分かりやすいタイトルなら何でもOKです。

③タブを追加

  • 「ブロックを選択するには「/」を入力」にカーソルを合わせる。
  • 「/タブ」と入力
  • 「タブ」をクリック
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順4

④タブにタイトルをつける

  • タブにタイトルをつけます。

 ※今回は「新着記事」としています。

SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順5
  • 同様に、他のタブにもタイトルをつけます。
  • カテゴリー別のタイトルを入力

 ※今回は、「節約」「投資」「ブログ」にしました。

SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順6

⑤タブの中身を作る

続いて、タブの中身を作っていきます。

新着記事のリストを作る

まず「新着記事」のリストを作ります。

  • 「新着記事」のタブを選択する
  • 「/投稿」と入力する
  • 「投稿リスト」をクリック
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順7

画面右側から、以下を設定します。

  • 表示する投稿数
  • レイアウト
  • 投稿の表示順序
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順8

今回は、以下の設定にしました。

項目設定
表示する投稿数10
レイアウトリスト型
投稿の表示順序新着順(降順)

新着記事を表示する場合は、
投稿の表示順序を新着順(降順)
にしましょう。

これで新着記事のリストができました。

ニック

続いて、カテゴリー別の記事リストを作っていきましょう。

カテゴリー別に記事のリストを作る

続いて、カテゴリー別の記事リストを作ります。

  • 「カテゴリー」のタブを選択する
  • 「/投稿」と入力する
  • 「投稿リスト」をクリック
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順9
  • 画面右側の「Pickup」をクリック
  • 「カテゴリー」をクリック
  • カテゴリーを選択
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順10

今回は「節約」カテゴリーの記事を表示させました。

次に、「Settings」をクリックし、表示させるリストの条件を指定します。

SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順11

今回は、以下の設定にしました。

項目設定
表示する投稿数10
レイアウトリスト型
投稿の表示順序更新日順

更新日順にすると、リライト(更新)した記事が上に表示されます。

以上の手順を繰り返し、他のカテゴリーも作っていきましょう。

作れたら、画面右上の「公開」をクリックします。

SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順12

続いて、この固定ページをホームページにしていきます。

2.固定ページをホームページにする

固定ページの作成、お疲れ様でした。

ここからは、作った固定ページを
「ホームページ」に指定します。

ニック

とても簡単なので、安心してくださいね。

それでは、手順をお伝えします。

  • WordPressの管理画面より、「カスタマイズ」をクリック
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順13
  • 「WordPress設定」→「ホームページ設定」をクリックする
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順14
  • 「ホームページの表示」で「固定ページ」を選択
  • 「ホームページ」で「先程つくった固定ページ」を指定
  • 「公開」をクリック
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順15
ニック

今回は、固定ページのタイトルが「ホームページ」。まぎらわしくてゴメンナサイ…

これで完了です!

スマホから確認

スマホから確認すると、こんな感じです。

SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順16

トップページに「新着記事」と「カテゴリー」のタブが表示され
タブの中に、記事のリストが表示されます。

以上で、「SWELLのトップページにタブを設置」という目的を達成できたはず。

タブの形を変えたい人」「タブの大きさを揃えたい人」は、続きをご覧ください。

タブの形を「ふきだし」に変更する手順

ここからは、タブの形を「ふきだし」に変更する手順を解説します。

  • WordPressの管理画面より「固定ページ」→「先程作ったページ(ホームページ)」をクリック
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順17
  • タブを選択
  • 画面右上の「ブロック」をクリック
  • スタイル「ふきだし」を選択
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順18

画面右上の「更新」をクリックすれば反映されます。

スマホ画面は、こんな感じになりました。

SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順19

タブの大きさを揃えたい場合は、
「タブサイズ指定」から設定できます。

  • 固定幅を選択
SWELLのトップページにタブを作成|カテゴリー別の記事を並べる手順20

画面右上の「更新」をクリックすれば完成です!

SWELLのトップページにタブを作成|目的の記事にたどり着きやすくなる

今回は、SWELLのトップページにタブを設置する手順を解説しました。

読者さんがお目当ての記事にたどり着きやすいように、ぜひ「新着記事」や「カテゴリー」のタブを設定してみてください。

は簡単にオシャレなサイトを作れるところが魅力的ですよね。

表示スピードも速くなるので、興味のある方はこちらの記事もあわせて読んでみて下さい。

Cocoon→SWELLに移行して、
表示スピードが98まで上がりました…!

SWELLを買おうか迷っている方」は、こちらの記事もオススメです。

表示速度」「デザイン」「執筆速度」などを検証したり、使ってみての感想をまとめました。

追伸:

この記事を書こうと思ったきっかけを少しだけ…

興味のある方だけ、ご覧いただけば幸いです。

きっかけはTwitterでした。

SWELLって色がカラフルになりやすく、
もっとシンプルな装飾にしたいなーと思い、こんなツイートをしました。

これにリプライをくれたのが、ミズキさん

そして、ブログを見に行ったのですが、

そこに「新着記事」と「カテゴリー」に分けられたタブがあったのです。

とても素敵なブログなので、ぜひご覧になってください。

今回のタブがあるはず…

ミズキの生活応援ブログ

ニック

これは便利だ!僕も作ってみよう…!

と思い、作り方を調べました。

Google検索をして上位表示された記事を読むと・・・

タブの作り方は記載があったのですが、
「サイト型」の作り方など、
他のことも一緒に解説されているページがほとんど

そこで、

トップページにタブを作る」に絞って
初心者の方でも作れるように丁寧に解説する

これらを目標に、今回の記事を作ってみました。

これからも、
初心者の方でもSWELLのカスタマイズができるように、ていねいな記事を書いていきたいと思います。

Twitterでは

  • たくさんのブロガーさんとつながれて
  • 有益な情報をもらったり
  • ブログへの熱意から元気をもらったり
ニック

いつも本当に、ありがとうございます!

ブロガーさんはいつでもフォロバ100%!
ぜひフォローしていただけたら嬉しいです!

では、今回はこれで終わりです。

最後まで読んでくださり、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


この記事の内容