【SWELL】タブ切り替え機能付き記事一覧の実装【タブの使い方も解説】

当ページのリンクには広告が含まれています。
初心者ブロガー

「タブ切り替え機能付き記事一覧」の実装方法やSWELLで用意されている「タブ」の使い方を教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • 「タブ切り替え機能付き記事一覧」を実装する方法
  • タブ切り替え機能(主にタブブロック)の使い方
  • SWELLブロックの「タブ」と「投稿リスト」で「タブ切り替え機能付き記事一覧」を実装する方法

是非、最後まで読んでみて下さい。

本記事の内容

【SWELL】「タブ切り替え機能付き記事一覧」を実装

「ブログ型トップページ」の場合の実装方法になります。

「カスタマイズ」を開く

管理画面メニューから、「外観」>「カスタマイズ」を選択します。

「記事一覧リスト」を開く

左サイドバーから、「記事一覧リスト」を選択します。

「タブ切り替え設定(トップページ)」を行う

以下の設定を行います。

  • 表示するタブの設定
  • 「タームタブ」の設定
  • タブデザイン

表示するタブの設定

  • 「新着記事タブ」を追加するに「」を入れます。
  • 「人気記事タブ」を追加するに「」を入れます。

「タームタブ」の設定

  • 15 ※ カテゴリーやタブのIDを入力します(今回は、カテゴリーのIDを入力しています)。
以下からカテゴリーのIDの確認方法が分かります!
開いて確認する

管理画面メニューから、「投稿」>「カテゴリー」を選択します。

「カテゴリー」が表示されました。

下記の15(赤枠)がカテゴリーのIDです。

タブデザイン

【SWELL】タブ切り替え機能(主にタブブロック)の使い方を解説

SWELLブロックのタブを挿入

管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「タブ」を挿入します。

タブを追加

(タブを追加)をクリックでタブを追加できます。

タイトルを入力

「タイトル…」から入力できます。

スタイル

ノーマル

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

ふきだし

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

下線

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

タブ設定

  • タブブロックのID
  • 何番目のタブを最初に開いておくか

タブブロックのID

「※」で以下が記載されています。

※ 同じページにある他のタブブロックと被らないIDにしてください

ナゼか

以下のようなことが起こるからだと思います。

現在でも不具合は起こるのか

結論から先に言うと現在は不具合は起こりません

検証

ブログパーツで以下を用意しました。

タブブロックのID:910dd051

ブログパーツで同じタブブロックを呼び出します。

投稿を表示させた後、「ページのソースを表示」させます。

異なるIDが割り振られています。

したがって、繰り返しになりますが、「※ 同じページにある他のタブブロックと被らないIDにしてください」と記載されていますが、不具合は起こらないと思います。

何番目のタブを最初に開いておくか

Tab5 ※ 5番目のタブを最初に開くように設定しています。

タブサイズ設定(PC/SP)

テキストに合わせる

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

PC:固定幅(25%)/SP:固定幅(50%)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

端まで並べる

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

端まで並べる(均等幅で)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

ナビをスクロール可能にする

Tab1

カラー設定

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

ボーダー設定

ボーダー:無(デフォルト)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

ボーダー:有

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

ボーダー:無(デフォルト)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

ボーダー:有

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

SWELLブロックの「タブ」と「投稿リスト」で「タブ切り替え機能付き記事一覧」を実装

「サイト型トップページ」や「ブログパーツ」の場合の実装方法になります。

完成版

今回は、事前に用意した完成版を元に実装方法を解説していきます。

タブにタイトルを入力

左から順に、「新着記事」「人気記事」「SWELL」と入力します。

タブに「投稿リスト」を挿入

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「投稿リスト」を全てのタグに挿入します。

「新着記事」を作り込む

(設定)から、「ブロック」>「Settings」>「表示設定」を開いて以下を設定します。

  • 投稿の表示順序
  • MOREリンクの表示テキスト
  • MOREリンクのURL
  • 投稿の表示順序:「新着順」を選択します。
  • MOREリンクの表示テキスト:「もっと見る」と入力します。 ※ お好きなテキスト名でOKです。
  • MOREリンクのURL:「https://hrdyuic.com/」と入力します。 ※ 新着記事一覧ページのURLを入力します。

「人気記事」を作り込む

注意点

人気記事一覧ページはデフォルトでは用意されていないので作成する必要があります。

簡単ですので先に作成しておきましょう。

あわせて読みたい
【SWELL】人気記事一覧ページを作成する方法【超簡単です!】 SWELLで人気記事一覧ページを作成する方法を知りたいですか?本記事では、人気記事一覧ページを作成する方法の解説や人気記事一覧ページを表示させた状態を確認することができます。SWELLで人気記事一覧ページを作成する方法を知りたい方は是非ご覧ください。

「人気記事」を作り込む

「新着記事」と同じ要領で設定していきます。

  • 投稿の表示順序:「人気順」を選択します。
  • MOREリンクの表示テキスト:「もっと見る」と入力します。 ※ お好きなテキスト名でOKです。
  • MOREリンクのURL:「https://hrdyuic.com/swell-popular-posts/」 ※ 作成した人気記事一覧ページのURLを入力します。

「SWELL」を作り込む

(設定)から、「ブロック」>「Pickup」>「タクソノミーの条件設定」を開きます。

カテゴリーから、「SWELL」を選択します。

その後、「Settings」を選択して「新着記事」と同じ要領で設定していきます。

  • 投稿の表示順序:「ランダム」を選択します。
  • MOREリンクの表示テキスト:「もっと見る」と入力します。 ※ お好きなテキスト名でOKです。
  • MOREリンクのURL:空でOKです。 ※ カテゴリーを指定した場合などは自動でURLを取得してくれます。

最後:「スタイル」の選択と「タブサイズの設定」

  • スタイル:「ノーマル」を選択します。
  • タブサイズ設定(PC):「固定幅(25%)」を選択します。
  • タブサイズ設定(SP):「固定幅(50%)」を選択します。

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

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

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容