SNSリンク付き、メンバーリストの作り方 

こんにちは、STUDIOのメグです！
先日、コミュニティでdaisuke538さんが共有してくださったTipsがとても参考になったため、改めてまとめ、STUDIO Tipsとして皆さんにも共有したいと思います✨

今回ご紹介するのは、

• サイトにCMSでメンバー一覧を作りたい

• 各メンバーのSNSへのリンクを設置したい

• メンバーごとに持っているSNSアカウントの種類や数がバラバラ

そんな状況で、以下のようにSNSリンクつきのメンバー一覧を作る方法です💡

CMSダッシュボードでコンテンツを準備

今回実際に必要なのは、以下のような参照構造です。

詳しく作り方をみていきます！

1. モデル「メンバー」を作る

まずはユーザータイプの「Member」モデルを作り、各メンバーのアイテムを作っておきます。プロパティは一旦デフォルトのままで構いません。

2. モデル「メンバーSNS」を作る

先ほどとは別に、カスタムタイプで「Member SNS」モデルを作成します。

必要なプロパティは、

• Title（メンバー名_SNS名）

• SNS icon（SNSアイコン画像）

• URL（遷移先となるSNSプロフィールURL）

の３つです。

作成できたら、各メンバーのSNS情報を一つ一つアイテムとして登録します。

3. メンバーモデルにメンバーSNSプロパティ（複数参照）を追加

初めに作成した「Member」モデルに、「メンバーSNS」モデルの複数参照プロパティを作成して「SNS」と名付けます。

4. 各メンバーとSNSを紐づける

それぞれの「Member」アイテムの「SNS」欄に、「Member SNS」アイテムを紐付けます。

これでコンテンツの作成は完了です！

デザインエディタにリストを設置

ダッシュボードでコンテンツが準備できたら、エディタにリストを配置しましょう。

5. メンバーのリストを配置

アドパネルの CMS タブより、作成したMemberモデルのリストを配置しましょう。

6. 各カード内にSNSアイコンリストを作成

カード内に画像ボックスを配置し、右クリックでリスト化して Member SNS > SNS icon プロパティを紐付けます。

7. リンク先にメンバーSNSのURLを設定する

リンク設定パネルのURL欄でカーソル直下の＋ボタンをクリックし、作成しておいた「URL」プロパティを選択しましょう。

8. デザインを整えて完成！

これで、適切なSNSリンク集つきのメンバーリストが作成できました！🎉

「複数参照プロパティ」は、様々な応用が可能なテクニックになっているので、CMSをより使いこなしたい方は是非チャレンジしてみてくださいね！