レスポンシブで画像一覧表を作製したいです。
※過去の作品一覧など
どうしてもレイアウトが崩れてしまいます。
おすすめの方法など教えて下さい。
「画像一覧表」とのことですが、商品一覧ではなく、画像のみの一覧と認識して回答いたします。
また、ページレイアウト管理(デザイン設定>レイアウトタブ)にて標準モードを利用されていますのでこちらのモードでの案内となります。
画像を表として一覧表示する専用の機能はございませんので[画像/テキストリンク]パーツを使用した案内となります。
※イージーマイショップではパーツにて配置された内容であれば、レスポンシブ対応となるテンプレートにて
自動でレイアウト調整が行われます。
[画像/テキストリンク]パーツの設置手順は以下の通りです。
1.ページレイアウト管理(デザイン設定>レイアウトタブ)を開きます。
2.[未使用パーツ]>[新規作成]から[画像/テキストリンク]パーツを作成します。
3.[画像/テキストリンク]パーツの設定画面にて画像の指定や画像の並び方の指定してパーツを作成します。
※後述しますが画像の指定を1枚または複数枚により以降の設定方法が異なります。
4.3で作成した[画像/テキストリンク]パーツをレイアウト図に配置して完了です。
[画像/テキストリンク]パーツの画像指定枚数や並び方の指定によりレスポンシブ対応にて行われるレイアウトの自動調整内容が異なります。
・[画像/テキストリンク]パーツで画像を1枚のみ指定する
画像を1枚のみ指定し作成した複数の[画像/テキストリンク]パーツを並べると画像が縦並びとなります。
これらパーツをレイアウト図[コンテンツ]内にある最上部または最下部に配置し、その場所にある[設定]
ボタンから横並びとすることが可能です。
この方法では表示する画像サイズは画面の一定幅までは元サイズで表示され画像のレイアウトは自動で
調整されますが、全てのパーツが横並びとなりますのでご注意ください。
(一定幅を超えると画像が縮小して表示されますがその後、レイアウトが自動で調整されます)
・[画像/テキストリンク]パーツで画像を複数枚指定する
1つの[画像/テキストリンク]パーツ内で複数画像を指定し並び方を[横並び]と指定すると複数画像が
1つのパーツとしてみなされますのでページの表示幅に伴いパーツ内の画像が全て縮小して表示されます。
(1パーツ内に登録された画像は並び替えが行われません)
一定の画像サイズまでサイズを確保したい場合は1パーツ内に複数枚の画像登録は行われないことをお勧めいたします。
おすすめの方法としては1行毎に[画像/テキストリンク]パーツを作成(3枚程度の画像を登録)し、そのパーツを縦並びに複数行で表示すると想定されている内容に近い表示となる可能性がございます。
[画像/テキストリンク]パーツや配置する場所にて特性が異なりますので以上の内容を踏まえ表示をお試しください。
別の方法として[画像/テキストリンク]パーツではなく[フリー]パーツを使用する方法もございますがこちらは基本的にパーツ内にて登録した内容がそのまま表示されます。
HTMLモードに切り替えてHTMLコードにて登録することで意図したレイアウトにすることは可能ですが、コードを
使用した記述方法はサポート範囲外となりますのでご利用者様にて確認いただく必要がございますので予めご了承ください。