商品ページが横幅ジャストサイズで見られるHTMLタグの入力の仕方

Question

PCの大きさにより商品ページの見え方が異なり、
お客様は画面を左右にスクロールしなければ見られないケースが生じます。

スクロールは面倒だし、全体像（横幅）がパッと見えれば好印象が与えられると思います。
また、商品をクリックしたとき、ドーンと横幅ジャストサイズでページが広がっていると、
インパクトが強いかな・・・とも思います。

商品ページが、PCの横幅ジャストサイズで見られるHTMLタグの入力の仕方をご存じでしたら教えて下さい！

Accepted Answer

ECマスターズの田中です。

なるほど、レフトナビを削除されたのですね。
作業で分からない部分がありましたら、ご質問お待ちしております。

なお、ヘッダー・フッター・レフトナビの設定は、
複数保存することができますので、
大幅な変更を加える際は、
一度既存のヘッダー・フッター・レフトナビをコピーしていただき、
いつでも元に戻せる状態にした上でご変更いただくと、
何か問題があった際もすぐに元に戻せます。
今後、変更される際にご活用ください。

> そのHTMLタグを入力すると、小さいピクセルサイズで作成した画像も文字も、PC画面の横幅
> ジャストサイズに拡大され、また、スクロールしないと全体像が見れないページは、PC画面の
> 横幅サイズに収まるジャストサイズに縮小され表示される、との事でした。
こちら、私では存じ上げないのですが、
実際にその方法を使用されているショップなどありましたら、
ページを分析して方法をお教えすることができますので、
そのようなショップをご存知でしたらお知らせいただけますでしょうか。

Answer

ECマスターズの田中です。

私にてご回答させていただくにあたり、
ミケラン～☆様のショップの商品ページを
確認させていただいたところ、
横幅1680pxいっぱいで開いても
横スクロールバーが表示され、空白も目立つ状態となっております。

私のPCにて商品ページを見た様子を、添付ファイルにてお送りします。

確認したところ、
ヘッダー・フッター・レフトナビ、もしくは販売説明文などに
入れていただいているHTMLの中で、
開始タグと終了タグの対応が正しく行われておらず、
ページの構造が壊れておりました。

例えば、とある商品ページの中に含まれている
タグは49個、は51個となっております。
余分なタグ2つが、ページ構造を崩している一因となっており、
そのようなタグが他にもある可能性が高いので、
　・ヘッダー・フッター・レフトナビ
　・共通説明文（大）
　・PC用販売説明文
　・PC用商品説明文
などの項目をご確認の上、開始タグと終了タグの数が合うように
修正を行っていただけますでしょうか。

修正の際は、
http://liveweave.com
こちらのサイトの左上に、HTMLタグをそのまま貼り付けていただくと、
数の合わない開始タグ・終了タグが赤背景の白文字で
強調して表示されますので、修正に役立ちます。

Answer

> 例えば、とある商品ページの中に含まれている
> タグは49個、は51個となっております。
> 余分なタグ2つが、ページ構造を崩している一因となっており、
> そのようなタグが他にもある可能性が高い

HTMLタグの数合わせは、毎日１商品ずつでも丁寧に調べてみますね！
ありがとうございます～☆

本年２月に、弊社のレフトナビを全てを削除した時から商品ページが見辛くなり、
左右にスクロールしないと全体像が把握できない状態になりました。
レフトナビの削除が、バランスを崩した大きな要因だと思います。

レフトナビは「天使」「和風」「時計」「観葉植物」・・・など、
項目別にイメージ画像の写真のバナーをイラストレータで作成して作り直したいと思い、
レフトナビに記載できるバナーのピクセル数値や、その操作方法(作業過程)を、２年前
からECCやRMSコールセンターに訊いているのですが、誰も操作の仕方が判らないとの
回答で困っていたのです。

