メイン画像のスマホ画面での表示について

質問一覧対象テーマ: Landscapeメイン画像のスマホ画面での表示について
yasutakeyasutake asked 3年 前

メイン画像についてスマホ上の表示ですと真ん中部分の画像のみが表示されてしまいます。画像に文字を埋め込んでいる為、文字がうまく表示されません。
スマホ用のメイン画像のような設定は無理なのでしょうか。
それとも何らかのテクニックを使えばうまく表示できるものでしょうか。

1 Answers
baseadminBaseDesignInfo Staff answered 3年 前

ご質問ありがとうございます。
Landscapeではメイン画像に必ず横長画像を設定しなければならない、という決まりはありませんが、横長をメインとした場合、スマホでは「できるだけ中央部分をトリミングしてフルスクリーンにする」という仕様になっています。
現状でPC用、スマホ用、というように2種類の比率の画像をアップするようにはなっておりません。
(もしCSSコーディングができる場合は、ご自身で実現するということは不可能ではありません)
 
スマホ用の画像を別にアップできるようにする、という機能要望として検討させていただきたいと思います。
もしそう言った機能があった場合、ご自身で決められた縦長サイズの縦長画像を用意することは可能ですか?スマホの縦表示も機種により縦横比率が全て異なるため、比率は利用者が適当に判断し、テーマ側ではある程度はトリミングということになると思いますが、それで良いと思われますか?
よろしければご意見いただければと思います。

yasutakeyasutake replied 3年 前

ご回答ありがとうございます。
スマホ用画像の用意自体は可能ですのでそのような機能があれば非常に助かります。
知識があればHTML編集から対応は可能ということなんですね。一度試してみます
現状では中央部分のみが表示されてしまうということですが何か元の画像サイズこうすればよい等のテクニックはないでしょうか。
※元画像を確認頂いてないので何とも言えないかも知れませんが。

よろしくお願い致します。

baseadminBaseDesignInfo Staff replied 3年 前

PCとスマホでは縦横比が明確に違い、また写真もどこを見せたいかは全て異なるので、一定のテクニックはありません。「見切れては困る要素をできるだけセンターに寄せた画像」であれば、スマホでもほとんどの場合は問題ないかと思います。

文字もテキストであれば流動的に適応しますが、写真に画像として文字を載せている場合は難しいかもしれませんね。表示してみてから見切れない場所を把握して、その範囲内に文字をレイアウトして改めて画像を作成するというのも1つの方法です。

URLを貼っていただければこちらで拝見して何らかのアドバイスはさせていただけるかもしれません。

yasutakeyasutake replied 3年 前

情報ありがとうございます。
まだ開設準備中なのでURLに画像が反映されておりません。開設できましたらご相談致します。
相談ですがトップ画像の画像サイズはどの大きさ(ピクセル)で表示する仕様でしょうか。
またスマホ画面時のトップ画像が表示される大きさの仕様も教えて頂けないでしょうか。
そのサイズでうまく表示されるように画像を作り変えてみたいと考えております。

baseadminBaseDesignInfo Staff replied 3年 前

Landscapeはフルスクリーン表示するという仕様ですので、どんな画像サイズであってもその時の画面サイズに合わせて画面を覆うように表示されます。

ですので「どの大きさで表示する」というような指定値はありません。画像が綺麗に見えるための最低限のピクセルサイズ、という意味では一般的には長編1280px程度あれば十分かと思います。

同じように、スマホの縦表示になればその状態でフルスクリーンになるように中央寄せでフィットします。こちらも「その時のスマホの画面サイズで表示する」というレスポンシブな仕様です。

スマホ縦表示の比率はざっくりと言えば16:9ですので、それくらいでトリミングされると考えていただければ良いと思います。

https://sounansa.net/archives/3186

yasutakeyasutake replied 3年 前

テスト段階ですがショップURLの公開ができましたので確認したところ、パソコン画面(1920*1080)ですと上下の部分が切れてしまうことが判明しました。逆にiphoneのsafari上ではそれなりに表示されております。
元の画像が4876*2965pxなのですがどの比率にすれば(サイズ?)にすれば上下切れずに表示されるか助言頂けないでしょうか。
URLは下記です。
https://npgyuken.thebase.in/

baseadminBaseDesignInfo Staff replied 3年 前

1920*1080というのはおおよそ2:1なので、画像をそれに近づけるようにすれば良いかと思います。その画像であれば左右の余白を少し追加する形ですね。

1920*1080というのはかなり横長の比率で、もしその状態で閲覧されることを重視されるのであれば調整されると良いと思いますが、
一般的な普及環境、またスマホ表示も、ということであれば現状はちょうど良いくらいなのでは、という印象です。

ご質問ありがとうございました。

yasutakeyasutake replied 3年 前

画面サイズは1920*1024でした。
そのサイズに変更したところうまく表示されるようになりましたがbaseアプリで確認しても画像部分がブランク状態で設定した画像が表示されません。
どの画像が表示されるのでしょうか。