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

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

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

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

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

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

前回・前々回の記事ではサイト上で「スマートフォンらしい動き」を実現するためのお話をさせていただきました。今回も引き続きスマートフォンらしい動きを実現するために「表示コンテンツの切り替え」についてお話させていただきます。


皆さんはスマートフォンでサイトを閲覧している時、こんな感じのコンテンツを見かけたことはありませんか?

メニューをタッチすると、その下にあるコンテンツが選択メニューの内容にパッと切り替わるというものです。「表示コンテンツの切り替え」と暫定的に呼びますが、aishipではこの表示コンテンツの切り替えも比較的容易に行えるようになっています。

表示コンテンツの切り替えは、あらかじめ指定された構成があります。これを元に内容を作成し、またCSSを使ってレイアウトを調整しましょう。

表示コンテンツの切り替えは、下記のようなHTML構成になっています。

<span class="sp-switch-display-click" data-sp-switch-display-targetid="a">A</span>
<span class="sp-switch-display-click" data-sp-switch-display-targetid="b">B</span>
<span class="sp-switch-display-click" data-sp-switch-display-targetid="c">C</span>
<div class="sp-switch-display">
    <div id="a">コンテンツA</div>
    <div id="b">コンテンツB</div>
    <div id="c">コンテンツC</div>
</div>

ポイントは下記の点です。

ここでは簡易的に「a、b、c」と記述していますが、ここでメニュー(タッチする部分)と表示コンテンツ(表示が切り替わる部分)とを紐付けしています。
つまり上の図で言えば
「メニューAをタッチするとコンテンツAが表示される」
「メニューBをタッチするとコンテンツBが表示される」
「メニューCをタッチするとコンテンツCが表示される」
という動きをします。
紐付けは「id=”○○○”」というid名で行っています。このid名は任意の英数字でかまいません。上記例では「a、b、c」としています。
この「id=”○○○”」と「data-sp-switch-display-targetid=”○○○”」とが一致した時に、表示コンテンツの切替が行われます。

切替表示されるコンテンツは「div class=”sp-switch-display”」というdivタグの中に収めるようにしてください。この中に収めておかないと、うまく表示の切替が行われません。

ポイントとしては
・対応するメニュー名とコンテンツ名(id名)を一致すること
・表示コンテンツ部分は指定のdivタグの中に収めること

以上の2点です。
では「表示コンテンツの切り替え」を作るため、実際に操作してみましょう。操作ステップは以下の通りです。
STEP1. 上記のソースをコピーする
STEP2. 切替表示コンテンツのHTMLを作成する
STEP3. 切替表示コンテンツのHTMLをSTEP1のソースに入れる
STEP4. タッチするメニューのテキストを変える

STEP1. 上記のソースをコピーする
HTMLを編集できるソフトやテキストエディタなどに上記のHTMLフォーマットをコピー&ペーストしましょう。今回は「id=”c”」に関する記述は削除しています。

STEP2. 切替表示コンテンツのHTMLを作成する
表示されるメニューを2種類、それぞれ作成します。内容はお任せしますが、上記のGIFアニメで使われているようなレイアウトを簡単に作ってみました。


STEP3. 切替表示コンテンツのHTMLをSTEP1のソースに入れる
2で作成したHTMLを、それぞれid名のついたHTMLソース内に入れてみましょう。

STEP4. タッチするメニューのテキストを変える
そしてタッチするテキスト(現在はA・Bと記載されています)を変更しましょう。

以上で大まかな部分は完成です。
あとは完成したHTMLソースを携帯サイト作成画面に挿入して保存しましょう。恐らく非常にシンプルなレイアウトになっていると思います。あとはCSSで調整をしながら、イメージを整えていきましょう。

まとめ:
いかがでしたか? 今回STEP2ではtableタグを使ってメニュー一覧を表現していますが以前の記事でご紹介したようにリンクをボタンにして表現することも可能です。過去の記事もご覧いただきながら、様々なレイアウトに挑戦してみてくださいね!

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