参考にしたいお店のサイトがあるのですが、、

Question

html,cssを学習したばかりの初心者です。

今参考にしたお店のサイトがあるのですが、
自分の考えだけでは、なかなか先に進まないので質問します。

いままでデザインはCOMPASSを使っていましたがhtml,cssで作り直すことに決めて
初心者用の学習サイト・動画でおおまかな初歩的なやり方を学び終わりました。

下記のお店のデザインが見やすく参考にさせていただきたき、
写真素材と商品写真、文章txtは50％くらい用意しているのですが、
サイト自体は一から作成していこうと思っています。
ただ具体的にどういう作業工程から入るべきなのかわかりません。

おおまかなサイト完成までの流れと最初のほうにやることをお教えいただけたら嬉しいです。

参考にしたいお店
https://www.rakuten.ne.jp/gold/outletshoes/?s-id=soy2018_pc_udr_genre_fashion_outletshoes

Accepted Answer

ECマスターズの田中です。

RMSの中で、ここからここまでがCompassで設置したHTMLタグである、
という記述がございますので、
その中さえ変更しなければ、特に制約・デメリットなどはなく
ページを更新していただくことができます。

上記範囲の中は、絶対に編集しないようにお願いします。
記入した内容が消える、Compassで更新ができなくなる、
などのトラブルにつながります。

また、文字数制限ギリギリまで詰め込みすぎて、
Compassが範囲内を書き換えようとしたところ
文字数オーバーでエラーが発生し更新ができなくなる、
といった事態も避けていただきますようお願いします。

Answer

ECマスターズの星です。

週明け担当よりご連絡さしあげますので、
今しばらくお時間いただけると幸いです。
お待たせして申し訳ございませんが、
何卒よろしくお願いいたします。

Answer

星さんありがとうございます。

どうぞよろしくお願い致します。

Answer

ECマスターズの田中です。

楽天市場のページは、基本的に、
RMS内に用意された項目にHTMLを埋めていくことで
作成することができます。

PC用ページの場合、
デザイン設定機能で設定された枠組みの中に、
各ページ独自の要素が設置されるような構成となります。
デザイン設定で設定できる部分は、下記マニュアルをご参照ください。
https://navi-manual.faq.rakuten.net/design/000009509

デザイン設定機能で設定できる項目の中で、特に
「ヘッダー・フッター・レフトナビ」は、
HTMLが記載でき、ページ内で頻繁に見られる部分となりますので、
まずは、ヘッダー・フッター・レフトナビの作成より
着手していただくと、わかりやすいかと思います。

新しいデザインを記入するため、
https://navi-manual.faq.rakuten.net/design/000009501
上記マニュアルの手順に沿って、
テンプレート名以外空の「ヘッダー・フッター・レフトナビ」を新規作成してください。

続いて、上記「ヘッダー・フッター・レフトナビ」を適用させる
商品ページをご用意ください。
既存の商品ページをコピーして、「サーチ非表示」の「サーチ非表示にする」に
チェックを入れていただくことで、
お客様に見られることのない商品ページをご用意いただくことができます。

ご用意いただいた商品ページに対して、
https://navi-manual.faq.rakuten.net/item/000009606
上記手順で、先に作成した「ヘッダー・フッター・レフトナビ」を
適用していただくことで、
お客様に見られることなく、新しいデザインを作り込むことができる環境を
作成していただくことができます。

あとは、作成いただいた「ヘッダー・フッター・レフトナビ」の中で
新しいデザインの作り込みを行っていただければ結構です。
完成し次第、「自動選択」としてご設定いただくことで、
全ページ（トップページ・商品ページ・カテゴリページ）に
新しいデザインを適用していただくことができます。
https://navi-manual.faq.rakuten.net/design/000009503

まずは、上記「ヘッダー・フッター・レフトナビ」の中で、
さてさんにて実現できる範囲でHTMLの作成をお願いします。
いただいたページの中で、スライドバナーなど、
動きを出す仕組みを実現するためには、
楽天GOLDをご利用いただく必要がある場合がございます。
https://navi-manual.faq.rakuten.net/service/000010362
実際に作り込む上で再現が難しいとなった場合に、
改めてご質問いただきますようお願いします。

その他、デザインを作り込む環境作りの中で
不明な点などございましたら、
返信にてお知らせいただきますようお願いいたします。

Answer

田中さんありがとうございます。

返信遅れてすみません。
この返信まで不明点を質問にはまだ理解不足でした。

cssの講座片っ端からやって色々見ながらならできるようになってきたので２点質問があります。

参考ページ
https://www.rakuten.ne.jp/gold/outletshoes/?s-id=soy2018_pc_udr_genre_fashion_outletshoes

①ナビボタンの黒いカテゴリからほかのメニューが飛び出すにはどう書けばいいのでしょうか？


また、在庫の商品数、種類は足りているのですが、
商品ページを作成していなかったためリンク先がない状態なのですが、

②「作成の順番」としては、とりあえず「ヘッダー・フッター・レフトナビ」を先に作成し、架空のページにあとからurlを貼り付けていく形でも良いのでしょうか？


アドバイスいただけるとありがたいです。

Answer

ECマスターズの田中です。

> 1. ナビボタンの黒いカテゴリからほかのメニューが飛び出すにはどう書けばいいのでしょうか？

いわゆるドロップダウンメニューは、
楽天のPCページで実現できる、CSSのみで作る方法もいくつかあり、
たとえば、下記ページで紹介されている仕組みがございます。

CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ)
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/

シングル・多階層・メガの、どれを設置するかを検討の上、
まずは、ページの案内に沿って設置をお試しいただきますようお願いいたします。

> 2. 「作成の順番」としては、とりあえず「ヘッダー・フッター・レフトナビ」を先に作成し、架空のページにあとからurlを貼り付けていく形でも良いのでしょうか？

架空のページ、というのは、
作成いただいたヘッダー・フッター・レフトナビの中に
空のメニューを作っておき、
あとでリンク先を設定していく、ということでよろしいでしょうか。

順番としてはそれで問題ございません。
ですが、サイト全体完成後に、結局リンク先にするページが見つからず、
メニューの中に何も動作しないボタンが出来てしまう、
ということのないよう、
どのメニューがどの商品・カテゴリに紐づくのかを、
予め決めた上で作成していただきますようお願いいたいます。

Answer

質問後からhtml,cssでの作成中です。

覚えたてなので、変なミスでストップしたりしてまだスローではありますが不可能ではないので作業中です。

時短できるかなという思いつきの質問なのですが、RMSの枠内はCOMPASSなどを貼り付けても上下にスペースを入れれると思うのですが、重要部分・SEOなどにかかる文章部分だけとか、特定の商品ページだけ自分でhtml,cssで作るようなやり方は自由に可能なのでしょうか？それとも、制約される部分やデメリットあるのでしょうか？