フリーページでランキングを表示させてトップページを作りました。
レイアウトについてできるのか知りたくて質問です。
●商品一覧は中央を軸にしたセンター指定になっていたので
右揃えに変更したのですが スマホタブレットで表示させると
改行され右側の空白が広くなってしまいました。
なのでスマホとタブレットは中央にというように変更はできますか？
●トップページにあるランキングの表示はスマホで見ると画像が左寄りで幅は変わらず表示されるためカットされてしまいます。
通常の正方形を維持して小さく表示させることはできますか？
ランキングでタグを指定したものだとうまくできるようですがでもまだ気になり何とか直せたらと思ったのですが
伝わりましたでしょうか・・・
ページを拝見したところ、ページの左右に50pxの余白を設けるスタイルが追加されておりました。
そのため、スマートフォンで閲覧時に左右の余白を取得するとランキングの商品画像を表示させるスペースが足りず、
画像が見切れている状況かと思われます。
下記スタイルの追加にてスマートフォン表示時の左右余白を狭め、
ランキングを中央へ表示させる音が可能かと存じますので、ご確認をお願いいたします。
<style>
@media screen and (max-width: 700px) {
/* スマホ表示左右余白調整 */
#online_contents {
padding: 20px;
}
/* ランキング中央揃え */
.related_item_list .horizontal_none_slide .slides {
justify-content: center;
}
}
</style>
以下URLにスタイル追加方法の案内がございますのでご活用ください。
ページにページに<style>を追加する
https://emshelp.easy-myshop.jp/c-item-detail?ic=add-style
[スタイル追加に関するご注意]
標準で提供する機能及び設定ではございませんので今後のバージョン
アップにて上記スタイルが正常に適用されない場合がございます。
上記内容をご了承いただいた上でスタイルの追加を行ってください。
また、トップページ上下のランキング画像サイズを合わせる場合は、各ランキングの設定にて横幅を合わせてください。
各ランキングの画像サイズはランキング管理（拡張設定＞デザイン設定のランキングタブ)で各ランキングの編集(鉛筆ボタン)をクリックし、
「商品毎の横幅：」にて設定してください。
ご教授ありがとうございました。
50PX いつどこで書き足したのかがわかったので
消してレイアウトも中心になりました。
ちょっと今まで使っていたものよりも複雑ですが
もう少し色々やってサイトを作りたいと思います。