Yahooストアクリエイターにてヘッダーを画面幅いっぱいにする方法

Yahooストアクリエイターにてヘッダーを画面幅いっぱいにする方法

今回はYahooに出店されている方向けの記事です。

Yahooのヘッダーを画面幅いっぱいにする方法があったんですが、Yahooの仕様が変わってこれまでの方法が使えなくなりました

それでは今の仕様にあった方法を紹介します。

ヘッダーを画面幅いっぱいにする方法

cssファイルを作成し、ヘッダーを画面幅いっぱいにする記述をしていきます。

#wrap2を100%にする

まずはヘッダーの親要素である#wrap2の幅を100%にします。

親要素の#wrap2を幅100%にすることで、その子要素であるヘッダー部分も100%にすることができる。

という理屈です。

#Mainの幅を指定する

ヘッダーを画面幅いっぱいにしたはいいですが、親要素の#wrap2を幅100%にしたことで小要素である#Main(レフトナビとコンテンツを含んだ部分)の幅も100%になってしまいました。

このままではレフトナビとコンテンツがそれぞれ左右の端に引っ張られてダサいです

ですので#Mainの幅を指定してやります。

おまけにパンくずリストも修正しておきましょう!

ヘッダーでcssを読み込む

ストアクリエイターProのヘッダーにcssファイルをlinkタグで読み込ませます。

最後に

Yahooの仕様が変わるのは突然です。

突然の仕様変更にも柔軟に対応して、ショップのデザインをキープしていきましょう!

それでは今回はこのへんで。

以上!

 

 

EC関連カテゴリの最新記事