【Studio】CMSアイテムをタグで絞り込む方法

STUDIOでは、CMS機能を使うことでブログやお知らせなどの一覧ページを効率的に管理・表示できます。

中でも「タグ機能」を活用すれば、閲覧者が興味のある情報に素早くアクセスできるようになり、ユーザー体験の向上につながります。

完成イメージとしては、下記のとおりです。

ブログを頻繁に更新している方、制作事例や施工事例をカテゴリごとに整理されている方は、なるべくタグで絞り込めるようにしておくのがおすすめです。

本記事では、CMSアイテムをタグで絞り込むための設定方法を、初めての方でもわかりやすく解説していきます。

タグ絞り込みに必要なCMSモデル

タグ絞り込みに必要なCMSモデルは、下記のとおりです。

モデル数は最低でも2個消費します。「記事の数が少ない」や「同ジャンルの内容のコンテンツばかり発信する予定」という場合は、そもそもタグ絞り込みを行う必要がないかもしれません。

モデル数の上限は料金プランによって異なってきます。料金プランごとのCMSモデル数の上限について詳しく知りたい方は、ぜひ以下の記事をご覧ください。

CMSアイテムをタグで絞り込む方法

今回は、初心者でもタグ絞り込みができるように、テンプレートを用いて実演していきます。

それぞれ具体的に説明します。

①：CMSで「ニュース・お知らせ」のテンプレを選択する

プロジェクトの上部メニューにある「CMS」をクリックします。

モデルの横にある「＋」ボタンをクリック、「テンプレートから選択」をクリックします。

1番右にある「ニュース・お知らせ」をクリックします。

テンプレートからモデルを追加すれば、必要なモデルを自動で準備してくれるため、手間が省けるメリットがあります。

下記のように、記事モデルとカテゴリモデルが自動で準備されたはずです。

②：一覧ページのリンクを編集する

デザインエディタにアクセスします。

左メニュー欄の「ページ」を開けば、新たに3ページ追加されているはずです。

1番上にある一覧ページのリンクを編集していきます。

「サポート」や「採用」や「アプリ」などのカテゴリがクリックされた時に、カテゴリに該当する記事が出てくるように設定します。

「サポート」の<li>タグを選択した状態で、右側メニューを開きます。

リンクは「CMS-Tags」を選択します。

次に、「すべて」をクリックすると、ニュース一覧ページが表示されるように設定していきます。

「すべて」の<li>タグを選択した状態で、「CMS-News」をリンクに設定します。

次に、「記事」をクリックすると、記事詳細ページが表示されるように設定していきます。

記事の<article>タグを選択した状態で、「CMS-News Details」をリンクに設定します。

これで一覧ページのリンク設定は完了です！

リンク設定完了後、下記のようになっていればOKです。

③：タグページのリンクを編集する

タグページのリンクを設定していきます。

1番下にあるタグページを開きます。

「②：一覧ページのリンクを編集する」と同じ手順で、下記のリンクを設定していきます。

しっかり設定できていれば、下記のようになるはずです。

④：CMSアイテムの中身を編集する

ここまでの実装で、CMSアイテムをタグで絞り込めるようになりました。ですがテンプレートで制作したので、CMSアイテムの中身がデフォルト状態です。

デフォルトで準備されている記事・カテゴリは削除して、「新規追加」のボタンから新しい記事・カテゴリを追加しましょう。

Studioでサイト制作は「Terace」にお任せ！