{"title":"OEMディテールカルーセル用コード","description":"\u003c!-- ▼▼▼ ここから HTML（LPの入れたい位置に貼り付けてください） ▼▼▼ --\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/1_1EF.jpg?v=1791878427\" style=\"vertical-align: middle; margin-bottom: -1px;\"\u003e\n\u003csection class=\"detail-section\"\u003e\n  \u003cdiv class=\"detail-carousel\"\u003e\n    \u003cdiv class=\"detail-slide\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/2_e6b665fd-d073-4950-9e5a-de6bd14b8682.jpg?v=1792569777\" alt=\"素材のアップ写真\" loading=\"lazy\"\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"detail-slide\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/2_e6b665fd-d073-4950-9e5a-de6bd14b8682.jpg?v=1792569777\" alt=\"アンダー部分の写真\" loading=\"lazy\"\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"detail-slide\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/2_e6b665fd-d073-4950-9e5a-de6bd14b8682.jpg?v=1792569777\" alt=\"パッドの写真\" loading=\"lazy\"\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"detail-slide\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/2_e6b665fd-d073-4950-9e5a-de6bd14b8682.jpg?v=1792569777\" alt=\"着用イメージ\" loading=\"lazy\"\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- スライドを増やすときは .detail-slide のかたまりをコピーして追加 --\u003e\n\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- ▲▲▲ HTML ここまで ▲▲▲ --\u003e\n\u003c!-- ▼▼▼ ここから CSS ▼▼▼ --\u003e\n\u003cstyle\u003e\n.detail-carousel {\n  display: flex;\n  gap: 10px;                        \/* スライド同士のすき間 *\/\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  -webkit-overflow-scrolling: touch;\n  padding: 4px 13% 16px;             \/* 左右7% = 横の画像がのぞく量 *\/\n  scrollbar-width: none;\n}\n.detail-carousel::-webkit-scrollbar {\n  display: none;                    \/* スクロールバー非表示（Chrome \/ Safari） *\/\n}\n\n.detail-slide {\n  flex: 0 0 100%;                   \/* 余白の内側いっぱいに表示 *\/\n  scroll-snap-align: center;\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.detail-slide img {\n  display: block;\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1 \/ 1;              \/* 画像の縦横比。お好みで変更 *\/\n  object-fit: cover;\n}\n\n\/* PCでは前後の画像を多めにのぞかせる *\/\n@media (min-width: 768px) {\n  .detail-carousel { padding: 4px 20% 16px; gap: 16px; }\n  .detail-slide    { flex-basis: 100%; }\n}\n\u003c\/style\u003e\n\u003c!-- ▲▲▲ CSS ここまで ▲▲▲ --\u003e","products":[],"url":"https:\/\/feliture.shop\/collections\/test-9.oembed","provider":"Feliture","version":"1.0","type":"link"}