STUDIOのカルーセルで画像が全部同じになる原因と対処法|1枚ずつ別画像に設定する方法

ホームページ作成

STUDIOでLPを制作しているとき、Carousel(カルーセル)で画像を差し替えたら「すべて同じ画像に変わってしまう」というトラブルはよくあります。これは不具合ではなく、コンポーネントや同期設定の仕組みによるものです。本記事では、STUDIOのカルーセルで画像を1枚ずつ別々に設定する方法と、同時に変わってしまう原因をわかりやすく解説します。

なぜカルーセルの画像が全部同じに変わってしまうのか

STUDIOのカルーセルで1枚の画像を変更した際に、他のスライドまで同じ画像に変わる場合、同一コンポーネントのインスタンスを複製しているか、同期されたレイヤーを使っている可能性が高いです。

つまり、見た目は複数の画像に見えても、内部的には「同じ部品」を複数表示している状態です。この場合、1か所を変更すると元データが更新されるため、すべて同時に変更されます。

コンポーネントが原因か確認する方法

まず、対象の画像をクリックして右側の設定パネルを確認します。コンポーネントとして配置されている場合、「コンポーネント」や「メインと同期中」などの表示があります。

この状態で画像を差し替えると、元コンポーネント自体が変更されるため、カルーセル内のすべての画像が同じ内容になります。特にテンプレートからカルーセルを追加した場合によく起こります。

複製時に通常コピーではなく「インスタンス複製」になっているケースもあるため、ここをチェックすることが重要です。

画像を1枚ずつ別にする具体的な手順

それぞれのスライド画像を別データにしたい場合は、次の手順で設定します。

  • 画像要素を選択する
  • 右クリックメニューを開く
  • 「デタッチ(コンポーネントから分離)」または「インスタンス解除」を選択
  • 通常レイヤーに戻ったことを確認する
  • その後で画像を差し替える

この操作を各スライドの画像ごとに行うことで、それぞれ個別の画像に変更できるようになります。

もし「デタッチ」が表示されない場合は、一度画像を削除してから新しく画像要素を追加する方法でも個別管理にできます。

カルーセル用画像を設定する際のおすすめ構成

カルーセルを作る際は、最初から個別画像として作るとトラブルを防げます。おすすめの構成は次の通りです。

項目 推奨設定
画像レイヤー 個別に追加する
複製方法 通常コピーを使用
コンポーネント化 画像は除外する
差し替え デタッチ後に実施

デザインパーツ(枠・ボタン・テキスト)はコンポーネント化しても問題ありませんが、カルーセルのメイン画像は個別管理にするのが安全です。

よくある勘違いと注意ポイント

「複製したから別物になっている」と思いがちですが、STUDIOではコンポーネント複製はリンク状態を保ったままコピーされます。見た目が同じでも、内部的に連動している場合があります。

また、CMS連携カルーセルの場合は、画像が同じフィールドを参照しているケースもあります。この場合はCMS側の画像フィールドを複数用意する必要があります。

まとめ

STUDIOのカルーセルで画像がすべて同じに変わってしまう原因の多くは、コンポーネントや同期インスタンスの影響です。画像を1枚ずつ別に設定したい場合は、デタッチして通常レイヤーに戻してから差し替えることで解決できます。カルーセル制作時は、画像だけは個別管理にする設計を意識すると、後からの修正もスムーズになります。

コメント

タイトルとURLをコピーしました