解決済

楽天 スマホ ハンバーガーメニューの設置

  • 相談者:(DELETE1684735185)アダルト
  • 2019/08/02 09:41
下記のようにスクロールすると表示されるフローティングヘッダーをほぼ丸パクリしたいのですが、 どのようにすればいいでしょうか。 https://item.ra………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/02 12:34
ECマスターズの伊藤です。 参考サイトを拝見させていただきました。 仕組みとして、CSSやJava Scriptを利用した、かなり複雑な構造の為 ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/02 16:25
ECマスターズの伊藤です。 大変お待たせいたしました。 > 下記のようにスクロールすると表示されるフローティングヘッダーをほぼ丸パクリしたいのですが………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/05 09:49
ご回答いただきありがとうございます。 提示いただいた記述をRMSの商品ページ設定(スマートフォン用)の商品ページ共通説明文に入れればいいのでしょうか。そしてカ………(省略)………
ログインして全文を読む
  • 返信者:ECマスターズ中野
  • 2019/08/05 19:47
ECマスターズの中野です。 > アダルトさん いただいたこちらのご質問ですが、 確認して担当より明日回答させていただきます。 お時間いただい………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/06 12:16
ECマスターズの伊藤です。 > 提示いただいた記述をRMSの商品ページ設定(スマートフォン用)の商品ページ共通説明文に入れればいいのでしょうか。 ご………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/06 16:34
ありがとうございます。 設置してみました。細かな調整が必要そうですが、なんとかなりそうです。 しかし、思った以上に商品ページ共通説明文の文字数制限を圧迫して………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/06 17:42
ECマスターズの伊藤です。 > しかし、思った以上に商品ページ共通説明文の文字数制限を圧迫してしまい、 > 現在使用しているものなど、ほぼ全て削除しなけ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/06 18:11
外部cssを失念しておりました。ありがとうございます。恐らく解決すると思います。………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/06 19:13
お世話になっております。 商品ページ共通説明文に下記記述をしましたが、表示がおかしくなってしまいます。 ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/06 20:14
ECマスターズの伊藤です。 > お世話になっております。 > 商品ページ共通説明文に下記記述をしましたが、表示がおかしくなってしまいます。 拝見さ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 09:38
フリックできる画像は表示されますが、スマートフォン用商品説明文がまるっと隠れてしまう状況です。 また少し下にスクロールすると、フローティングヘッダー部分が表示………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/07 11:04
ECマスターズの伊藤です。 > フリックできる画像は表示されますが、スマートフォン用商品説明文がまるっと隠れてしまう状況です。 > また少し下にスクロー………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 11:13
ありがとうございます。 無事表示できました。店舗ロゴなど、画像もアップロード済みなのですが、表示されません。 cssに誤りがございますでしょうか。 また、………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 11:14
失礼しました。店舗ロゴなどは、リンク先に誤りがございました。………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 11:36
画像リンクを修正したのですが、やはり表示されません。 また、読み込んだiframeですが、参考元のものフリックすると慣性が働き滑らかにスクロールされるのに対し………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/07 15:49
ECマスターズの伊藤です。 > 画像リンクを修正したのですが、やはり表示されません。 > また、読み込んだiframeですが、参考元のものフリックすると………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 16:02
こちらになります。よろしくおねがいいたします。 https://www.rakuten.ne.jp/gold/yamaguchi-seni/css/sp-f-………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/07 16:24
ECマスターズの伊藤です。 CSSのご連絡ありがとうございました。 > 画像リンクを修正したのですが、やはり表示されません。 確認させていただ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 16:47
再度確認し、修正しました。 画像リンク修正後確認しましたが、404エラーにはならないもののやはり表示されません。 また、以下追記しましたが、スクロールす………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/07 17:02
ECマスターズの伊藤です。 > 再度確認し、修正しました。 > 画像リンク修正後確認しましたが、404エラーにはならないもののやはり表示されません。 ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 17:20
上記試みましたが、やはりメニューアイコンのみの表示となってしまいます。 サファリのネットワーク履歴の削除を試した確認してみましたが変わりません。クローム拡張機………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 17:39
修正したい箇所を箇条書きにてお送り致します。 ・フローティングヘッダーの店舗ロゴ、楽天ロゴ、カート、検索アイコンが表示されない。 ・上記と重複するか………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/07 18:09
ECマスターズの伊藤です。 > 上記試みましたが、やはりメニューアイコンのみの表示となってしまいます。 > サファリのネットワーク履歴の削除を試した確認………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 18:13
こちらの商品ページにて確認いたしております。 https://item.rakuten.co.jp/yamaguchi-seni/05-croco-hp/………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/07 18:24
ECマスターズの伊藤です。 URLのご連絡ありがとうございます。 iframeの閉じタグの頭に ="" が入ってることにより、iframe以下が ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 20:00
無事フローティングへッダーが表示されました。 しかし、新たに問題が発生してしまいました。 https://forum.ec-masters.net/post………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/07 20:21
どうにかカテゴリーの一覧表示と商品画像の2カラム表示ができましたが、 商品画像が小さいまま表示されております。以前使用していたcssをそのまま使用しているため………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)ECマスターズ田中
  • 2019/08/07 20:35
