スマホフリック画像上部にバナー

Question

お世話になっております。下記URLのページのようにスマートフォンの商品ページの上部に画像を入れたいのですがどの様な設定をしたら出来ますでしょうか？メニューや検索窓は現状の楽天使用で良いのですが、フリック画像の上に店舗休業のアナウンス画像を入れたいです。宜しくお願い致します。http://item.rakuten.co.jp/lakota/la024/

Answer

ECマスターズの田中です。ｄｈさんのショップを確認したところ、スマートフォン用商品ページの「商品をかごに追加」「ご購入手続へ」各ボタンの裏側に、「倉庫移転に関する配送遅延のお知らせ」バナーが隠れておりました。このバナーを置き換えて画面上端に設置される際は、スマートフォン向商品ページ用の共通説明文に含まれるとの間のHTMLソースを新しい内容に置き換えていただき、http://www.rakuten.ne.jp/gold/ショップURL/smart/css/footer.css内の「bottom」を「top」に置き換えていただければ結構です。さらに、下記規則を「footer.css」に書き加えることで、画面上端のバナーがメニューや検索窓にかぶらないようにすることができます。===== この下の行から ================#ipnsh-header { margin-top: calc( 100vw * ( バナー画像の高さ / バナー画像の横幅 ) ); }===== この上の行まで ================※バナー画像の高さ（横幅）は、実際の半角数字に置き換えてご利用ください。既存のバナーとは別に、新しいバナーを加える必要がある場合はご返信ください。

Answer

ECマスターズの田中です。当質問にていただいたような、画面に固定されるバナーを簡単に設置できる「バナー設置君」を作成いたしましたので、全体公開前に、当質問への返信として、先行してお知らせさせていただきます。HTMLやスタイルシートを書くことなく、完成したHTMLをヘッダー・フッター・レフトナビに貼り付けるだけで固定バナーを簡単に設置することができます。オプションを詳しく設定することで、マウスを乗せると動いたり、半透明になったり、IDを変えることで複数設置することも可能です。もし、新しいバナーに入れ替える機会などありましたら、ぜひ、下記URLより「バナー設置君」をお試しいただき、わかりづらい点やご希望などございましたらお知らせいただければと思います。https://ec-masters.club/fwd3/fixedbannerkun

Answer

こちらの内容で、新規に下のご注文ボタンの上にも細いバナーを入れたいのですが、どのように設定すればよろしいでしょうか？

Answer

ECマスターズの田中です。＞こちらの内容で、新規に下のご注文ボタンの上にも細いバナーを入れたいのですが、どのように設定すればよろしいでしょうか？先にご案内差し上げた、バナー設置君をご利用いただくと便利です。https://ec-masters.club/fwd3/fixedbannerkun画面下の「商品をかごに追加」ボタン部分は高さが71pxありますので、垂直方向位置にて「下端から」をクリックし、距離を「71」にご設定いただき、上級オプションに含まれる「スマートフォン用ページ対応」にチェックを入れていただくと「商品をかごに追加」ボタンの上にバナーを挿入することができます。なお、最初の返信にて、「footer.css」に入れていただくようご案内差し上げた#ipnsh-header { margin-top: calc( 100vw * ( バナー画像の高さ / バナー画像の横幅 ) ); }が、正常に動作しておりません。現在のバナーに合わせて正しい値をご設定いただき、その際は単位の「px」を入れずにご記載ください。現在のバナーですと、「バナー画像の高さ」は200、「バナー画像の横幅」は750となります。

Answer

早速のご回答ありがとうございます。お買い物ボタンの上に入れるバナーを下にスクロールした際に買い物ボタンが消えると同時に独自のバナーも消える仕様にしたいのですが、そういったことは可能でしょうか？

Answer

ECマスターズの田中です。＞お買い物ボタンの上に入れるバナーを下にスクロールした際に買い物ボタンが消えると同時に独自のバナーも消える仕様にしたいのですが、＞そういったことは可能でしょうか？JavaScriptによる処理を加えると可能です。最初に、下記の内容をテキストエディタ（メモ帳など）に貼り付けた後、ファイル名の末尾を「.js」にし、外部JavaScriptファイルとして保存の上、楽天GOLD内に設置してください。===== この下の行から ============jQuery(function($){$(window).scroll(function(){$('body #fixedBanner').css('display',$('#floatingCartContainer.showToFront').length > 0 ? 'block' : 'none');});});===== この上の行まで ============次に、スマートフォン用共通説明文に下記のHTMLタグを貼り付けることで、独自バナーの表示切替を行うことができます。===== この下の行から ================= この上の行まで ============※外部JavaScriptファイルのURLは、実際のURLにご変更ください。

Answer

上記HTMLを入れると「scriptの開始タグがありません」と出るのですが「スマートフォン用共通説明文」は「商品ページ共通説明文」のことで合っていたでしょうか？………（省略）………

Answer

ECマスターズの田中です。申し訳ありません、先の返信にてご案内したHTMLタグにて、終了タグのに、「 =""」が含まれておりませんでしたので、修正を行わせていただきました。「商品ページ共通説明文」のことで間違いありませんので、再度、HTMLタグをコピーの上、挿入していただけますでしょうか。

スマホフリック画像上部にバナー

カテゴリーから探す