【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(8)~

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(8)~

前回の記事で、スマートフォン向けサイトの画像についてご案内しました。
480~620pxの画像を横幅240pxに指定して縮小表示させると綺麗な画像を表示することができます。
では、背景画像についてはどうでしょうか?

例えばリンクボタンに背景画像を使用したい場合、通常は下記のようなHTMLとCSSで背景画像にボタンを追加します。背景画像は240pxで作成しました。

aishipの管理画面から上記のようなHTMLとCSSを保存し、実際にスマートフォンからページへアクセスしてみるとどうでしょう? 少しだけ背景画像がボケたような表示になっていませんか?
これは前回の記事でもご説明したとおり、ズームの影響を受けているのです。

せっかくなので綺麗な背景画像にしたいですね。
背景画像も前回の記事と同様に480~620pxの画像を横幅240pxに指定して縮小表示させることで綺麗にすることができます。

スマートフォンが対応しているCSS3では、背景画像のサイズ指定をすることができるようになりました。

-webkit-background-size: 横幅(px) 縦幅(px);

これを先ほどのCSSに追加します。その際は2行セットで書くようにしましょう。

-webkit-background-size: 横幅(px) 縦幅(px);
background-size: 横幅(px) 縦幅(px);

2行目は「-webkit-」を取り除いただけの記述ですが、本来の形はこの2行目になります。スマートフォンで適切に読み込むために「-webkit-」を文頭につけてあるのだと認識していただければOKです。
この2行をCSSに追加し、背景画像を480~620pxの画像に差し替えてみましょう。

比較するとこのような感じになります(上が240pxの画像、下が480pxの画像を背景に指定しています)

これで綺麗な背景画像を設定することができました!
背景画像にも綺麗な画像を使用して、更にリッチなスマートフォンコンテンツの作成を行ってくださいね!

( スマートフォンECクラウド型ASP『aiship(アイシップ)』 松井 )

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+