ギャラリー作成・設置

キュレーション・アルバムを作成したら、次はそれをECサイトに表示するためのギャラリーを作成します。このガイドでは、ギャラリーの作成方法と、ECサイトへのタグ設置方法を説明します。

ギャラリーは、キュレーション・アルバムをECサイト上に表示するための設定です。

役割: - アルバム内の投稿をレイアウト・表示 - ECサイトに埋め込むためのHTMLタグを生成 - 表示デザイン(レイアウト、色、フォントなど)をカスタマイズ

流れ: キュレーション・アルバムを作成 → ギャラリーを作成 → HTMLタグをECサイトに埋め込み → サイト上にギャラリーが表示

1. 左メニューから「ギャラリー」→「写真ギャラリー」を選択

2. 「新規ギャラリー作成」ボタンをクリック

3. ギャラリー名を入力(例:「春コレクション」「新商品紹介」)

4. アルバムの種類を選択(ドロップダウンメニューから選択)

5. 使用するアルバムを選択(既に作成済みのアルバムから選択)

6. 「作成」をクリック

✅ ギャラリーが作成されました。次は詳細設定を行います。

ギャラリーを作成した後、レイアウトやデザインをカスタマイズします。

利用可能なレイアウト:

すべてのプランで利用可能: - グリッド: 写真をタイル状に配置(最も一般的) - グリッド+: 写真をタイル状に配置し、投稿テキストを表示

スタンダードプラン以上: - カルーセル: 横スクロール形式で投稿を表示 - カルーセル+: 横スクロール形式で投稿テキストを表示

プロプラン以上: - コラージュ: 異なるサイズの写真を組み合わせたレイアウト - メイソンリー: ボーダータイル状のレイアウト - シングル: 大きく1枚の写真を表示 - リスト: 投稿をリスト形式で表示 - フィーチャー: 注目度の高い投稿を強調

💡 ページ別でのおすすめのレイアウト: - トップページ → グリッドまたはグリッド+(多くの投稿を一度に見せられるため) - 商品ページ → カルーセルまたはカルーセル+(横スクロールで省スペースに表示できるため)

すべてのレイアウトで利用可能な設定:

• アイテムごとの空き: 写真間のスペース(px単位)

• 1枚以上で表示: ギャラリーに表示する最小写真枚数

• もっと写真を表示する: クリックで追加の写真を読み込む機能

• もっと見るテキスト: ボタンのテキスト変更

• 角を丸める: 写真の角を丸くする

• フォント: 使用するフォント選択

• 太さ: フォントの太さ設定

• 表示/非表示: タイトルの表示設定

• タイトル: ギャラリータイトルのテキスト

• アラインメント: タイトルの配置(左・中央・右)

• デスクトップ: デスクトップ表示時のサイズ

• モバイル: モバイル表示時のサイズ

• 色: タイトルの色設定

• 色: ホバー背景色

• ホバー色: ホバー時のオーバーレイ色

• オパシティ: 透明度設定(60、70、80%の中で設定)

• ボタン: 有効・無効

• テキスト: ボタンのテキスト変更

• 太さ: フォントの太さ設定

• 色: ボタンのテキスト色設定

• スタイル: 6種類から選択

• アウトライン: アウトライン設定

• オーバーレイで画像のソースアイコンを表示する: 有効・無効

• 最低スターレーティングを表示する: 星評価の表示設定

• 最高スターレーティングを表示する: 最高評価の表示

• キャプション・レビューを表示: コメント表示設定

• 日付を表示する: 投稿日時の表示

• アップロードメディアのユーザーを表示: ユーザー名の表示

• ライトボックスでの買い物テキスト: 購入ボタンのテキスト

• ライトボックスでの買い物スタイル: スタイル変更

• ライトボックスでの買い物アウトライン: アウトライン設定

• ライトボックスでの買い物色: ボタン色設定

• カスタムCSSを有効にする: CSS編集機能のオン/オフ

各レイアウトによって、固有の設定項目があります。

• パソコン: 1行ごとのアイテム数(パソコン表示)

• 行: 行数設定

• モバイル機種: 1行ごとのアイテム数(モバイル表示)

• 行: 行数設定

• 縦長レイアウト: 縦方向の比率設定

• 表示件数: 同時に表示する写真の枚数

• アロー: 上下ナビゲーション矢印の表示設定

• 自動スライド: 自動スライドショー機能

• 縦長レイアウト: 縦方向の比率設定

• パソコン: 1行ごとのアイテム数(パソコン表示)

• 行: 行数設定

• モバイル機種: 1行ごとのアイテム数(モバイル表示)

• 行: 行数設定

• 大きめの画像を選択: 強調表示する写真の選択

• パソコン: 1行ごとのアイテム数(パソコン表示)

• 行: 行数設定

• モバイル機種: 1行ごとのアイテム数(モバイル表示)

• 行: 行数設定

• 幅: ギャラリーの表示幅

• 表示件数: 1ページに表示する写真の枚数

