E-store step01

E-storeサイトリニューアル案件の続きです。
プロローグでは、E-storeのサイトリニューアルで『したいこと』をリストアップしました。
　
今回は、第1項目と第2項目の
『トップページと下層ページのデザインを変える』
『特定のページのみにウィンドウサイズに合わせた100%幅のコンテンツを挿入する』
　
まず今回は、E-storeの管理画像から設定できる【営業日】【おすすめ商品】【新商品】などの連動を利用したかっため、自作ページは作成せず、テンプレートのカスタマイズで行うことにしました。
　
さて、E-storeでは用意されたカスタムテンプレートを使用すれば、デザインの変更は可能です。
ヘッダー・フッター領域はhtmlとcss、下層ページはcssの変更、そしてトップページにはフリーエリアの配置が可能です。
　
ヘッダー領域は〈お店ページ〉〈商品ページ〉〈フリーページ・店長日記〉〈カート〉
フッター領域は〈お店ページ〉〈カート〉のhtmlをそれぞれ自由に変更出来ます。
　
ここで問題になるのは、ヘッダー領域・フッター領域共に〈トップページのみ〉に反映できないことです。
トップページのみヘッダーに100％のスライダーを入れたり、フッターにコンテンツを配置したりしたい…
　

そこで、見つけたのがこの方法
「jQueryを利用しURLを取得して、bodyにclass名を追加する」という方法です。

こちらのサイトを参考にさせて頂きました。
Eストアー ショップサーブで各ページに固有のclassを付けて思い通りのcssを設定する！

この方法を利用すれば、共通で記載された内容もページ毎に表示・非表示をCSSで切り替えることが可能になりました。

…少し強引な所もあります…

しかし、SEOやコンテンツの内容なども考慮した上で、デザインを優先し、この方法で行くことにしました。

そして、この方法の素晴らしいところは、URLがbodyのclass名に追加されるので、
特定の1ページだけで無く、特定のカテゴリページ別にもスタイルを変更することが可能です。

例えば…
http://ドメイン名/SHOP/第1階層カテゴリID/第2階層カテゴリID/list.html
というURLのカテゴリーページであれば、
bodyのclass名は〈第1階層カテゴリID〉〈第2階層カテゴリID〉〈list〉となります。

『トップページと下層ページのデザインを変える』
『特定のページのみにウィンドウサイズに合わせた100%幅のコンテンツを挿入する』
という両方とも、このbodyのclass名を利用しCSSで調整することで解決出来ました！

素晴らしい方法を考えて下さった方に感謝です！

Written by IShiko