- 文字サイズ変更
- 小
- 中
- 大
解決済
店舗トップページの作成に関して
- 相談者：非公開
- 2021/11/24 17:50
お世話になっております。
現在、店舗のトップページを作成しているのですが、うまくいかないところがいくつかあるので、ご教授お願いいたします。
===========================================================================
① bxsliderを使ってビジュアルトップにスライダーを表示させているのですが、pc/タブレットの際は2枚ずつ、スマホの際は1枚ずつ表示させたいのですが、どのように記述したらよろしいでしょうか。スマホ表示がうまくいかず、画像が表示されない状態になってしまっています。
② javascriptでカレンダーを設定したいのですが、表示されません。他のテストファイルにindex.html、caldendar.css、calendar.jsを作って動作を確認したところ問題なく表示されるのですが、こちらの現在作成しているページに組み込むと表示されなくなってしまいます。
③ 現在アップロードしているサーバーは個人的に店舗とは関係なく契約しているサーバーなのですが、店舗で使用している楽天の商品ページ画像やいくつかhtmlをあげているサーバーにアップすると、かなりくずれてしまいます。
具体的には、
・imgフォルダに入れている画像が表示されない(楽天内で使用している画像は表示される)
・javascriptの記述が動かない(フェードインなど)
・bxsliderが動作しない
・cssが少しくずれる
などです。
楽天の規約で使えないタグなどがあるせいでしょうか？
===========================================================================
以上の3点になります。
URLは以下になります。
https://intp.site/389/test_hp/
宜しくお願い致します。
現在、店舗のトップページを作成しているのですが、うまくいかないところがいくつかあるので、ご教授お願いいたします。
===========================================================================
① bxsliderを使ってビジュアルトップにスライダーを表示させているのですが、pc/タブレットの際は2枚ずつ、スマホの際は1枚ずつ表示させたいのですが、どのように記述したらよろしいでしょうか。スマホ表示がうまくいかず、画像が表示されない状態になってしまっています。
② javascriptでカレンダーを設定したいのですが、表示されません。他のテストファイルにindex.html、caldendar.css、calendar.jsを作って動作を確認したところ問題なく表示されるのですが、こちらの現在作成しているページに組み込むと表示されなくなってしまいます。
③ 現在アップロードしているサーバーは個人的に店舗とは関係なく契約しているサーバーなのですが、店舗で使用している楽天の商品ページ画像やいくつかhtmlをあげているサーバーにアップすると、かなりくずれてしまいます。
具体的には、
・imgフォルダに入れている画像が表示されない(楽天内で使用している画像は表示される)
・javascriptの記述が動かない(フェードインなど)
・bxsliderが動作しない
・cssが少しくずれる
などです。
楽天の規約で使えないタグなどがあるせいでしょうか？
===========================================================================
以上の3点になります。
URLは以下になります。
https://intp.site/389/test_hp/
宜しくお願い致します。
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2021/11/24 18:57
ECマスターズの田中です。
いただいたURLを確認したところ、
各所で404エラーおよびJavaScriptエラーが起こっておりますので、
正確なご案………（省略）………
いただいたURLを確認したところ、
各所で404エラーおよびJavaScriptエラーが起こっておりますので、
正確なご案………（省略）………
- 返信者：非公開（質問者）
- 2021/12/02 13:07
お返事ありがとうございます。
該当の部分の修正、削除をいたしました。
showprocess関数に関しては以前試みた別のカレンダーの記述が残ってしまって………（省略）………
該当の部分の修正、削除をいたしました。
showprocess関数に関しては以前試みた別のカレンダーの記述が残ってしまって………（省略）………
- 返信者：非公開（質問者）
- 2021/12/02 13:19
また、こちらが普段楽天でhtmlなどをアップする際に使用しているサーバーに、まったく同じデータtest_hpを入れたものなのですが、表示がこのようになってしまい………（省略）………
- 返信者：非公開（質問者）
- 2021/12/02 13:36
先ほど載せたURLですが、スマホから見ると正常な表示になっているので、メディアクエリのスマホサイズがpcにも表示されてしまっているようです。楽天ではレスポンシブ………（省略）………
- 返信者：非公開
- 2021/12/02 19:06
ECマスターズの田中です。
> 1. bxsliderを使ってビジュアルトップにスライダーを表示させているのですが、pc/タブレットの際は2枚ずつ、ス………（省略）………
> 1. bxsliderを使ってビジュアルトップにスライダーを表示させているのですが、pc/タブレットの際は2枚ずつ、ス………（省略）………
- 返信者：非公開（質問者）
- 2021/12/03 10:48
お返事ありがとうございます。
該当箇所の修正いたしました。
スマホのスライダーが表示されません。
どのようにしたらよいでしょうか。
カレンダーは………（省略）………
該当箇所の修正いたしました。
スマホのスライダーが表示されません。
どのようにしたらよいでしょうか。
カレンダーは………（省略）………
- 返信者：非公開
- 2021/12/03 11:12
ECマスターズの田中です。
> スマホのスライダーが表示されません。
> どのようにしたらよいでしょうか。
私の環境では添付画像のように、
大き………（省略）………
> スマホのスライダーが表示されません。
> どのようにしたらよいでしょうか。
私の環境では添付画像のように、
大き………（省略）………
- 返信者：非公開（質問者）
- 2021/12/03 11:27
ありがとうございます。
キャッシュが切れていなかったようです、すみません。
フッター部分のshopping guide、contactとカレンダーを横並びに………（省略）………
キャッシュが切れていなかったようです、すみません。
フッター部分のshopping guide、contactとカレンダーを横並びに………（省略）………
- 返信者：非公開（質問者）
- 2021/12/03 15:09
度々申し訳ございません。
こちらのURLでご確認お願い致します。
https//www.rakuten.ne.jp/gold/SHOP-URL/test………（省略）………
こちらのURLでご確認お願い致します。
https//www.rakuten.ne.jp/gold/SHOP-URL/test………（省略）………
- 返信者：非公開
- 2021/12/03 18:12
ECマスターズの田中です。
フッター部分のshopping guide、contactとカレンダーは、
デベロッパーツールで確認すると、下記画像のような………（省略）………
フッター部分のshopping guide、contactとカレンダーは、
デベロッパーツールで確認すると、下記画像のような………（省略）………
- 返信者：非公開（質問者）
- 2021/12/06 13:25
お返事ありがとうございます。
769px以下の時にフッターのカレンダーが今左寄せになってしまっているのですが中央揃えにするにはどのように記述したら宜しいでしょ………（省略）………
769px以下の時にフッターのカレンダーが今左寄せになってしまっているのですが中央揃えにするにはどのように記述したら宜しいでしょ………（省略）………
- 返信者：非公開（質問者）
- 2021/12/06 13:27
可能であれは769px以下のときカレンダーが端末のサイズによって伸び縮みするようにしたいのですが、そちらの記述も併せてお願い致します。………（省略）………
- 返信者：非公開（質問者）
- 2021/12/06 14:11
また、カレンダーの各月ごとの店舗独自のお休み日や祝日なども土日と同じように休みだとわかるよう背景を赤くしたいのですが、その際どうやって各月ごとに指定すればよいで………（省略）………
- 返信者：非公開
- 2021/12/06 14:59
ECマスターズの田中です。
中央揃え・伸び縮みの件併せまして、
footer .calendar_test { width: 100%; }
としてい………（省略）………
中央揃え・伸び縮みの件併せまして、
footer .calendar_test { width: 100%; }
としてい………（省略）………
- 返信者：非公開（質問者）
- 2021/12/07 12:55
ありがとうございます。
ある程度スクロールしたところで上に戻るボタンが出るように設定しているのですが、その中のgoogleから持ってきている＞のマークがど………（省略）………
ある程度スクロールしたところで上に戻るボタンが出るように設定しているのですが、その中のgoogleから持ってきている＞のマークがど………（省略）………
- 返信者：非公開
- 2021/12/07 16:29
ECマスターズの田中です。
> ある程度スクロールしたところで上に戻るボタンが出るように設定しているのですが、その中のgoogleから持ってきている＞のマ………（省略）………
> ある程度スクロールしたところで上に戻るボタンが出るように設定しているのですが、その中のgoogleから持ってきている＞のマ………（省略）………
- 返信者：非公開（質問者）
- 2021/12/09 12:19
ありがとうございました。
別件で、トップページスライダー部分のうえの青いメニューカテゴリーをホバーして出てきたプルダウンメニューの上でマウスを動かしている………（省略）………
別件で、トップページスライダー部分のうえの青いメニューカテゴリーをホバーして出てきたプルダウンメニューの上でマウスを動かしている………（省略）………
- 返信者：非公開（質問者）
- 2021/12/09 13:07
カラージェルなどのプルダウンの縦幅の長い箇所は特に先ほど書いた現象が起きやすいです。………（省略）………
- 返信者：非公開
- 2021/12/09 15:50
ECマスターズの田中です。
bxSliderのオプションに
controls: false;
を加えて、スライダーを前後に移動するボタンをなくすといか………（省略）………
bxSliderのオプションに
controls: false;
を加えて、スライダーを前後に移動するボタンをなくすといか………（省略）………
- 返信者：非公開（質問者）
- 2021/12/09 17:27
ご回答ありがとうございます。解決いたしました。………（省略）………
- 返信者：非公開（質問者）
- 2022/01/14 12:33
お世話になります。
こちらのホームページなのですが、新たにjqueryの記述を加えたページを作成したところ、このページのみ既存のjquery(ハンバーガーメニ………（省略）………
こちらのホームページなのですが、新たにjqueryの記述を加えたページを作成したところ、このページのみ既存のjquery(ハンバーガーメニ………（省略）………
- 返信者：非公開（質問者）
- 2022/01/14 12:56
それから、既存のjqueryに問題があるページのフッター部分、文字サイズが一部小さくなってしまっている部分(カレンダーの日付やメールアドレスなど)があるのですが………（省略）………
- 返信者：非公開（質問者）
- 2022/01/14 12:57
文字サイズが小さくなるのは、スマフォから見た時のみで、pcのときは問題ありません。………（省略）………
- 返信者：非公開
- 2022/01/14 18:22
ECマスターズの田中です。
nailart_all.html では、
jQueryが</body>タグの近く、ページのほぼ最下部へ移動しているため、
………（省略）………
nailart_all.html では、
jQueryが</body>タグの近く、ページのほぼ最下部へ移動しているため、
………（省略）………
- 返信者：非公開（質問者）
- 2022/01/18 10:20
お返事ありがとうございました。scriptタグをhead内に移動し他ページ同様動くようになりました。
スマフォページサイズは依然直りません。
よろしくお願い………（省略）………
スマフォページサイズは依然直りません。
よろしくお願い………（省略）………
- 返信者：非公開
- 2022/01/18 11:29
ECマスターズの田中です。
スマホ用ページの文字サイズについて確認したところ、
https//www.rakuten.ne.jp/gold/SHOP-U………（省略）………
スマホ用ページの文字サイズについて確認したところ、
https//www.rakuten.ne.jp/gold/SHOP-U………（省略）………
- 返信者：非公開（質問者）
- 2022/02/01 18:15
ご回答ありがとうございました。
別件なのですが、トップページのスライダーで動かしている部分の商品にクリックしても飛べなくなってしまったのですが、原因が分か………（省略）………
別件なのですが、トップページのスライダーで動かしている部分の商品にクリックしても飛べなくなってしまったのですが、原因が分か………（省略）………
このフォーラムへの質問は終了しました
質問を検索する