メインコンテンツにスキップ

CMSリストからCMS記事ページへのリンクを設定する

Studio CMSで作成したCMS記事ページへの動線を作成し、サイト内の回遊性を高める設定をする手順を紹介します。CMSリストを配置し、リンク設定でCMS記事ページへのリンクを設定します。

今日アップデートされました

Point: Studio CMSとは

Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS(Content Management System)機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高い記事コンテンツを一元管理します。

Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。

この記事では、Studio CMSで作成したCMS記事ページへの動線を設定する方法を説明します。​
ホームページ(トップページ)などにCMS記事ページ一覧をCMSリストで配置し、記事ページへのリンクを設定して、ユーザーがサイト内をスムーズに移動できるような構成を作成します。

CMS記事ページが未作成の場合には、以下のヘルプ記事を参照してください。

CMS記事ページが作成されていない場合、この記事の手順を進めることはできません。


手順1:CMS記事ページ一覧をCMSリストで作成する

CMSリストを使って、記事アイテムの一覧を表示するボックスを作成します。

一例として、ホームページ(トップページ)に配置する手順を紹介します。

  1. デザインエディタを開きます。

  2. スクリーン上の一覧を配置したい位置に、CMSリストを作成します。​

  3. CMSリストに紐付けるCMSモデルとして、CMS記事ページに紐付いている記事モデルを選択します。​

  4. リストのレイアウトや外観を編集し、タイトルやサムネイル画像、概要テキストなど必要なボックスを配置します。

  5. 配置したボックスに設定済みの各種CMSプロパティを紐付けます。​

手順2:CMS記事ページへのリンクを設定する

CMSリスト内のボックスにリンクを設定して、CMS記事ページ(動的ページ)へ遷移できるようにします。

  1. デザインエディタで、CMSリスト内のアイテムを1つ選択します。​

    記事タイトルやサムネイル画像、ボタンなど、クリックさせたいボックスを選択します。

  2. 右パネルで[リンク]タブを開き、リンク設定フィールドをクリックします。

    パネルが閉じている場合は、右パネルを開いてください。​

  3. リンク設定フィールドのサイト内ページリストから、記事モデルの動的ページ(CMS記事ページ)をリンク先として選択します。​

  4. リスト内の1アイテムにリンクを設定すると、同じボックス構造を持つ他のアイテムにも自動で同じリンク設定が反映されます。

手順3:リンク設定とページ遷移を確認する

設定したリンクでCMS記事ページに正しく遷移できるかを確認します。

  1. ライブプレビューを開き、記事タイトルやサムネイルなどリンクを設定したボックスをクリックし、CMS記事ページへ遷移できるかを確認します。​​

  2. 遷移先のCMS記事ページで、タイトルや本文、その他のCMSプロパティが正しく表示されているかを確認します。​

よくある問題:リンク先ページが表示されない場合

リンクをクリックしてもページが表示されない場合、次の点を確認します。

  • リンク先として設定した記事モデルのCMS記事ページ(動的ページ)が存在しているかどうかを確認してください。​
    ページが作成されていない場合、リンク先のページは表示されません。​
    未作成の場合には、Studio CMS記事アイテムの本文を表示するCMS記事ページを作成する を参照して、CMS記事ページを作成します。​

  • CMSリストに紐付いているCMSモデルと、CMS記事ページに紐付いている記事モデルが同じCMSモデルかどうかを確認します。

  • CMS記事ページに紐付いたCMSアイテムの公開ステータスが[公開中]になっているか確認します。

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