Yahoo!ストアでトリプルを使用する場合、パソコン版ストアトップページ、スマートフォン版ストアトップページ、トリプルでのパソコン版ストアトップページ、トリプルでのスマートフォン版ストアトップページの4つを持つことが可能です。
お客様が迷子にならないようにリダイレクト設定は重要です。
Yahoo!ストアのPCトップぺージとスマホトップページのURL
パソコン版ストアトップページ
https://store.shopping.yahoo.co.jp/ストアアカウント/
スマートフォン版ストアトップページ
https://m.shopping.yahoo.co.jp/store/ストアアカウント/
トリプルで作成したトップページ
https://shopping.geocities.jp/ストアアカウント/
※トリプルで作成したスマホトップページ（PCと別にした場合）＜例＞
https://shopping.geocities.jp/ストアアカウント/m/
ストアクリエイターProで用意されているリダイレクト設定
ストアクリエイターProのトップページ
↓
ツールメニュー
↓
B-Space・トリプル の 「リダイレクト設定」
パソコンリダイレクト設定
https:// store.shopping.yahoo.co.jp/ストアアカウント/
↓
https:// shopping.geocities.jp/ストアアカウント/
スマートフォンリダイレクト設定
https:// m.shopping.yahoo.co.jp/store/ストアアカウント/
↓
https:// shopping.geocities.jp/ストアアカウント/
※共にトリプルで作成したトップページにリダイレクトします。
トリプルで作ったページがレスポンシブでパソコン、スマホ共通であれば問題ないのですがパソコン、スマホぺージを別に作成した場合ストアクリエイターProで用意されているリダイレクト設定ではトリプルのスマホページには行けません。
スマートフォン版リダイレクト
これは上記のリダイレクト設定でスマホユーザーがパソコントップページに行ったとき、トリプルで作ったスマホページに誘導する方法です。
いろいろな方法がありますがヤフーがマニュアルで推奨しているのが下記の方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> // iPhoneまたは、Androidの場合は振り分けを判断 if (document.referrer.indexOf('https://shopping.geocities.jp/ストアアカウント/') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { if(confirm('このサイトにはスマートフォン用のサイトがあります。\n表示しますか？')) //Pathに関しては任意 { location.href = 'https://shopping.geocities.jp/ストアアカウント/smartphone/'; } } </script> |
ストアアカウントは自分のものに変更、下から4行目のhttps://shopping.geocities.jp/ストアアカウント/smartphone/はスマートフォン用トップページ「index.html」ファイルを置いたフォルダに変更します。
※「m」ならhttps://shopping.geocities.jp/ストアアカウント/m/
そして「お買い物ガイド」や「会社概要」を下記で表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style type="text/css"> .storeUnit { border-top: 1px solid #CCCCCC; padding-bottom: 10px; } .elLinkList a { color: #044493; text-decoration: none; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAANBAMAAAC9V5gpAAAAA3NCSVQICAjb4U%2FgAAAAKlBMVEX%2F%2F%2F%2Fn5%2Bfj4%2BPf39%2FS0tLOzs6ampqOjo6KioqGhoaCgoJ9fX15eXl1dXXwPRc5AAAACXBIWXMAAArwAAAK8AFCrDSYAAAAFnRFWHRDcmVhdGlvbiBUaW1lADA4LzA5LzEwSSHXzAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAA9SURBVAiZY2AtZoAC99MGUBbb3sMwwZzbCMHNMMHsGzBBzrMFUFbWLQOYusXoetnOHoIKeZ8RgLJYYaYBAFNJEKzgqZsZAAAAAElFTkSuQmCC") no-repeat scroll right 50% transparent; display: block; font-size: 16px; font-weight: bold; padding: 8px 26px 8px 8px; border-bottom: 1px solid #CCCCCC; } </style> <div class="storeUnit decLine decShadow"> <div class="elLinkList"><a href="https://order.shopping.yahoo.co.jp/cgi-bin/cart-list">カートを見る</a></div> <div class="elLinkList"><a href="https://store.shopping.yahoo.co.jp/ストアアカウント/info.html">会社概要</a></div> <div class="elLinkList"><a href="https://store.shopping.yahoo.co.jp/ストアアカウント/guide.html">お買い物ガイド</a></div> <div class="elLinkList"><a href="https://order.store.yahoo.co.jp/cgi-bin/hdr/feedback?catalog=ストアアカウント">お問い合わせ</a></div> <div class="elLinkList"><a href="https://snlc.shopping.yahoo.co.jp/ストアアカウント/edit">ストアニュースレター</a></div> <div class="elLinkList"><a href="https://store.shopping.yahoo.co.jp/ストアアカウント/privacypolicy.html">プライバシーポリシー</a></div> </div> |
最後に書かれているのが
SEOの観点ではリダイレクトを繰り返すとスコアが下がるとされていますので、JavaScriptによるリダイレクトよりこちらのレスポンシブウェブデザインの手法がお勧めです。
出来ればトリプルのページはレスポンシブウェブデザインが望ましいということです。
コメント