# BoundlessのスライドショーをPC/SPで異なる画像を登録 **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [April 7, 2022, 6:27am UTC](https://community.shopify.com/t/boundless-pc-sp/112358 "2022-04-07T06:27:11Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary Boundlessテーマのスライドショーで、PCとSPで異なる画像を表示したいという要望。Liquid初心者向けに、同一スライド内で2枚（PC/SP）を選択し、CSSで出し分ける実装案が提示された。 提案の要点: - slideshow.liquidでSP用の画像URLを変数img_url_sp（block.settings.hero_slide_sp）として追加（例: 92行目付近）。 - 既存のimgタグにpc-onlyクラスを付与し、同タグを複製してsp-onlyクラスに変更。複製側はdata-srcをimg_url_spへ。 - CSSのメディアクエリ（約750pxをブレイクポイント）でpc-only/sp-onlyの表示を切替。 - schema内にimage_picker（id: hero_slide_sp、ラベル「SP画像」）を追加し、管理画面からSP用画像を選択可能に。 最新の進捗: 提案どおりの実装でSP画像の設定に成功したとの報告。問題は解決済み。 補足: 実装にはコードスニペットとスクリーンショット（スキーマ追加位置や編集箇所）が重要。
**Author:** ![morooka](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@morooka](https://community.shopify.com/u/morooka)\ **Post date:** [April 7, 2022, 6:27am UTC](https://community.shopify.com/t/boundless-pc-sp/112358/1 "2022-04-07T06:27:11Z")
Boundlessのテーマを使用しております。 PCとSPで異なる画像を作成し、スライドショーにそれぞれ登録したいと思っております。 当方liquid初心者のためどのデータにどのようなコードを入れればよいか教えてほしいです。 お分かりになる方いらっしゃいましたらお願いいたします。 ざっくりとしたイメージ画像を貼りますが、あくまでイメージです。 スライドショー登録画面でPCとSPそれぞれを登録できればどんな操作感でも構いません。 よろしくお願いします。 ![PC_SP別画像登録イメージ画像.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/5/950de12b0d8f37f12261bf98b12e924a55024867.png) ---
**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\ **Post date:** [April 8, 2022, 1:29am UTC](https://community.shopify.com/t/boundless-pc-sp/112358/2 "2022-04-08T01:29:36Z")
新たに「画像スライド」を追加するのではなく、 「画像スライド」内でPC,SPの画像を選択できるようにするのはいかがでしょうか？ ![スクリーンショット 0004-04-07 17.27.41.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/6/6/5/6650feca4adab5e0f7090468415f6563a7c66cab.png) 方法としましては、一例ですが、上の添付のようにカスタマイズ画面から画像を2枚(PC表示用とSP表示用)指定できるようにし、cssでブレイクポイントを設定し、PC画像とSP画像の表示を出し分ける方法があります。 具体的には「slideshow.liquid」に以下のコードを追加することで実装可能です。 ①92行目の{% assign img\_url・・・ の下に下記コードを追加 ```markup {% assign img_url_sp = block.settings.hero_slide_sp | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} ``` ②93行目のimgタグに任意のクラス名を追加 (ここでは「pc-only」としています。pcとspで画像を出し分ける時に使用) ```markup ``` ③上記imgタグを複製して下の行に追加し、「pc-only」を異なるクラス名に変更する (ここでは「sp-only」としています) data-src=“{{ img\_url }}”の部分をdata-src=”{{ img\_url\_sp }}”に変更する (①で代入したSP用画像のurlを指定) ```markup ``` ①~③を追加した時のコード ![スクリーンショット 0004-04-07 17.25.40.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/b/4bf72bab557700e1a55dd9667300befdf668bb7c.png) ④ページ上の任意の箇所に以下cssを指定(ブレイクポイントは任意の箇所で) ```css @media screen and (min-width: 750px) { .slick-slide img.sp-only { display: none; } } @media screen and (max-width: 749px) { .slick-slide img.pc-only { display: none; } } ``` ⑤スキーマタグ({% schema %} ~ {% endschema %})内に下記コードを追加 (このコードを追加することで、カスタマイズ画面からSP用の画像を選択できるようになります。追加箇所は添付画像を参照してください) ```markup 　　　　　　　　　　　　　　{ "type": "image_picker", "id": "hero_slide_sp", "label": { "cs": "Obrázek", "da": "Billede", "de": "Foto", "en": "SP Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "it": "Immagine", "ja": "SP画像", "ko": "이미지", "nb": "Bilde", "nl": "Afbeelding", "pl": "Obraz", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "tr": "Görsel", "vi": "Hình ảnh", "zh-CN": "图片", "zh-TW": "圖片" } }, ``` ![スクリーンショット 0004-04-07 17.26.40.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/5/b5ada21885386d0871ffa9f12ab52e48d61e9d87.jpeg) ---
**Author:** ![morooka](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@morooka](https://community.shopify.com/u/morooka)\ **Post date:** [April 13, 2022, 4:45am UTC](https://community.shopify.com/t/boundless-pc-sp/112358/3 "2022-04-13T04:45:48Z")
返信が遅くなり申し訳ありません。 SP画像設定できました！ ご丁寧な説明とコードありがとうございます。