• モバイル機種: モバイル表示時の表示枚数

• タブを表示: カテゴリタブの表示

• 検索を有効にする: 検索機能の有効化

• 商品を表示: 商品情報の表示

• 自動スライド: 自動スライドショー機能

• アローはホバー時のみ表示する: ナビゲーション矢印の表示設定

1. ギャラリー一覧から対象ギャラリーをクリック

2. 「ギャラリーレイアウト」セクションで表示したいレイアウトを選択

3. 共通設定項目(フォント、タイトル、ホバー、ライトボックスなど)を調整

4. レイアウト別の固有設定を調整

5. プレビューで確認

6. 「保存」をクリック

✅ ギャラリーの設定が完了しました。

ギャラリーをECサイトに表示するには、生成されたHTMLタグをコピーして、ECサイトのHTMLコードに埋め込みます。

1. ギャラリーの詳細設定画面を開く

2. 画面下部の【コードを発行する】ボタンをクリック

3. HTMLコードを確認

   HTML

4. HTMLコードをコピー

⚠️ 重要: data-gallery-id の値は各ギャラリーごとに異なります。

別のギャラリーを作成した場合は、新しいタグを取得してください。

基本的なHTMLコードの形式

※data-group="true"のパラメーターを追加してください。

1. 対象ページを開く

2. HTMLエディタでコードを貼り付けられる場所を探す

3. コピーしたHTMLコードを貼り付け

4. 保存

💡 ヒント: ギャラリーを表示したい位置(商品説明の下、ページ最下部など)を決めてからコードを貼り付けてください。

商品アルバムのギャラリーについて: 商品アルバムで作成したギャラリーは、特定の商品の投稿のみを表示させることができます。商品詳細ページに埋め込む場合に便利です。

HTMLコードの形式:

埋め込み方法:

1. ギャラリーのHTMLコードを取得

2. data-group="true" パラメータを追加

3. 商品IDの部分に、ECサイトの商品変数を入力

   • 例(makeshop): data-product-id="<{$item.system_code}>"

   • 例(Shopify): data-product-id="{{ product.id }}"

   • ※各ECプラットフォームの変数形式に合わせて設定

4. 商品詳細ページのテンプレートに埋め込み

5. 保存

⚠️ 注意: data-product-id パラメータを使用することで、各商品ページに対応した投稿のみが表示されます。各ECサイトのテンプレート変数形式に合わせて設定してください。

HTMLコードを埋め込んだ後、以下の手順で正常に表示されているか確認してください。

1. ECサイトの該当ページをブラウザで開く

2. ギャラリーが表示されているか確認

3. 写真のホバー、クリック時のライトボックスなどが正常に動作するか確認

4. ブラウザのキャッシュをクリア(Ctrl+Shift+Delete)して再度確認

✅ すべて正常に表示されていれば、埋め込み完了です。

問題: ギャラリーが表示されない

考えられる原因と解決策: 1. HTMLコードがコピーできていない - もう一度HTMLコードを取得して、コピー&ペーストを実施

2. コードが正しく埋め込まれていない

   • HTMLエディタで、コードが正しく貼り付けられているか確認

   • コードの前後に余計なスペースがないか確認

3. ギャラリーが公開設定になっていない

   • U-KOMI管理画面でギャラリーが「公開」になっているか確認

4. ブラウザキャッシュの問題

   • ブラウザのキャッシュをクリア(Ctrl+Shift+Delete)して再度確認

問題: ギャラリーは表示されるが、写真がない

考えられる原因: 1. アルバムに投稿が追加されていない - キュレーション・アルバムに投稿が追加されているか確認

2. 投稿の取得に時間がかかっている

   • 最大1〜2日待つ必要がある場合があります

1つのECサイトに複数のギャラリーを埋め込みたい場合:

1. ギャラリーごとにHTMLコードを取得

2. 各ギャラリーのコードを、表示したい位置にそれぞれ貼り付け

💡 活用例: - 商品ページ1: 「春コレクション」ギャラリー - 商品ページ2: 「新商品」ギャラリー - トップページ: 「最新投稿」ギャラリー

A: ギャラリーを削除すると、ECサイトに埋め込まれたHTMLコードは機能しなくなり、ギャラリーは表示されません。削除前に、本当に不要か確認してください。

A: はい。ギャラリー設定を保存すると、すぐにECサイト上に反映されます。ブラウザのキャッシュをクリアの上確認してください。

A: 「カスタムCSS」セクションでCSSコードを入力することで、詳細なデザイン調整が可能です。カスタムCSSはサポート対象外のため、CSSの知識がある場合のみの利用をお勧めします。

A: ギャラリーのアルバムはいつでも変更可能です。ただし、商品アルバムまたはユーザーアルバムで作成したギャラリーの場合は、アルバムを変更することはできません。その場合は、新しいギャラリーを作成してください。

• キュレーション・アルバムの管理方法

最終更新日: 2026年5月