Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
ただ、提示されたコードは単なるHTMLではないようです。
何かしらフレームワークなど利用していてそれが前提ならタグやバージョン情報も追記してください。
前提でないならブラウザに表示されたHTMLをそのまま提示してください。
カラーミーショップを利用しています。
スマホ版テンプレートで商品ページ内の画像をグリッド表示にしたいのですが上手くいきません。
(1)選択した画像のみ大きく表示
(2)その他の画像を、選択した画像の下部にグリッドで表示
(3)グリッドで表示している画像が二段になる場合は、左右に手動で動かせるスライド表示
上記のような仕様にしたいと思っております。
ご教示お願い致します。
現在のHTMLは下記の通りで、CSSは空欄となっております。
<div class="imagelist"> <div class=""> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o1.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o2.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o3.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o4.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o5.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o6.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o7.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o8.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o9.jpg?cmsp_timestamp=20201012160743"> </div> <div> <img src="https://img21.shop-pro.jp/PA01428/878/product/154725174_o10.jpg?cmsp_timestamp=20201012160743"> </div> </div>
ご返信ありがとうございます。
質問内容を修正致しました。
宜しくお願い致します。
え、っとどこかでしょうか。
ブラウザの「ソースの表示」をしても
<{if $product.id != ""}>
とか出てるんでしょうか。
あと
>CSSは空欄となっております。
上記の意味が分かりません。
各所にclassが指定されていますが、いずれもcssは振られてないということでしょうか。
となると「まず思うようにやってみるところから」としか言えません。作業依頼なので。
初心者なもので意味が分かっておらず恐縮です。
お手数お掛けして申し訳ございません。
文字数で弾かれてしまったので、画像に関係しそうな部分のソースを抜粋して訂正しました。
管理者ページ・テンプレート編集ページ内の、
HTML編集項目に変更前のHTMLが入っており、
CSS編集項目が空欄となっておりました。
回答1件
0
こんばんは。
ご希望の感じにするには結構手間がかかるので、なんらかのプラグインなどを使った方がいいと思います。たとえば：
その他、「サムネイル付き カルーセル」などでググってみてはいかがですか？
投稿2020/10/15 10:13
総合スコア36156
あなたの回答
tips
プレビュー