【お客様がクリックする手順の想定】
(1)レフトナビの項目別バナーをクリックする。
(2)５商品の１枚目の画像が横並びに配列されている。
(3)写真をクリックすると商品ページにジャンプする。
・・・という構想を考えています。
ページ作りに長けている方は簡単な作業かもしれませんが、
素人の私にはチンプンカンプンで何をしていいか判りません。
以前のレフトナビの項目は、文字列だけでした。

時間の合間に、こちらで作業方法を検索してみます。
なければ、別件で、質問しますね！

本題に戻りまして、
１年半程前に楽天大学で「100万円突破コース」の講座を受講したことがあります。
その頃、長期間遠方に出掛けていることが多く、受講最終日に残りの講座を消化したおかげで、
楽天大学の担当講師より、コメントの返答が時間的に当日中では間に合わないとの入電があり、
口頭で、改善すべきアドバイスを賜りました。その中の１つが
「商品ページが横幅ジャストサイズで見られるHTMLタグの入力の仕方」だったのです。

転居予定があり、転居してからページを改訂させようと思っていたのですが、
PCのドキュメントの中にのみ手順をまとめたものを保存しておりましたら、
転居作業中にPCが破損し、手順が見られなくなってしまったのです。
誰に訊いてもやり方が不明とのことで困っているのです。

そのHTMLタグを入力すると、小さいピクセルサイズで作成した画像も文字も、PC画面の横幅
ジャストサイズに拡大され、また、スクロールしないと全体像が見れないページは、PC画面の
横幅サイズに収まるジャストサイズに縮小され表示される、との事でした。

レフトナビが復活していない現状でもページが見易くなるかな・・・と思い、
そのHTMLタグを入手したいのです。

ご存じないでしょうか？

Answer

> 一度既存のヘッダー・フッター・レフトナビをコピーしていただき、
> いつでも元に戻せる状態にした上でご変更いただくと、
> 何か問題があった際もすぐに元に戻せます。

レフトナビのデータをメディア保存した上で削除していたと思います。
見つけて、カレンダーの部分だけでも復旧してみますね。
・・・そしたら、現在の不具合が解消されるかもしれませんね～☆

> 実際にその方法を使用されているショップなどありましたら、
> ページを分析して方法をお教えすることができますので、
> そのようなショップをご存知でしたらお知らせいただけますでしょうか。

随分前に、一度、同業者でPCの横幅ジャストサイズの商品ページを見たことがあります。
ページがこちら側に飛び込んでくるかのような圧倒的存在感と好印象を受けました～☆
・・・なので、弊社の商品ページにも生かしたいと思ったのです。
ですが、破損したPCのお気に入りに入れていたため、ショップ名は？です(T_T)
検索して判明しましたら、後日お知らせ致します。

一先ず、本件に関してはクリアという事で、ありがとうございました～☆ m( _ _ )m

Answer

> 実際にその方法を使用されているショップなどありましたら、
> ページを分析して方法をお教えすることができますので、
> そのようなショップをご存知でしたらお知らせいただけますでしょうか。

楽天市場のとあるショップのトップページです。
http://www.rakuten.co.jp/1---1/

インパクトの強さは、他店にないブラックベースのページ作りからだと思いますが、
どのPCで見ても、PC画面の横幅ジャストサイズで「バンッ！！」と載っかってきます。
気のせいでしょうか？
何か見えてくるものがございましたらご教示下さいませ！

Answer

ECマスターズの田中です。

私にていただいたページを確認させていただいたのですが、
ブラウザのウィンドウを狭めたり拡げたりして試しても、
特にコンテンツの横幅は変化しませんでした。

いただいたページの場合、
レフトナビを無くし、ページ全体の横幅を1245pxと決定して、
1245pxの横幅に合わせてコンテンツを作成されております。

Answer

レフトナビを無くしても、W：1245pxだと巧くページが作成できるのですね～☆
とても参考になりました。
ありがとうございます～☆　v(*^▽^*)v