この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
このページではYahoo!ストアクリエイターでヘッダーとフッターの幅を100%に簡単に設定する方法を紹介します。
通常だと管理画面から固定幅でしか設定できませんがフリースペースのソースを入れることで全画面のデザインを反映することも可能です。
くらパパ
今まではCSSでわざわざ読み込ませていましたけどもうそんなことしなくていいんです！
最後には合わせてCSSで読み込ませる場合のCSSの記述も紹介しておきますのでCSSで全画面にしたいかたはそちらをどうぞ。
ヘッダーの横幅を100％にする方法
ヘッダーの編集箇所はストアデザイン＞ヘッダー・看板＞ヘッダー共通設定にフリースペースを設定して（↓）ソースを適宜入れれば横幅100%にすることができます。
HTML
</div>
</div>
</div>
===================================
ヘッダーのソースを記入
===================================
<div id="wrap2">
<div id="Top">
<div id="TopStoreBanner3">フッターの横幅を100％にする方法
フッターの編集箇所はストアデザイン＞フッター＞フッター共通設定にフリースペースを設定してこのソースを適宜入れれば横幅100%にすることができます。
HTML
</div>
</div>
</div>
===================================
フッターのソースを記入
===================================
<div id="wrap2">
<div id="Bottom">
<div id="BtmFreeSpace1">CSSでヘッダー・フッターを全画面にする方法
CSSでヘッダー・フッターを全画面にする際は（↓）CSSをヘッダーのフリースペースに読み込ませることができます。
注意
※ただしCSSを読み込ませる場合はYahooトリプルと契約してCSSファイルを事前にアップロードする必要があります。
また(↓)のCSSの場合、例として中の要素の横幅を1000pxにしていますが適宜変更してください。
CSS
/*ここが管理画面のストアデザインの全体の設定のページ幅と共通なので強制的に100%に変更*/
#wrapper2 #wrap2{ width: 100%; padd\ing:0;
}
/*全体を100%にしたので全体の設定のページ幅を指定して中央寄せ*/
#wrap2 #Main{ width: 1000px; margin: 10px auto 0;
}
#TopSPathList1{ width: 1000px; margin:10px auto 0;
}
/*ヘッダーの上部の10pxあるのが原因で管理画面で設定した背景が見切れるのでmarginを0に変更*/
#Top #TopFreeSpace1{ margin:0; }以上がYahoo!ストアクリエイターのヘッダー・フッターの横幅を100%にする方法となります。
くらパパ
Yahooストアクリエイターは楽天と違う意味で癖がありますよね。コメントアウトは1行じゃないとダメとか・・・。
通常のコーディングとは異なってYahooショッピング独特の仕様があるのでテクニックとしてこういったことを覚えておくとYahooショッピングの構築の工数がグンと楽になりますよ。
あわせて読みたい
[text_tit_link id=”8874″]
コメント失礼します。
こちらの方法は、新デザインとなった現在のYahooショッピングでも適用されますか？