デフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。

デフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。

今回はヤフーストアにデフォルトで挿入される、ヘッダーの各要素をあえて一部非表示にして、店舗独自のデザインを実現する方法をご紹介します。プロモーションなどでゴチャゴチャしがちなヤフーのデフォルトヘッダーを、一部のページについてだけスッキリさせようという内容になっております!

最終的には以下のように、ヘッダーのスッキリした商品ページが実現できますよ!
ヘッダー販促エリアを非表示にした商品ページ

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです

ぜぇれさん厨二病なんですが、最近ふと「昔大富豪よくしたな」と思いだし、トランプをググったわけなんですよ。
そしたらオシャレなトランプがいっぱいあって欲しいなぁ、欲しいなぁと思いましたが我慢しました。
漆黒のトランプとかヴィンテージ加工されたトランプとか木製のトランプとかあって欲しいなぁ、欲しいなぁと思いましたが我慢しました。

さて!以下三つの手順で、ヤフーのデフォルトヘッダーを一部非表示にする方法をご紹介していきます。

また今回サンプルとして作成している店舗のデザイン設定は以下のようになっています。

※一言
ヤフートリプル(月額3000円~)と契約している必要があります。

それではやってみましょう。

1. ヘッダーに挿入される要素の確認。


まずは、ヤフーショッピングのヘッダーはどのようになっているのかを確認してみましょう。
デフォルトの商品ページ

このような形で検索エリアやプロモーション情報など様々な要素が表示されています。
そしてこのヘッダーを細分化すると、以下のように分けることができます。

もちろん基本的にはすべて必要な要素ですが、一部ページで再現したいデザインがある場合や、店舗によっては代替要素をすでにストア内に用意していることもあるかと思います。

そういった場合、個別に要素の表示・非表示をCSSで実現することができます。

2. CSSを適用して必要な要素だけを残す。


では画像で番号を振り分けた各要素への、CSS記述内容をご紹介していきます!

/* 1.を非表示に、合わせて2.も非表示を推奨 */
div#h_promo {
 display:none !important;
}
/* 2.を非表示に */
div#status {
 display:none !important;
}
/* 3.を非表示に */
div#msthd {
 display:none !important;
}
/* 4.を非表示に */
.mdSearchBoxB {
 display:none !important;
}
/* 5.を非表示に、合わせて6.も非表示を推奨 */
div#bclst {
 display:none !important;
}
/* 6.を非表示に */
.mdExternalLink {
 display:none !important;
}
/* 7.を非表示に */
div#strh {
 display:none !important;
}
/* 8.を非表示に */
div#prhead {
 display:none !important;
}
①~⑧を一括指定
/* デフォルトのヘッダーを非表示に */
div#wrapper {
 display:block !important;
}

というわけでビャビャッ!とご紹介しました。

これらを適用することで個別に表示・非表示を切り替えられます。
店舗ごとに必要に応じてカスタマイズすることができますね!

ただし全ストア共通で表示されている部分を非表示にすることは、場合によってはユーザビリティを損なう場合があります。強く印象に残したい場合など限られたページで、本当に必要な場面においてのみ使用するようにしたいですね!

3. 実際に商品ページに反映してみる。


ということで各項目の表示・非表示をCSSで設定して、実際に反映してみましょう。

今回は要素④と⑧を残した商品ページを作ってみます。
その場合、以下のようなCSSを適用します。

/* デフォルトのヘッダーを一部非表示に */
div#h_promo, div#status,
div#msthd, div#bclst,
.mdExternalLink, div#strh {
 display:none !important;
}

無事、④・⑧エリアのみ残した表示となっています。
ヘッダー要素を一部非表示にした商品ページ

最後に。

いかがでしたでしょうか。今回はヤフーストアのデフォルトヘッダーを一部非表示にする方法をご紹介しました。
機会があればまたフッターやカート部分などでのデザイン方法もご紹介していきたいと思います。

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

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

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly

6 Comments(Trackback)

kamiayashi

いつも参考にさせていただいております。
スタイルシートを使って不要なメニューバーを削除したいのですが、
cssの記述先を教えていただけないでしょうか。

ストアデザイン内のHTML可となっているヘッダー・看板や、フリーエリアに~と入力しても
“”が文字コードに勝手に変換されてしまうのと、
トリプルのサーバ内に置いた外部cssを読み込んでも、まったく反映されません。※ソースもview-souceという文字が勝手に入ったりします。。

Reply
kamiayashi

ごめんなさい、出来ました^^;

テンプレート修正後の反映と、トリプルの反映が
最近物凄く遅くて参ってしまいますね。。
バナーを載せるのに半日待つことも増えてきました。

Reply
ぜぇれさん

kamiayashiさん
コメントありがとうございます!
反映で来たようでよかったです!

とくにトリプルの反映速度を改善してほしいですよね…
CSSを適宜修正しようにもいちいち時間をおいてしまって…(あれ?何してたっけ…?)
って状況が結構多発して参ります…w

Reply
ぜんたろん

初めまして。いつも参考にさせてもらっております。サーバーにもcssをアップロードしたのですが、一向に反映されません。フリースペースにリンクを貼りましたがなにも変化が見られず一週間以上がたっています。なにか解決方法は」ありますでしょうか?

Reply
ぜぇれさん

ぜんたろんさんこんにちは!
コメントありがとうございます。

楽天でしょうか?ヤフーでしょうか?
CSSを読み込ませた状態で、反映がされていないページのURLを教えていただけますか?

Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です