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

こういった悩みにお答えします。

是非、最後までご覧ください。

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

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

「カスタマイズ」を開く

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

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

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

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

以下の設定を行います。

表示するタブの設定

「タームタブ」の設定

以下からカテゴリーのIDの確認方法が分かります！

タブデザイン

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

SWELLブロックのタブを挿入

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

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

タブを追加

 （タブを追加）をクリックでタブを追加できます。

タイトルを入力

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

スタイル

タブ設定

タブブロックのID

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

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

ナゼか

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

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

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

検証

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

タブブロックのID：910dd051

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

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

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

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

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

タブサイズ設定（PC/SP）

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

カラー設定

ボーダー設定

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

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

完成版

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

タブにタイトルを入力

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

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

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

「新着記事」を作り込む

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

「人気記事」を作り込む

注意点

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

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

あわせて読みたい

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

「人気記事」を作り込む

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

「SWELL」を作り込む

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

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

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

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

今回は以上です。