Yahooショッピングに出店されている方向けの記事です。
Yahooショッピングのヘッダーを画面幅いっぱいにする方法があったんですが、仕様が変わってこれまでの方法が使えなくなりました。（※フッターを画面幅いっぱいにする方法も後述しています）
それでは今の仕様にあった方法を紹介します。
ヘッダーを画面幅いっぱいにする方法
cssファイルを作成し、ヘッダーを画面幅いっぱいにする記述をしていきます。
#wrap2を100%にする
まずはヘッダーの親要素である#wrap2の幅を100%にします。
親要素の#wrap2を幅100%にすることで、その子要素であるヘッダー部分も100%にすることができる。
という理屈です。
#Mainの幅を指定する
ヘッダーを画面幅いっぱいにしたはいいですが、親要素の#wrap2を幅100%にしたことで小要素である#Main（レフトナビとコンテンツを含んだ部分）の幅も100%になってしまいました。
このままではレフトナビとコンテンツがそれぞれ左右の端に引っ張られてダサいです。
ですので#Mainの幅を指定してやります。
おまけにパンくずリストも修正しておきましょう！
ヘッダーでCSSを読み込む
ストアクリエイターProのヘッダーにCSSファイルをlinkタグで読み込ませます。
フッターを画面幅いっぱいにする方法
フッターを画面幅いっぱいにする方法ですが、これまで説明した『ヘッダーを画面幅いっぱいにする方法』を実践してください。
前述したCSSファイルを読み込むとフッターも付随して幅100%になります。
あとはショップデザインに合わせて幅100％にするも良し、あえて固定幅にするも良しです。
さいごに
Yahooの仕様が変わるのは突然です。
突然の仕様変更にも柔軟に対応して、ショップのデザインをキープしていきましょう！
コメント
いつも参考にさせて頂いております。
フッターは100％表示ができるのに、ヘッダーができず困り果てていたところ、こちらのページを見つけ、大変嬉しく思いました。
さっそく実践してみたところ・・・
ならなかったです・・・。
また仕様変更になったのでしょうか？
それとも私のやり方がまずい・・・？
上のCSSファイルを作成し、ヘッダーのフリースペースに
で問題ないのでしょうか？
よろしくお願いいたします。
あ さん、いつも当ブログを読んでいただきありがとうございます！
ご質問いただいた件についてですが、僕が仕事させてもらってるショップでは変わらず100％表示されていることと、HTMLが変わっていないことから仕様は変わっていないと思います。
CSSファイルにつきましては、aタグではなくlinkタグでヘッダーのフリースペースに読み込ませてみてください。
不明点やご質問がありましたらお気軽にコメント下さい。
どうぞよろしくお願いします。
ご返信ありがとうございます。
なにゆえCSS・HTML初心者なもので大変申し訳ございません。
現在作成している店舗の幅は950pxです。
ヘッダー部分のみを100％表示したいのですが、うまくいかず悪戦苦闘しております。
※ちなみにフッターは上手にできました。
●作成したCSS
#wrap2 {
width: 100% !important;
padding: 0 !important;
}
#Main {
width: 950px !important;
margin: 0 auto !important;
}
#TopSPathList1 {
width: 950px !important;
margin: 10px auto 0 !important;
↑こちらをFFFTPを使用し、トリプルにアップしました。
(アップロード結果は成功となっております。)
●現在のヘッダーhtml
こちらに
を追記でよろしいのでしょうか？
面倒な質問で大変申し訳ございません。
よろしくお願い申し上げます。
※ちなみに、ページの全てはストアクリエイターで作成しております。
(トップページもストアクリエイターで作っています。)
スライドバナーなど一部でトリプルを使用しておりますが、こちらは問題なく作動しております。
あ さん、こんにちは！
こちらこそ説明がわかりにくく申し訳ないです。
CSSを拝見しましたところ、CSSについては問題ございません。
あとは仰る通り、（div style=”background-color:#ffffff;text-align:center”）の直前にでもlink～を記述していただければOKです。
※トリプルにあるCSSファイルの場所を間違えないように読み込んでください。
それでは、不明点やご質問がありましたらお気軽にコメント下さい。
どうぞよろしくお願いします。
ご丁寧に対応いただき、誠にありがとうございます。
何度か試してみたのですが、画面いっぱいに表示したいヘッダーの始まりが、メインコンテンツの始まりと一緒になってしまい、右側に飛び出たような格好悪い仕上がりになってしまいます・・・。
（画像が中央揃えにならない。HTMLで指定しても駄目。）
【 画面いっぱいにしたいヘッダー 】
【 メインコンテンツ 】
↑わかりにくいかもしれませんがこのような感じです。
この場合考えられる原因はどのようなものでしょうか。
ちなみにHTMLは基本的な画像表示くらいしかつかっておりません。
あと別件ですが、お問い合わせよりご連絡させていただきました。
ご対応頂ければ幸いです。よろしくお願い申し上げます。
あ さん、こんにちは！
『メインコンテンツは正しく950pxで中央揃えになっているが、ヘッダーが右にはみ出している』という認識でいいでしょうか？
実際に見たわけではないので具体的な原因はわかりませんが、ヘッダー部のHTMLかCSSに不備がある可能性が考えられます。
例えば、
・HTMLの閉じタグがない
・余分なHTMLの閉じタグがある
・予期しないCSSが効いている
・意図したCSSが効いていない
など。
ブラウザの開発者ツール（ページを開いた状態でF12キーを押すと起動します）でHTMLが正しいかCSSが効いているか確認してください。
また、確実ではないですがショップ情報の記述がないHTMLソースで構いませんのでお問い合わせで送っていただければ確認します。
どうぞよろしくお願いします。
ざきひー様
お世話になっております。
おかげ様で希望通りのヘッダーを作ることができました。
ありがとうございました。
原因は、スライドバナーを入れているのですが、そのCSSの兼ね合いでうまく反映されていなかったようで、いったん全て削除してやり直したところうまくいきました！
本当にありがとうございます。
理想のショップにまた一歩近づきました。
また、無理なお願いを多数聞いていただき、ありがとうございました。
お手間をとらせてしまい、申し訳ございません。
この度は本当にありがとうございました。
あ さん、こんにちは！
無事できて良かったです！
コメントしていただいて気づきもありましたのでこちらこそ感謝です。
ありがとうございます。