メインコンテンツにスキップ
すべてのコレクションCMSCMSコンテンツのデザイン
CMS記事にカテゴリーやタグを追加し表示する方法
CMS記事にカテゴリーやタグを追加し表示する方法

CMSで管理する記事や作品アイテムのページにタグやカテゴリー追加して、表示する方法をご紹介します。

Saika avatar
対応者:Saika
1か月以上前に更新

Studio CMS記事にカテゴリーやタグを表示する方法

Tips:Studio CMSとは

Studio CMSはブログサイトの記事やポートフォリオサイトの作品など定期的に追加・更新するコンテンツを効率的に管理できる機能です。コンテンツはCMSダッシュボードという専用の画面で管理し、そのコンテンツをどのようにWebサイトに表示するかはデザインエディタで編集します。

この記事ではCMS記事などのアイテムページに単一のカテゴリーと複数のタグの両方を表示する手順〜詳細ページへのリンク設定までをご紹介します。記事や作品、商品やイベントページへのタグ表示など様々な用途でご利用いただけます。

CMSデータの仕組みを先に理解しておくとスムーズです。詳細は、CMSコンテンツの仕組みをご覧ください。

CMSダッシュボードでコンテンツを追加する

Studio CMSのデータは4種類(モデル、アイテム、プロパティ、コレクション)です。記事、カテゴリー、タグのコンテンツデータはそれぞれモデルを作成しそれらにアイテムを追加します。

1. 記事モデルの追加

CMSダッシュボードへアクセスし、記事タイプモデルを追加します。このモデルではブログ記事を管理します。

Studio CMSでCMSモデルを追加する画面

ここにアイテムを追加します。

Studio CMSでCMSモデルにアイテムを追加する画面

2. カテゴリーモデルの追加

カテゴリーを管理するためのモデルを追加します。モデルタイプはカテゴリータイプを選択します。カスタムタイプでも問題ありません。

Studio CMSでCMSモデルを追加する画面

ここにアイテムを追加します。

Studio CMSでCMSモデルにアイテムを追加する画面

3. タグモデルの追加

タグを管理するモデルを追加します。モデルタイプはカスタムタイプを選択します。カテゴリータイプでも問題ありません。

Studio CMSでCMSモデルを追加する画面

ここにアイテムを追加します。

Studio CMSでCMSモデルにアイテムを追加する画面

4. 記事モデルに「カテゴリー」の参照プロパティ(シングルセレクト)を追加する

記事モデルにカテゴリーモデルの情報を紐付けます。記事モデルにプロパティを追加します。

Studio CMSでCMSモデルに参照プロパティを追加する画面

参照プロパティのカテゴリーモデルを選択します。シングルセレクトで追加します。

Studio CMSでCMSアイテムに参照アイテムを追加する画面

5. 記事モデルに「タグ」の参照プロパティ(マルチセレクト)を追加する

記事モデルにタグモデルの情報を紐付けます。記事モデルにプロパティを追加します。

Studio CMSでCMSモデルに参照プロパティを追加する画面

参照プロパティのタグモデルを選択します。マルチセレクトで追加します。

デザインエディタでカテゴリーとタグを表示する

CMSダッシュボードで追加したコンテンツデータをWebサイト上に表示するため、エディタにデータを表示しデザインします。

1. エディタで動的ページを追加する

動的ページを追加します。モデルは記事モデルを選択します。

2. カテゴリーを表示する

テキストボックスを配置します。

画面右側のボックス設定パネルを開き、テキスト欄をクリックします。カテゴリーの Title プロパティを選択します。

テキストボックスにCMSプロパティを紐づける画面

2. タグを表示する

テキストボックスを配置します。

ページにテキストボックスを配置した画面

画面右側のボックス設定パネルを開き、テキスト欄をクリックします。タグプロパティ(リスト化して接続)を選択します。

ページにテキストボックスを配置した画面

タグ・カテゴリーの詳細ページへのリンクを設定する

配置したタグ・カテゴリー別の記事一覧ページを先に用意して、リンクを設定します。タグやカテゴリー別の記事一覧ページ作成方法は、カテゴリー(参照アイテム)別記事一覧ページを作成するをご覧ください。

よくある質問

Q. エディタに配置した複数タグのボックスで単体のカテゴリープロパティに変更したいですが、できません。

A. リスト化されている「タグ(複数選択)」の表示内容を後から「カテゴリー(単数選択)」に変更しようとしても、プロパティ選択肢に「カテゴリー」は出てきません。変更したい場合はボックスを新規追加しプロパティを選択してください。

Q. 動的リストにタグやカテゴリーを表示する方法はありますか?

A. 追加パネル > CMS メニューから配置する動的リストへは、プロパティを後から追加できます。記事内で紹介した同様の手順でテキストボックスを動的リスト内に配置してプロパティを紐づければ表示できます。お試しください。

動的リスト内テキストボックスにCMSプロパティを紐づける画面

Q. 「一部のアイテムが公開サイトに表示されません。」とエラーが表示されます。


CMSアイテムはステータス管理が可能です。公開サイトにアイテムを表示させるにはステータスを公開へ変更する必要があります。公開サイトにアイテムが表示されない場合はステータスが公開中であるかご確認ください。

CMSアイテム一覧画面

Tag Category

こちらの回答で解決しましたか?