manukaconnection asked 5年 前
LANDSCAPEを使用してページ作成していますが、
設定した、TOP画像、背景画像がスマートフォン表示の場合に
うまく表示できない（拡大されてよくわからに画像になる）現象が起きています。
解決方法をご教授いただければと思います。
スマートフォン用のデフォルトテーマは使用していません。
スマートフォン版レスポンシブル対応について
manukaconnection asked 5年 前
manukaconnection asked 5年 前
ご質問ありがとうございます。実際のショップURLと、確認できる端末をお知らせ頂くことは可能でしょうか？
よろしくお願いいたします。
ショップURL
https://manuka.buyshop.jp/
スマートフォンは、IOS12.1.3を使用しています。
宜しくお願いいたします。
ありがとうございます。
まずTOP画像についてはPC、スマートフォンで縦横比が全く異なるため、どちらかに振る必要はあるかと思います。
おそらく今はPCやスマートフォン横向きの画面で見栄えの良い写真を選ばれているので、スマートフォン縦表示の縦長画面ではどうしても左右が見切れることになります。
どちらかに最適化する、あるいは写真選びでの対処例などこちらをご参照ください。
https://basedesign.info/question/%e3%83%a1%e3%82%a4%e3%83%b3%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/
https://basedesign.info/question/%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8%e7%94%bb%e5%83%8f%e3%81%8c%e4%b8%8a%e6%89%8b%e3%81%8f%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84/
次に、背景画像についてですが、もともと抽象的なデザイン画像のようなので、客観的には何をもって「よく分からない」かを定義することは難しいのですが、
こちらの画像も同様に横長の巨大な画像ですので、もしスマホを重視される場合はスマホに合わせた縦横比にした画像を試してみるのが良いかもしれません。
https://base-ec2if.akamaized.net/w=2048,a=0,q=90,u=0/images/user/bg/ecdfbe6800fff0f9dfd054d0ef05ab8b.png
どうぞよろしくお願いいたします。
ご返信ありがとうございます。
画像の件は、比率の変更、その他の画像のチョイス等で対応いたします。
別の質問として新規に質問するか悩みましたが、
レスポンシブ対応に関することですのこちらより失礼いたします。
先ほどお送りしたショップのTOPページ、
メインタイトル、サブタイトル、フレームも
同様ios12.1.3環境下では左右が見切れてしまします。
こちらはどうにか解消したいのですが、
文字数が多すぎるなどのこちら側の原因が考えられますでしょうか。
1つめのスライドがはみ出る理由は、「ManukaConnection」という文字列に途中スペースがなく1つの英単語とみなされるからです。
インターネットブラウザでは英単語が途中で折り返されることはありません。「ManukaConnection」は、それが絶対改行できない1つの塊になるので、その文字数である以上、画面横幅が狭ければ必ずはみ出てしまいます。
「Manuka（半角スペース）Connection」とすればそれは2つの単語として、もし画面からはみ出そうであれば自動的に改行してくれます。
よろしくお願いいたします。
こんばんは、すみませんちょうど今直していただいた状態を拝見しました。現状だとManukaの次にあるのが全角スペースだと思います。全角スペースだとその分の空白が取られますので、結果的にManukaの文字が左寄りに見えています。
半角スペースにしていただくと綺麗に見えると思いますのでお試しください。
ご返信ありがとうございます。
上記の件も修正できました。
ありがとうございます。
ただ、「Manuka Connection」が店舗名ですので
一行にすべて入ることが理想ではあります。
今後のアップデート等の際にご検討ご修正いただければと思います。
宜しくお願いいたします。
テキストは利用者の端末サイズに依存して流動的ですので、インターネット上の一般論として、テキスト状態で見た目を完全に固定することは難しいかと思います。
ロゴデザインとして決まった体裁で表示したいということですと、写真と一体化した画像にするしかないかもしれませんね。