Studioの写真ギャラリーの作り方｜CMS機能で更新簡単！

• クリエイター（デザイナーや写真家）
• 建築・インテリア（リフォームも含む）
• 不動産
• 観光・宿泊（旅館やホテル）
• 美容（美容室やネイル）

などビジュアル重視のコンテンツを見せたい時に、大活躍なのがギャラリーです。

例えば、不動産サイトにギャラリー機能を持たせると、どのような物件を持っているのかが一目瞭然なのでサイト訪問者は興味を持ってくれるでしょう。またデザイナーのポートフォリオでも、実際にどのようなデザインが作れるのか、を視覚的にパッと伝えられます。

今回は、Studioでのギャラリー作成方法を18枚の画像をもちいて、具体的に説明していきます。

ぜひ参考にしてみてください！

Studioの写真ギャラリーの作り方

今回は、StudioのCMS機能を用いてギャラリーを作っていきます。

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

また上記のギャラリーはCMS機能で作っているので、レイアウトさえ一度決めておけば、初心者でも簡単にサクッと更新できます。

ギャラリーを追加したい時は、下記の3項目を入力するだけです。

ぜひ参考にして作ってみてください！

①：カスタムタイプのCMSモデルを作成する

ダッシュボードにログインして、上部メニューの「CMS」をクリックします。

左メニュー欄の「＋」ボタンをクリックします。

モデル名を入力、カスタムタイプを選択して、「作成する」をクリックします。

②：CMSモデルの項目を編集する

今回のギャラリーサイトを作るには、「画像・タイトル・外部リンクのURL」が必要となります。

タイトルは既にあるので、画像と外部リンクのURL用に、項目を2つ増やしていきます。

右にある「＋」のボタンをクリックします。

「プロパティを追加」→「画像」→「追加」をクリックします。

同様に、「プロパティを追加」→「テキスト」→「改行なし」→「追加」をクリックします。

しっかり追加できていれば、下記の項目になったはずです。

項目名がわかりにくいので、1番右のところだけ「テキスト→外部リンクのURL」のように変更しておきましょう。

「新規追加」をクリックして、アイテムを追加していきます。

下記のようにアイテムが3つ以上、溜まっていればOKです！

③：ギャラリーのデザインを整える

デザインエディターに入ります。

左メニューの「追加」→「CMS」をクリックして、該当するCMSモデルを選択します。

画像を追加したいので、左メニューの「追加」→「ボックス」→「Image」をクリックします。

左メニューの「レイヤー」を開いて、Imageを<group>の中に入れます。そして自分の好きなレイアウトに調整してください。

④：アイテムとCMSを紐づける

最後に、アイテムとCMSを紐づけていきます。

番号が付いている<div>タグをクリックします。左メニューにCMSの詳細が出てくるはずです。

画像の右横にある丸マークをクリックしながら、キャンパス上の画像と紐付けます。

CMSアイテムの画像が反映され、下記のようにすべて画像が変わったはずです。

画像もしくはタイトルがクリックされたら、外部リンクに飛ばすように設定していきます。

番号が付いている<div>タグをクリックして、右メニューのリンク右横の「＋」ボタンをクリックします。

リンクの入力欄をクリックして、右端にある「＋」ボタンをクリックします。

「外部リンクのURL」を選択します。

これで紐付けは完了です！

ライブプレビューを開いて、クリックした時に指定した外部リンクに飛ぶか確認してみてください！

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