ECマスターズの田中です。 商品画像を2カラムで表示させる場合、 CSSだけでなく、JSで画像サイズをご変更いただく必要がございます。 https………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/08 09:23
ありがとうございます。2カラム表示につきましては解決しました。 >・ハンバーガーメニュー内のスクローリングがフリックの慣性が働かず操作性が悪い。滑らかに動………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/08 11:53
ECマスターズの伊藤です。 > 参考サイトでは、読み込んだiframe領域自体をフリックスクロールが可能ですが、 > 当店で、今回設置したiframeは………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/08 12:47
#leftNavi{ height: 100vh; overflow-x: scroll; padding-bottom: 100px; } 上記入力………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/08 14:42
ECマスターズの伊藤です。 度々お手数おかけして申し訳有りません。 商品ページ共通説明文にご登録頂いている IFRAMEを下記のとおり修正していただけ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/08 15:14
ありがとうございます。無事実装できました。 店舗のロゴを中央に表示させたいのですが、現在微妙に右よりになってしまっています。 また、メニューをタップした際に………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/08 15:18
追記:先ほどのスクロールの件ですが、iframeの表示領域自体の動作は問題ないのですが、今度は、余白部分をスクロールすると背景がスクロールされてしまいます。これ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/08 15:54
ECマスターズの伊藤です。 > 店舗のロゴを中央に表示させたいのですが、現在微妙に右よりになってしまっています。 sp-f-menu.css 109………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/08 16:09
店舗ロゴの中央寄せが出来ました。 leftnavi.css の #leftNavi に、下記を追加お願いいたします。 ====以下を追加==== ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/08 18:49
ECマスターズの伊藤です。 > こちらですが、スマホでは問題なく動作しますが、PCのレフトナビを流用しておりますので、こちらを追記するとPCの表示が崩れて………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/08 19:11
=====leftnavi.cssに以下を追加 @media screen and (max-width: 768px) { #leftNavi{ pa………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)ECマスターズ田中
  • 2019/08/08 20:40
ECマスターズの田中です。 それでは、leftnavi.css の #leftNavi に、 padding:0 40px; の代わりに ………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/09 09:53
ありがとうございます。無事キレイに表示できました。 スマホメニューを下までスクロールすると、商品カゴに追加と購入手続きへの楽天既存バナーと 被ってしまい。表………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/09 15:05
ECマスターズの伊藤です。 > スマホメニューを下までスクロールすると、商品カゴに追加と購入手続きへの楽天既存バナーと > 被ってしまい。表示されている………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/09 16:19
#leftNavi {width:200px; /*スマホiframeの呼び込み時のスクロール設定*/height: calc(100vh - 150px)………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/09 18:53
ECマスターズの伊藤です。 > こちら入力しました所、スマホでは解決しましたが、PCで確認するとマウスオーバーでスクロールバーが表示され安定しませんでした………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/10 09:52
下記のように入力しましたが、マウスオーバーでスクロールが表示されてしまいます。 #leftNavi { width:200px; height: 1………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)ECマスターズ小野
  • 2019/08/10 10:18
ECマスターズの小野です。 いただいたご質問ですが、 後日担当より回答させていただきますので、 少々お待ちくださいませ。………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/12 10:29
ECマスターズの伊藤です。 > 下記のように入力しましたが、マウスオーバーでスクロールが表示されてしまいます。 先日ご案内させていただいていた @………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/16 10:04
#leftNaviのheightを、下記の通り 修正してご確認いただけますでしょうか。 #leftNavi {width:200px; /*スマホi………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/16 13:23
ECマスターズの伊藤です。 > こちら追記し確認しました所、スマホでは一番下のメルマガのバナーが表示されませんでした。 ご対応いただきまして、ありが………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/16 13:46
失礼しました。 スマホの方は大丈夫でしたが、やはりPCの方はスクロールバーが表示されてしまうようです。###HR######IMG0f2622e1967bfd………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/16 14:43
ECマスターズの伊藤です。 > スマホの方は大丈夫でしたが、やはりPCの方はスクロールバーが表示されてしまうようです。 ご確認いただき、ありがとうご………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/16 15:56
#leftNaviより、overflow-x: scroll; を削除していただきますよう、お願いいたします。 今度はスマホ版にてメニューがスクロールし………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1756463501)ECマスターズ伊藤
  • 2019/08/16 20:07
ECマスターズの伊藤です。 > 今度はスマホ版にてメニューがスクロールしなくなってしまいます。 度々お手数おかけして申し訳ありません。 IFR………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/08/27 15:59
ご返信遅くなりまして申し訳ございません。 この場合、新たに画像等を追加し、表示領域を大きくする場合は、都度 下記内容も変更しなければなりませんか? IFR………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)ECマスターズ田中
  • 2019/08/27 18:54
ECマスターズの田中です。 > この場合、新たに画像等を追加し、表示領域を大きくする場合は、都度 > 下記内容も変更しなければなりませんか? ペー………(省略)………
ログインして全文を読む
  • 返信者:(DELETE1684735185)アダルト (質問者)
  • 2019/09/02 17:47
無事解決しました、長期にわたりご対応いただき本当にありがとうございました。………(省略)………
ログインして全文を読む