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

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

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

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

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

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

そういった場合、個別に要素の表示・非表示を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;
}

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

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

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

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

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

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

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

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

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

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

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

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

06-6271-7761

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