EC運営ヒント

Yahoo!店のストアクリエイター内で、ヘッダーとフッターの幅を100%で表示する方法

投稿日:

[`evernote` not found]
LINEで送る

どうも!きたむです!

今回はYahoo!のストアクリエイターで、共通で使用しているヘッダーとフッターの裏技についてです。
Yahoo!ストアクリエイター内でヘッダーとフッターを入れるフィールドがありますが、
通常ここにソースを入れるとページの幅がコンテンツと同じ幅になる仕様になっています。

つまり、サイト内のコンテンツの幅が仮に「950px」であれば、ヘッダーとフッターも自動的に950pxに固定されてしまいます。
ですが、デザインによってはヘッダーやフッターは幅いっぱいまで表示させたいという時もあります。(最近はそういうデザインの方が主流になっている)

そんなときにすごく簡単にヘッダーとフッターを100%表示させる方法をご紹介します。
本当に簡単にできちゃいます!

ヘッダー例:

フッター例:

 

ヘッダーの表示幅を100%にする

下記のソースの「ヘッダーのソースを記入」の部分にヘッダーのhtmlを記述する。

ストアクリエイターにログインし、
「ストア構築>ストアデザイン>ヘッダー・看板」のヘッダー共通設定のフリースペースに上記のhtmlを貼り付けて保存する。

</div>


</div>


</div>



===================================

ヘッダーのソースを記入

===================================



<div id=”wrap2″>


<div id=”Top”>


<div id=”TopStoreBanner3″>

 

フッターの表示幅を100%にする

下記のソースの「フッターのソースを記入」の部分にフッターのhtmlを記述する。

ストアクリエイターにログインし、
「ストア構築>ストアデザイン>フッター」のフッター共通設定のフリースペースに上記のhtmlを貼り付けて保存する。

</div>


</div>


</div>



===================================

フッターのソースを記入

===================================



<div id=”wrap2″>


<div id=”Bottom”>


<div id=”BtmFreeSpace1″>

 
これで完成です。
簡単に実装ができてしまいます!
幅が固定か100%表示かという違いですが、この違いだけでも印象はかなり異なります。
中にはトップページだけ100%にしている店舗もありますが、やはり遷移先でヘッダーやフッターの表示が変わってしまうのも、なんか違和感ありますよね。。。
今回説明した通り簡単に実装できますので、ぜひ試してみてください。

関連ニュース

[`evernote` not found]
LINEで送る

-EC運営ヒント

Copyright© EC grow | EC関連のニュースメディアサイト , 2017 All Rights Reserved.