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

よろしければこちらもご覧ください
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

前回の記事までに、スマートフォン用の画像サイズについてご案内してきました。
「aishipでは240pxの画面をズームして320pxに拡大表示しているため、240pxちょうどの画像だと少しボケる」ということでした。綺麗な画像をスマートフォンで表示させるためには480~620pxの画像を横幅240px指定にして表示させるのがベストです。

ではこのズームをやめてしまうことは出来るのか?
可能です。

aishipの管理画面には、viewportの設定を読み込むメニューを用意しています。
viewportについては下記の記事が参考になりますよ。
携帯サイトのスマートフォン対応のポイント! ~スマートフォン表示で最適サイズを設定する「viewport」~

このviewport、初期設定では下記のようになっています。
画像を見る

これを下記のように変更していただくことでスマートフォンにぴったりなサイズにすることができます。
画像を見る

あとは画像をページに貼り付ける時にCSSやHTML内の記述で画像の横幅を指定してあげてください。これでズームされない画像をページに貼り付けることが出来ます。

[HTML]<img src="画像のURL" style="width:320;" />

または

[HTML]<img src="画像のURL" class="w-320" />
[CSS] .w-320 { width: 320px;}

スマートフォンの横幅は320pxが主流になっています。
タイトル画像やロゴを作成する時、デザインをする時にも320pxで作成することも多いと思います。上記の手順を踏んでいただくことで、デザイン画像そのままの画像をページに設置することができます。お試し下さいね!

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

=============================
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン&モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/1550
=============================

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

検索エンジン
Yahoo!(ヤフー)やGoogle(グーグル)に代表される、インターネット上の ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]