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

ロックウェーブ

2012年5月28日 10:03

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。 また、編集部はこの内容について正確性を保証できません。
以前の記事でご案内させていただいていた、ページをスクロールしても買い物カゴに入れるボタンがずっとついてくる機能につきまして、今月から新機能が追加されました!【変わったこと】今までの機能では、ボタンの位置は上部に固定されていました。 新機能では画面の下部に固定することができるようになっています! 比較してみると、こんな感じです。画像を見る上にするか下にするかは、商品購入ページの作り方や見やすさ、使いやすさ、ショップ様のお好みにあわせてチョイスしていただければと思います。【使い方】上に固定する時の設定方法とほとんど同じです。 機能カードをページに設置した後、aiship指定のdivタグで囲んで保存するだけでOK! 比較的カンタンな手順でした。画像を見る画像を見る上にする時のclass名は「sp-fixed-top」でしたが、下に固定する場合はclass名を下記のものにするだけ!画像を見るCSS .sp-fixed-bottomclass名追加後はデザイン画面に戻して、ページを保存します。これでボタンは画面下部に固定され、スクロールするたびに画面下部にくっついてきてくれます。 上部固定の時と同様に、このclass名をHTMLに追加するのみではボタンのデザインまでは変わりません。過去の記事をご参照いただきながら、お好みのボタンになるようCSSでデザインを調整してくださいね! ( スマートフォンECクラウド型ASP『aiship(アイシップ)』 松井 ) ============================= 掲載元のブログではわかりやすい画像つきで公開しています。 ■aishipスマートフォン&モバイルEC事例・ノウハウ集http://www.aiship.jp/knowhow/archives/1960=============================

人気記事トップ10

人気記事ランキングをもっと見る