商品ページの作り方　２件

Question

お世話になっております。

参考URL
https://item.rakuten.co.jp/e-zakkamania/32136-1701203/?smadid=e03a9fc4197ec20a&iasid=07rpp_10095__ed_jhzxhr6c_22_577ada9a-3430-4af2-bf9a-0e032e33208b


１件目：
こちらのスマホ版で、
お気に入りボタンがあるのですが、
（お気に入り）
スマホでも
デザインレシピの下記のコードで流用できますでしょうか？
・・・・・・

/* お気に入り商品登録画像変更 */
body #rakutenLimitedId_aroundCart div.bkm{
width: 306px !important;
}
body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
width: 306px !important;
height: 48px !important;
background: url(画像URL) no-repeat 0 0 !important;
}
body div.bookmarkArea div.bkm a.addBkm {
width: 306px !important;
height: 48px !important;
}

/* お気に入りショップ登録画像変更 */
body #rakutenLimitedId_aroundCart div.shopBkm{
width: 306px !important;
padding-left: 0px !important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
width: 306px !important;
height: 48px !important;
background: url(画像URL) no-repeat 0 0 !important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm {
width: 306px !important;
height: 48px !important;
}


・・・・・・

２件目：

同じ参考のURLで
商品画像とリンクを参考２を作りたいのですが、
どのような表記をすればいいいでしょうか？

ご確認ください、よろしくお願いいたします。###HR######IMG0c960c2bad2ee26ffdd90cb721229d1f1.jpegIMG0### ###IMG157662c8168188cc58409f5659b528991.jpegIMG1###

Answer

ECマスターズの田辺です。

スマホのお気に入りボタン設置方法につきましては
別途デザインレシピにてご案内しておりますので
こちらをご覧くださいませ。
https://club.ec-masters.net/index.php?design_page14

また、参考２のような表記方法につきましても
デザインレシピにてご案内しておりますので
ご確認いただけますと幸いです。
https://club.ec-masters.net/index.php?design_page3

Answer

田辺様
早速ご連絡ありがとうございます。

１件目ですが、
「JavaScriptファイルをGOLDにアップロードする」
という部分ですが、具体的にはどこにアップすればいいでしょうか？
FTPでバッチにアップすればいいでしょうか？

２件目ですが、
下記をアップしましたが、
４つ横並びには表示されておらず、
縦並びに表示されている状況です
https://item.rakuten.co.jp/banlyshop/1014/
どこちらを修正すればいいでしょうか。
ご教示ください、よろしくお願いします。###HR######IMG07a2d039e8d54cdb1b9f1efd4afac065c.jpegIMG0######BR###

Answer

ECマスターズの田辺です。

1件目のバッチというのは
商品一括編集機能のフォルダのことでしょうか。

そちらではなくGOLDアップロードをお願いいたします。
GOLD内であればどちらにアップロードしていただいても大丈夫です。

例えばGOLDの直下に直接ファイルをアップロードしていただいた場合は、
外部JSファイルURLを
https://www.rakuten.ne.jp/gold/banlyshop/〇〇.js
にしていただいて、

GOLD内に「favorite」というフォルダを作成し、
その中にアップロードしていただいた場合、
外部JSファイルURLを
https://www.rakuten.ne.jp/gold/banlyshop/favorite/〇〇.js
にしていただきますようお願いいたします。


２件目につきましては
ご案内させていただいたページ　の
「3-1：tableタグを組む」を参考にしていただけますと幸いです。
https://club.ec-masters.net/index.php?design_page3

例は３つ並びになっておりますので
以下を１つ増やしていただくことで
４つ並びになります。



商品名
商品説明

Answer

田辺様

お世話になっております。

1件目の方は
ftp.rakuten.ne.jp 　→　ポート番号16910

でログインするサーバーをGOLDと呼ぶということで理解して、
favoriteフォルダを作りアップしました
添付画像ご確認ください、よろしくお願いいたします。

また、スマートフォン用商品説明文に下記を追加しました




表示されません。。
間違いあればご指摘もらえましたら幸いです。

また、table ご指摘を参考にできました！

一方で、レビューの星のがスマホでフルサイズで表示されているのは何かいじったからそのように表示されていると思いますが
修正点をご指摘いただけますでしょうか？
ご確認ください、よろしくお願いいたします。

https://item.rakuten.co.jp/banlyshop/1014/###HR######IMG0696b4b51545b8982d7e4f4cfe3942db3.jpegIMG0######BR###

Answer

ECマスターズの田辺です。

ひとまずJSファイルは反映されて
商品説明の上にお気に入り追加のリンクができていますね。

あとはCSSファイルの末尾を「.css」にしていただかないと
デザインが反映されませんので、

「favoritecss.js」を「favorite.css」にご変更をお願いいたします。
※実際のファイル名とURLの２箇所ご変更ください。

誤）

正）



レビューの星につきましては、
４つ並びの table と一緒に記述されている

img {
width: 100%;
height: auto;
}

によって、
星の画像を含めたページ全体の画像が
横幅100%で表示されるようになっております。

例えば商品説明文の中の画像だけ反映させるなど
範囲を指定してみてください。

例）
#itemDescription img {
width: 100%;
height: auto;
}

Answer

全てできました！
ありがとうございました！！！

商品ページの作り方 ２件

商品ページの作り方　２件