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

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

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

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

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

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

過去「スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎~」というタイトルで、スマートフォンらしいレイアウトを作成するためのご案内を3回配信してきました。全て静的な、見た目を変えるためのご案内でしたが、今回はいよいよ動的な「折りたたみコンテンツ」の作成方法についてご案内致します。


折りたたみコンテンツと言えば、スマートフォンでも比較的よく見られる形式のレイアウトです。ページが縦に長くなる場合、見出しだけをあらかじめ表示しておいて、その見出し部分をクリック(タッチ)することで、隠されていたコンテンツを表示する、というものです。aishipではこういった動きのあるコンテンツも作成することができます。

動的、と言っても独自にプログラムやjavascriptなどを記述する必要はありません。aishipにはあらかじめスマートフォン向けCSSが用意されているように、折りたたみコンテンツを作成するためのスマートフォン向けjavascriptも準備されています。
ですので折りたたみコンテンツを作成するために必要な操作も、やはり過去3回の記事と同様に「HTML内にclass名を指定するだけ」なのです。
それでは実際に操作を行っていきましょう。

操作手順
まず事前に作成をしておきたい内容として
○見出し部分(タッチさせる部分)
○コンテンツ部分(通常折りたたまれて隠れている部分)

の2つが必要になります。

この準備が整ったら、さっそく見出し部分にclass指定をしましょう。
見出しに指定するclass名は【sp-toggle】です。

さて、この【sp-toggle】の使い方ですが、
「sp-toggle」が指定された部分をタッチすると
そのすぐ下にある部分が開閉する
という動きになります。


です。

つまり開閉させたい部分についてはここからここまでが開閉する領域である、ということを指示しておかないといけません。
手っ取り早い方法としては、開閉させる領域をdivタグで囲んでおくことです。そうすると<div>~</div>で囲まれた部分が、見出しをタッチすることで開閉されるようになります。

開閉するコンテンツ部分へのclass指定は必須ではありません。レイアウトの調整が必要であれば指定してあげるといいでしょう。また、開閉させたい部分が全て1つのtableなどに収まって作成されている場合は、改めてdivタグで囲まなくても問題ありません。
また開閉するのは「sp-toggle」の「すぐ下にある部分」なので、見だし部分とコンテンツ部分との間に改行タグなどは入れてはいけません。

ここまででHTMLの準備は完了です。
続いてCSSですが、aiship管理画面内の「デフォルトCSS」内に

.sp-toggle + * {    display: none;}

という記述があることを確認して下さい。この記述が開閉のポイントです。
(もしも無ければ「ユーザーCSS」内へ追加してください)

「sp-toggle」の指定や開閉させる範囲の指定が出来たら、折りたたみコンテンツは完成です。あとは実際にスマートフォンでアクセスし、折りたたみの動作がするかどうかを確認して下さい。

まとめ
いかがでしたか? aishipではあらかじめ作成されたclass名を指定することで、動きのあるスマートフォン向けレイアウトもすぐに作成することができます。
ポイントとして、見出し部分は実際にタッチされる部分になるので、タッチできることを視覚的に伝えられるようなデザインにすることも忘れてはいけません。前回の記事を参考いただき、背景の装飾やテキストの装飾でボタンらしいレイアウトにしてみましょう!

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+