Yahoo!ストアでもフルスクリーン！ヤフーショッピングで商品ページをデザインする方法。

今までは楽天ショップに着目したカスタマイズ方法をご紹介してきましたが、
今回はYahoo!ストアにフォーカスしたカスタマイズ方法をご紹介しようと思います！

1. ヤフーショッピングのデザイン設定について

まずヤフーショッピングで様々なデザインを適用する上で、
欠かせない制約があります。

ヤフーショッピングでは商品ページデザインテンプレートや
サイトデザインテンプレートなどの項目の設定によって
表示されるソースコードに振られるidやclassに多少の変化が発生します。

そのため実際に運営する店舗様によって、少し適用するCSSを変更する必要が出てくるのです。
う～ん、複雑！

ということで、今回フルスクリーンを実演する店舗のデザイン設定はこのようになっております。
以下の画像をご確認ください。

2. CSSを適用して、フルスクリーン化＆不要な要素の削除

それでは、まずは先ほどお見せした当店のデザイン設定では、
商品ページはどのように表示されるかを見てみましょう。
~~出品時のままのデザイン。~~

いかがでしょうか、何のデザインも施していないページでも様々な要素があります。

ページ内コンテンツ

最上部にヤフーショッピングが表示させている検索ボックスや企画などのナビゲーション
続いて店舗にて設定されているヘッダー＆パンクズ
レフトナビ部分に幅220px＋右マージン10px、合計230pxのレフトナビ。
右コンテンツ部分にショッピングカート＆作り込みなどの商品情報を内包するエリアが
960px＋右マージン10pxの合計970pxにて配置されています。
下部には店舗にて設定しているフッター
そして最下部にヤフーショッピングが表示させている「あなたにお勧めの商品」エリア

店舗のデザイン設定にて1200pxを適用しているため、
③と④の幅を合わせることで1200pxになっているというわけですね。

ここからフルスクリーンを実現するためには①・②・③・⑤・⑥の削除
そして④を横幅いっぱいにまで広げる命令をCSSでしてあげれば良いというすんぽうですよ！

ではでは以下のCSSをトリプルにアップロードし
「商品ページ編集画面」の「追加表示情報」タブ内にある「フリースペース1」に以下のCSSを読み込ませてみましょう。

<link rel="stylesheet" href="http://shopping.geocities.jp/店舗URL/***.css">

こんな感じですよ！
CSSの内容は以下をご参照ください！

/*▼▼フルスクリーン化用ハッキングCSS*/

/*最上部  Yahooショッピングデフォルトヘッダー非表示*/
div#wrapper {
 display:none !important;
}

/*ヘッダー  Yahoo店舗設定ヘッダー非表示*/
div#Top {
 display:none !important;
}

/*レフトナビ Yahoo店舗設定レフトナビ非表示*/
div#Left {
 display:none !important;
}

/*フッター Yahoo店舗設定フッター非表示*/
div#Bottom {
 display:none !important;
}

/*最下部  Yahooショッピングからのおすすめ非表示*/
div#wrapper3 {
 display:none !important;
}

/*包括div  商品カート、作り込みエリアを包括しているdivです*/
#wrapper2 #wrap2 #Main {
 width:100% !important;
}

/*包括div  商品カート、作り込みエリアを包括しているdivです*/
#wrapper2 #wrap2 #Main #Container {
 width:100% !important;
}

/*包括div  商品カート、作り込みエリアを包括しているdivです*/
#wrapper2 #wrap2 #Main #Container .Container-inner {
 margin:0 !important;
}

/*包括div  商品ページフリースペース1(アディショナル1）を包括しているdivです*/
#CentItemAdditional1 {
 margin:0 !important;
}

/*▲▲フルスクリーン化用ハッキングCSS*/

CSS内にコメントを入れておりますので
各指定の詳細はそちらをご参照ください！

するとすると、このような形の商品ページが出来上がります。
~~CSSを適用したデザイン。~~
ヘッダーやフッターなど、任意のエリアを残すことも可能です！
対応するCSSの指定を削除してみましょう！

3. カートの表示位置を制御して、商品紹介にフォーカス！

いかがでしょうか？いい感じにフルスクリーンになったのではないでしょうか？
しかしここでぶち当たるのがお買物カゴです。

ヤフーショッピングの方針として、最初に買い物かごを見せることで即購買に直結させる
というようなページ構成がとられています。
商品の詳細が知りたい人はスクロールしてね？ということですかね。

amazonのような仕様とも言えますね！

しかし今回はお買物カゴは下に降りてもらいましょう！
これは商品ごとにCSSの指定を変更する必要があります、
以下の指定を先ほどアップロードしたCSSに追記してみましょう！

/*商品カート  商品カートの表示位置を制御しています。作り込みの高さによって数値を変更してください*/
div#CentItemInfo2 {
 width:1000px;
 position:absolute !important;
 top:***px !important; /*作り込みの高さに合わせてこちらの数値を変更します*/
 left:50% !important;
 margin:0 0 0 -500px !important;
}

top:***px !important; /*作り込みの高さに合わせてこちらの数値を変更します*/
こちらの数値を反映している作り込みの高さによって変更する必要があります、
商品ごとに指定の変更が必要というのはこの部分になりますよ。

するとすると、このような形の商品ページが出来上がります。
~~カート表示位置を調整したデザイン。~~

フルスクリーン商品ページの完成です。
あとは「商品ページ編集画面」の「追加表示情報」タブ内にある「フリースペース1」に
その商品ごとの作り込みを反映すればワイドでダイナミックな商品ページの出来上がりです！

大きな商品画像を使用したり、背景画像を固定したりして店舗独自のプロモーションを展開しましょう！

最後に

いかがでしたでしょうか。
ヤフーは楽天よりもセキュリティやページ構成などの制約がより強いと思われます。
そこをいかにかいくぐり、よりよいユーザビリティを実現できるかが
モール内で多くの店舗と差別化を図れるかの一手だと思います！

拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

ララバイ！！

楽天サイトでフルスクリーン商品ページをつくる！背景画像を使ったデザインの方法。

ショップ運営でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan: 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