[戻る]
No.3212

レスポンシブル

kazuさん  投稿日:2018/08/18(Sat) 00:46
key

コンテンツに画像やテキストを設定した時に
PCで見ると左右に空きがあって綺麗なのですが、
スマホで見ると、特に左側に余白がまったくなく、
とても窮屈な感じになります。
回避する方法はありますでしょうか?
何卒、よろしくお願いします。

Re: レスポンシブル

おたすけマイショップさん  2018/08/20(Mon) 11:33 No.3214
key

イージーマイショップにて提供するテンプレートにおいて、パーツ等で追加した画像のスタイルに以下が登録されています。

img {
max-width: 100%;
}

こちらは登録された元画像の幅よりは大きくならないスタイルとなります。
以上からパソコンで閲覧すると、画像以上の表示幅が担保されますので余白が追加されますが、スマートフォンでの表示の場合、表示幅よりも元画像の幅が大きい為、余白が表示されない事となります。

以上からスマートフォンにおいても余白が表示されるようにするには、フリーパーツで画像を追加頂き、その画像専用にスタイルを追加して頂くことが他の画像に影響がない方法となります。
(上記スタイルを変更する方法もございますが、登録されている全ての画像が適用されてしまいます)
※この方法の場合、専用機能の提供はございませんので、フリーパーツにてHTML・CSSコードを記述する必要がございます。

または、登録する元画像を縮小して頂き再度ご登録(上書き)して頂く方法もございます。
※この方法の場合、パソコン表示では画像が小さく表示されます。

以上を確認の上、編集をご検討下さい。


Re: レスポンシブル

kazuさん  2018/08/20(Mon) 13:36 No.3215
key

ありがとうございます。
すいませんよくわからないので、追加で質問させていただきます。
1と2の方法があるようですが、
1の方法は、CSS記述で、PCとスマホの表示を変える方法があるということでしょうか?
また、それは画像だけでなく、テキストについても同じでしょうか?

よろしくお願いします。


Re: レスポンシブル

おたすけマイショップさん  2018/08/20(Mon) 15:30 No.3217
key

> 1の方法は、CSS記述で、PCとスマホの表示を変える方法があるということでしょうか?
⇒ご認識の通りでございますが、CSSの記述を替えることと、対象となるコンテンツ(画像)の前後に(HTMLコードにて)classを充てて頂く必要がございます。


> また、それは画像だけでなく、テキストについても同じでしょうか?
⇒テキストについては(表示されるコンテンツの場所などにより異なりますが)パソコン・スマートフォンを問わず余白が表示されません。
 テキストにおいてはパソコン・スマートフォンを問わず上記の様に対象のコンテンツにclassを充てて頂きそれに対しスタイルを追加して頂く必要がございます。

最後に、大変ご不便をおかけしますが、HTML・CSSコードの記述方法などは基本的にサポート範囲外となりますので予めご了承下さい。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』