レスポンシブル
コンテンツに画像やテキストを設定した時に
PCで見ると左右に空きがあって綺麗なのですが、
スマホで見ると、特に左側に余白がまったくなく、
とても窮屈な感じになります。
回避する方法はありますでしょうか?
何卒、よろしくお願いします。
イージーマイショップにて提供するテンプレートにおいて、パーツ等で追加した画像のスタイルに以下が登録されています。
img {
max-width: 100%;
}
こちらは登録された元画像の幅よりは大きくならないスタイルとなります。
以上からパソコンで閲覧すると、画像以上の表示幅が担保されますので余白が追加されますが、スマートフォンでの表示の場合、表示幅よりも元画像の幅が大きい為、余白が表示されない事となります。
以上からスマートフォンにおいても余白が表示されるようにするには、フリーパーツで画像を追加頂き、その画像専用にスタイルを追加して頂くことが他の画像に影響がない方法となります。
(上記スタイルを変更する方法もございますが、登録されている全ての画像が適用されてしまいます)
※この方法の場合、専用機能の提供はございませんので、フリーパーツにてHTML・CSSコードを記述する必要がございます。
または、登録する元画像を縮小して頂き再度ご登録(上書き)して頂く方法もございます。
※この方法の場合、パソコン表示では画像が小さく表示されます。
以上を確認の上、編集をご検討下さい。
Re: レスポンシブル
ありがとうございます。
すいませんよくわからないので、追加で質問させていただきます。
1と2の方法があるようですが、
1の方法は、CSS記述で、PCとスマホの表示を変える方法があるということでしょうか?
また、それは画像だけでなく、テキストについても同じでしょうか?
よろしくお願いします。
> 1の方法は、CSS記述で、PCとスマホの表示を変える方法があるということでしょうか?
⇒ご認識の通りでございますが、CSSの記述を替えることと、対象となるコンテンツ(画像)の前後に(HTMLコードにて)classを充てて頂く必要がございます。
> また、それは画像だけでなく、テキストについても同じでしょうか?
⇒テキストについては(表示されるコンテンツの場所などにより異なりますが)パソコン・スマートフォンを問わず余白が表示されません。
テキストにおいてはパソコン・スマートフォンを問わず上記の様に対象のコンテンツにclassを充てて頂きそれに対しスタイルを追加して頂く必要がございます。
最後に、大変ご不便をおかけしますが、HTML・CSSコードの記述方法などは基本的にサポート範囲外となりますので予めご了承下さい。