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

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

Yahooショッピングに出店されている方向けの記事です。

Yahooショッピングのヘッダーを画面幅いっぱいにする方法があったんですが、仕様が変わってこれまでの方法が使えなくなりました。(※フッターを画面幅いっぱいにする方法も後述しています)

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

Advertisement

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

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

#wrap2を100%にする

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

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

という理屈です。

#Mainの幅を指定する

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

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

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

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

ヘッダーでCSSを読み込む

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

フッターを画面幅いっぱいにする方法

フッターを画面幅いっぱいにする方法ですが、これまで説明した『ヘッダーを画面幅いっぱいにする方法』を実践してください。

前述したCSSファイルを読み込むとフッターも付随して幅100%になります。

あとはショップデザインに合わせて幅100%にするも良し、あえて固定幅にするも良しです。

最後に

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

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

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

関連:カスタムページを100%にする方法はYahooショッピングのカスタムページを画面幅いっぱいの100%表示にする方法で紹介しています。