navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボスマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(6)~2011.08.262014.11.04スマートフォンHOME技術スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(6)~前回・前々回の記事ではサイト上で「スマートフォンらしい動き」を実現するためのお話をさせていただきました。今回も引き続きスマートフォンらしい動きを実現するために「表示コンテンツの切り替え」についてお話させていただきます。皆さんはスマートフォンでサイトを閲覧している時、こんな感じのコンテンツを見かけたことはありませんか?メニューをタッチすると、その下にあるコンテンツが選択メニューの内容にパッと切り替わるというものです。「表示コンテンツの切り替え」と暫定的に呼びますが、aishipではこの表示コンテンツの切り替えも比較的容易に行えるようになっています。表示コンテンツの切り替えは、あらかじめ指定された構成があります。これを元に内容を作成し、またCSSを使ってレイアウトを調整しましょう。表示コンテンツの切り替えは、下記のようなHTML構成になっています。id="c">コンテンツC</div></div>ポイントは下記の点です。ここでは簡易的に「a、b、c」と記述していますが、ここでメニュー(タッチする部分)と表示コンテンツ(表示が切り替わる部分)とを紐付けしています。「メニューCをタッチするとコンテンツCが表示される」という動きをします。紐付けは「id=”○○○”」というid名で行っています。このid名は任意の英数字でかまいません。上記例では「a、b、c」としています。この「id=”○○○”」と「data-sp-switch-display-targetid=”○○○”」とが一致した時に、表示コンテンツの切替が行われます。class=”sp-switch-display”」というdivタグの中に収めるようにしてください。この中に収めておかないと、うまく表示の切替が行われません。ポイントとしては・対応するメニュー名とコンテンツ名(id名)を一致すること・表示コンテンツ部分は指定のdivタグの中に収めること以上の2点です。「表示コンテンツの切り替え」を作るため、実際に操作してみましょう。操作ステップは以下の通りです。上記のソースをコピーするHTMLを編集できるソフトやテキストエディタなどに上記のHTMLフォーマットをコピー&ペーストしましょう。今回は「id=”c”」に関する記述は削除しています。切替表示コンテンツのHTMLを作成する表示されるメニューを2種類、それぞれ作成します。内容はお任せしますが、上記のGIFアニメで使われているようなレイアウトを簡単に作ってみました。切替表示コンテンツのHTMLをSTEP1のソースに入れる2で作成したHTMLを、それぞれid名のついたHTMLソース内に入れてみましょう。タッチするメニューのテキストを変えるそしてタッチするテキスト(現在はA・Bと記載されています)を変更しましょう。以上で大まかな部分は完成です。あとは完成したHTMLソースを携帯サイト作成画面に挿入して保存しましょう。非常にシンプルなレイアウトになっていると思います。あとはCSSで調整をしながら、イメージを整えていきましょう。今回STEP2ではtableタグを使ってメニュー一覧を表現していますが以前の記事でご紹介したようにリンクをボタンにして表現することも可能です。過去の記事もご覧いただきながら、様々なレイアウトに挑戦してみてくださいね!”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。2011.09.16現在までスマートフォンらしいレイアウトの作成についていくつかご紹介してきました。今回は画像についてご案内致します。2013.09.26こんにちは、ロックウェーブの岡本です。Googleから「SEOを気にせず、コンテンツに集中できるツールである」と評価されているWordPress。2014.02.07こんにちは。ECプロデュース部の岡本です。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。サイト内検索スマートフォンカテゴリの最新記事2019.02.01スマホからの売上UP!後払い決済を導入すべき理由とは2018.09.14ECサイトには必須?Google提唱のマイクロモーメントの意味と対策2018.06.06インスタグラムからECサイトで直接購入可能に!ショッピング機能「ShopNow」が日本解禁。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。