お世話になっております。
この度、12月にshopをオープン予定の古着屋Lmi…と申します。
現在デザインを進めているのですが、デザイン編集ページでは正常なのですが、ショップを公開してPCとiphonで確認するとメイン画像が切れてしまいます。 最適な画像のサイズを教えていただけないでしょうか。
webに関して素人で申し訳ございません。
お手数をおかけいたしますがよろしくお願いいたします。
ご質問ありがとうございます。
Landscapeのトップ画像はレスポンシブ、フルスクリーンで表示されますので、特に推奨する固定値はございませんが、縦横比4:3で少なくとも横幅1000px程あれば十分に綺麗に表示されるかと思います。
デザイン編集ページでは正常なのですが、ショップを公開してPCとiphonで確認するとメイン画像が切れてしまいます。
というのは、PCで表示できてもiPhoneで切れるという意味でしょうか?あるいはデザイン編集ページと公開状態で差異があるという意味でしょうか?
前者であれば割と多いご質問ですので、こちらなどご参照ください。
後者(デザイン編集ページと公開状態で差異がある)の場合、URLをお知らせ頂ければ、何が起きているのかこちらで見させて頂くことは可能です。
以前お問い合わせさせていただきました、古着屋Lmiと申します。
現在デザインを進めているのですが、デザイン編集ページでは正常なのですが、ショップを公開してPCとiphonで確認するとメイン画像が切れてしまいます。
PCでも、spでもどちらでも画像が切れてしまいます。
フルスクリーンでメイン画像を表示できるところが気に入り、購入させて頂いたのですがこれだと、買った意味がありません。
以下にショップのURLを添付いたしますのでご確認いただけないでしょうか。
何度かご質問させていただいたのですが、あまり納得のいくご回答を得られていないため再度問い合わせさせていただきます。
お手数をおかけいたしますがよろしくお願いいたします。
ショップURL→https://lmi.shopselect.net/
デザイン編集ページで差異がありまして、うまく表示されません。
お手数をおかけいたしますが、以下にshop URLを掲載いたしますのでご確認いただけないでしょうか。
編集ページURL→https://admin.thebase.in/users/edit_shop
よろしくお願いいたします。
URLをありがとうございます。しかしこの管理画面のURLは所有者がログインした状態で意味をなすものですので、こちらで確認することはできません。
デザイン編集ページの動作がおかしいときは次のようにお試しください。
一旦ログアウトして、ブラウザのキャッシュやクッキーをすべて削除してから、再
度ログインしてみる。
または今使っているブラウザとは別のブラウザでログインしてみる。
よろしくお願いいたします。
ショップURL→https://lmi.shopselect.net/
こちらのURLありがとうございます、確認しました。
PCでも、spでもどちらでも画像が切れてしまいます。
まずアップロードされた画像のサイズは980×653、縦横比は大体「3:2」ですね。
https://base-ec2.akamaized.net/images/user/template/Lmi-shopselect-net/image-MainVisual1_5bf8698619cf9.jpg
■ウェブデバイスの画面サイズについて
スマートフォン画面の縦横比は現在販売されている機種のほとんどが「16:9」です。
参考:https://sounansa.net/archives/2428
そしてPCのブラウザの縦横比についてはご存知の通り、その人が開いている状況でさまざまであり、更に表示しながらウィンドウを変更することができますので一定ではありません。
■フルスクリーンにするために
「横長の画像を縦長の画面にフルスクリーンで表示する」というのをイメージして頂けると良いのですが、画像を無理やり歪ませるか、両端を見切らせる形で真ん中に寄せてフィットさせる、のどちらかになります。
当然、歪ませるわけにはいきませんので、テーマ側でうまく左右を切り取りながら中央を維持して「16:9」にフィットさせるようになっています。
PCで見ている人が100人100通りのウィンドウサイズで見ていても、それぞれちょうどよく見切りながらフィットさせるようになっています。
ここまではご理解頂ければと思います。
■対処のアイディア
今回は人物が左によっている写真ですので、おそらくスマホでは写真が中央寄せのため人物が見切れてしまうことが問題なのかと思います。
対策としてはやはりどのようなクロップでも大丈夫な写真を選定することが最もおすすめです。
お気づきの通り、今回利用されている「3:2」の写真でも予め人物を中央に寄せクロップすることで、人物は見切らせずに表示することは可能です。
もう1つは、その写真に特化してカスタマイズしてしまう方法です。その写真1枚しか使わないという場合であれば、スマホなどで中央に寄せず、左右どちらかに寄せるということは可能です。
今回の左に寄った人物写真の場合、左寄せの設定にしてしまうことで、スマホの「16:9」の画面でも人物がほぼほぼ画面内に入ることになると思います。
下記にカスタマイズの方法をご案内します。
1. HTML編集Appをインストール
2. HTML編集画面に進み、LandscapeのHTMLコードを表示
3. 251行目あたり、「</head>」の直前に、次のコードをペースト
<style type="text/css"> #MainVisual span { background-position: left !important; } </style>
4. 保存して、デザインの公開ボタンを押す
みなさま様々な素敵な写真を利用されており、それをフルスクリーン表示するには使い手の工夫が必要になります。最終的には素敵なショップになるまでサポートさせていただきますので、よろしくお願いいたします。
適切なアドバイスをしていただきまして、ありがとうございます。
サイト編集に関して素人でとてもお手数をおかけいたしました。
親切なご対応のおかげで、問題を解決いたしました。
本当にありがとうございます。
すごく嬉しいです。
引き続き何卒よろしくお願いいたします。
ご連絡ありがとうございます、よかったです!