Yahooショッピングのカスタムページを画面幅いっぱいの100%表示にする方法

Yahooショッピングのカスタムページを画面幅いっぱいの100%表示にする方法

以前Yahooショッピングのヘッダーを画面幅いっぱいの100%表示にする方法を紹介しました。

その後、読者の方からカスタムページ(テンプレート3)を幅100%にする方法についての問い合わせをいただいたこともあり、今回同じ悩みを抱える方向けに共有します。

簡単ですのでぜひ覚えていってください。

Yahooショッピングのカスタムページ(テンプレート3)を幅100%にする方法

幅100%にするための外部CSSを作成する

外部CSSを用意します。

メインコンテンツ部分を内包する#wrap2が幅が固定されているため、width:100%で上書き。更にpaddingの値が指定されているので0で上書きします。

上のCSSを外部CSSとしてYahooショッピングのトリプルにアップロードしてください。

作成した外部CSSをストアクリエイターProで読み込む

ストアクリエイターProのカスタムページ(テンプレート3)編集画面を開き、アップロードした外部CSSを<link>タグで読み込ませます。

最後に

テンプレート3のカスタムページを100%にするために用意するのはCSSだけ。CSSに記述するのも2つだけですので簡単に変更できます。

テンプレート3のカスタムページを利用してページを作成する際は、ぜひ活用してください。

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

 

関連:ヘッダーを100%にする方法はYahooストアクリエイターにてヘッダーを画面幅いっぱいにする方法で紹介しています。