[C]Yahoo!ストアクリエイターのヘッダー・フッターの横幅を100%にする方法

ABOUTこの記事をかいた人

大阪生まれ大阪育ちの生粋な関西人。30代でフロントエンジニアやってます。WEB系やサッカー・ゲームの話題・美味しくて安い居酒屋やハシゴ酒が大好き。気軽にフォローをポチッと押してね♪

Yahoo!ストアクリエイターでヘッダーとフッターの幅を100%に簡単に設定する方法を紹介します。

これを見つけるまではCSSでわざわざ読み込ませていましたけどそんなことしなくてもいいんですねw

最後には合わせてCSSで読み込ませる場合のCSSの記述も紹介しておきますので良かったら使ってやってください。

スポンサードリンク

ヘッダーの横幅を100%にする方法

ヘッダーの編集箇所はストアデザイン>ヘッダー・看板>ヘッダー共通設定にフリースペースを設定して(↓)ソースを適宜入れれば横幅100%にすることができます。

</div>
</div>
</div>
 
===================================
 
ヘッダーのソースを記入
 
===================================
 
<div id="wrap2">
<div id="Top">
<div id="TopStoreBanner3">

フッターの横幅を100%にする方法

フッターの編集箇所はストアデザイン>フッター>フッター共通設定にフリースペースを設定してこのソースを適宜入れれば横幅100%にすることができます。

</div>
</div>
</div>
 
===================================
 
フッターのソースを記入
 
===================================
 
<div id="wrap2">
<div id="Bottom">
<div id="BtmFreeSpace1">

CSSでヘッダー・フッターを全画面にする方法

またCSSでヘッダー・フッターを全画面にする際は(↓)CSSをヘッダーのフリースペースに読み込ませることができます。

※ただしCSSを読み込ませる場合はYahooトリプルと契約してCSSファイルを事前にアップロードする必要があります。

また(↓)のCSSの場合、例として横幅を1000pxにしていますが適宜変更してください。

/*ここが管理画面のストアデザインの全体の設定のページ幅と共通なので強制的に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ストアクリエイターは楽天と違う意味で癖がありますよね。

通常のコーディングとは異なってテクニックとしてこういったことを覚えておくとYahooショッピングの構築の工数が楽になりますよ。
ぜひ参考にしてみてくださいね。








FIFA19完全攻略ガイド


FIFA19に関するさまざまな情報を日々更新中!
FIFA19について知りたくなったらここをチェック!



FIFA18完全攻略ガイド


FIFA18に関するさまざまな情報を日々更新中!
FIFA18について知りたくなったらここをチェック!


ABOUTこの記事をかいた人

大阪生まれ大阪育ちの生粋な関西人。30代でフロントエンジニアやってます。WEB系やサッカー・ゲームの話題・美味しくて安い居酒屋やハシゴ酒が大好き。気軽にフォローをポチッと押してね♪