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

ライターごとに異なるSNSアイコンを表示する

Studio CMSで管理しているライター情報に応じて、各ライターごとに異なるSNSアイコンとリンク先URLを表示する方法を説明します。CMSモデルの準備から、SNSアイコンの設定、表示条件の設定まで順を追って解説します。

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

Point: Studio CMSとは

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

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

CMSでライターのSNS情報を表示する

本記事では、Studio CMSで管理するライター情報に基づき、各ライターアイテムごとに異なるSNSアイコン(Instagram・X・Facebookなど)とリンクを設定する方法を説明します。
設定後は、CMSリスト上で各ライターのSNSアイコンをクリックすると、登録されたSNSアカウントページへ移動できるようになります。

スクリーンショット:ライターごとにSNSアイコンを表示した例。

手順 1. ライター情報を管理するCMSモデル(ユーザータイプ)を作成する

ライター情報を管理するためのユーザータイプのCMSモデルを作成し、ライターアイテムを登録します。

  1. CMSダッシュボードで、ユーザータイプモデルを新規作成します。​

  2. 作成したモデル内に、必要な人数分のアイテムを追加します。

手順 2. SNS用のプロパティを追加する

ライターが利用しているSNSのURLを保存するため、テキストプロパティを追加します。

  1. 対象のユーザータイプモデルを開き、「+」ボタンからテキストプロパティを追加します。​

  2. プロパティ名は「instagram_url」「x_url」など、SNSの種類が分かるように設定します。

  3. 必要なSNSの数だけ同様にプロパティを追加します。

スクリーンショット:テキストプロパティを追加する様子。

手順 3. SNSのURLを登録する

各ライターアイテムに、利用しているSNSアカウントのURLを登録します。

  • Instagram・X(旧Twitter)・Facebookなど、各ライターが利用しているSNSに対応するプロパティへURLを入力します。

  • 登録していないSNSの項目は空欄のままで問題ありません。

スクリーンショット:テキストプロパティにURLを追加する様子。

手順 4. CMSリストをページに配置する

ライター情報を一覧表示するためのCMSリストを、デザインエディタ上のページへ追加します。

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

  2. ライターリストを表示したいページを開きます。

  3. 左パネルで接続パネルを開き、ライターリストを表示したい箇所に、手順 1で作成したユーザータイプモデルを紐付けた動的リスト(CMSリスト)を追加します。

    紐付けデータの変更が必要な場合には、紐付けたデータを変更するの手順を参照してください。

手順 5. リスト内にアイコンを追加してリンクを設定する

SNSアイコンをリスト内に追加し、手順 2で作成したプロパティとリンクさせます。

  1. アイコンボックスを追加して、追加したいSNSアイコンに変更します。

  2. アイコンを配置したいレイヤーに移動します。

  3. 右パネルで、アイコンのサイズ・文字色・背景色・余白などを調整し、視認しやすいデザインに整えます。

  4. 追加したアイコンを選択し、右パネルで[設定]タブを開きます。

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

  5. [リンク]の入力フィールドをクリックします。

  6. 表示された[+]をクリックして、[CMSプロパティから選択]から、SNS用のプロパティを選択します。

  7. 各SNSアイコンに対応するURLプロパティ(例:instagram_url)を指定します。

6. 表示条件を設定する

表示条件を登録することで、SNSアカウントURLが登録されているライターアイテムのみアイコンが表示され、登録がない場合は自動的に非表示になります。

  1. SNSアイコンを選択します。

  2. 右パネルで[設定]タブを開きます。

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

  3. 表示条件で、条件を「プロパティ is set」に設定し、対象プロパティに該当のSNS URLプロパティ(例:facebook_url)を指定します。


出し分け

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