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

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

以前の記事でご案内させていただいていた、ページをスクロールしても買い物カゴに入れるボタンがずっとついてくる機能につきまして、今月から新機能が追加されました!

【変わったこと】
今までの機能では、ボタンの位置は上部に固定されていました。
新機能では画面の下部に固定することができるようになっています!

比較してみると、こんな感じです。

画像を見る

上にするか下にするかは、商品購入ページの作り方や見やすさ、使いやすさ、ショップ様のお好みにあわせてチョイスしていただければと思います。

【使い方】
上に固定する時の設定方法とほとんど同じです。
機能カードをページに設置した後、aiship指定のdivタグで囲んで保存するだけでOK! 比較的カンタンな手順でした。

画像を見る

画像を見る

上にする時のclass名は「sp-fixed-top」でしたが、下に固定する場合はclass名を下記のものにするだけ!

画像を見る

CSS .sp-fixed-bottom

class名追加後はデザイン画面に戻して、ページを保存します。これでボタンは画面下部に固定され、スクロールするたびに画面下部にくっついてきてくれます。

上部固定の時と同様に、このclass名をHTMLに追加するのみではボタンのデザインまでは変わりません。過去の記事をご参照いただきながら、お好みのボタンになるようCSSでデザインを調整してくださいね!

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

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

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

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

XMLサイトマップ
検索エンジンに対して、サイト内にあるページをリストアップして伝えるファイル。XM ...→用語集へ

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

インフォメーション

RSSフィード


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