最終更新日:2018/06/14過去のエントリー楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻この記事に珍しくコメントが付いたので、要望にお答えしてエントリーを追加します。%OFF!」などなど、様々なアピールポイントを訴求したいという場面が結構あります。ページ内の商品を説明している部分に埋め込んじゃうと、ただでさえごちゃごちゃしたページが更にカオス状態になってしまう事も。(カオス化しているページはよく見かけますが・・・)それらの情報を一括でかつスタイリッシュに?訴求するために「縦バナー」を設置している店舗も多いのですが、RMSにその機能は無いため、意外と難易度が高いです。このエントリーでは、WEBデザインの知識があまり無くても左右に別のデザインの「縦バナー」を設置出来るように説明します。(私自身そんなに知識は無いのでおかしな部分があるかも知れませんが・・・)「左右別デザインの縦バナー」設置の流れバナーのデータを用意(もちろん左右別に作る)ページにCSSを記載(またはGOLDにアップしたCSSを読み込む)基本的には過去のエントリー楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻と全くおなじ流れです。一部違うのは、当然ながら右と左のバナー画像のURLを個別に指定しているところです。本職がWEBデザイナーの方であれば常識レベルなのかも知れませんが、私は過去これを実現するのに数日を要しましたw。>ヘッダー・フッター・レフトナビあたりに書いて、使用するページでそのテンプレートを選んであげれば、後の管理が楽チンでおすすめです。一括で表示・非表示の切り替え、画像変更を行うには画像変更は、新たにバナーの画像を用意したら、R-Cabinetにアップロードして、CSSの画像指定のURL部分を書き換えればOKです。ちなみにR-CabinetでもGOLDでも、画像の上書きは反映までにすごく時間が掛かるのでおすすめしません。別名でアップロードし直して、ソースの方を書き換えましょう。表示・非表示の切り替えは、CSSの8行目あたりにvisibility:hidden;の1行を追加するだけ。再度表示したい時は、hiddenをvisibleに書き換えれば簡単です。楽天ショップで外部スタイルシートを利用する方法も見てね。関連記事-こちらもどうぞネットショップで商品を売るためにHTMLの知識やデザインの能力は「必須」では無い件。18:30ずーっとやりたかったことが、丁寧に説明されているので、大変感激しています。当方、全くの初心者で、使い方がよくわかりません。両サイド同じ画像はコピペでokでした。ご教示お願いいたします。09:03佐川さんコメントありがとうございます。恥ずかしながらコードにミスが有った様なので修正致しました。わかりやすい記事を書いてみます。10:20Hakaseさん大感謝!悩んだいたので助かりました。これからも宜しくお願いします。質問なのですが、両サイドの縦バナーで判りやすいページにすることが出来たのですが、PCの解像度と思うのですが、後ろに回り込んでうまく表示されない場合があります。ズーム表示で縮小すれば何とかなりますが、ズームしても間隔が変わらずに表示される店も見かけます。再度のご教示お願いいたします。11:17佐川さんコメントありがとうございます。-1;という指定をしているためです。この一行を削除するか、-1を10など大きな数値に変えると前面に表示されます。PCの解像度によっては商品説明が見えなくなるなどの不具合があるため、過去にクレームになった事がありますのでご注意下さい。ズーム時の表示やブラウザのサイズ(解像度)によって表示方法を変えるやり方は次回記事にしたいと思いますので、少々(気長に)お待ちください。15:38両サイドに別バナーを表示させる事は、今まで、どうやってもうまくいかなかったのです。goldでデザイン作成しているところは両端に表示させていて、「いいなぁ、うちもgoldで登録してたらなぁ」と。あきらめておりました。それが、またチャレンジしてみようと思い、検索で貴ページに辿り着きました。書かれていたコードをコピペして、試行錯誤しながらやってましたら、ついに別バナーの表示に成功しました。ありがとうございます。16:21やっと何とかさんコメントありがとうございます。私も以前はすごく苦労しました。お役に立てて何よりです。やり方はこれ以外にも色々あって、正解ってのは無いので、色々試してみて下さい。貴店のお客様にとって楽しくお買い物が出来る店を目指して頑張ってください。16:32はじめまして!質問させて頂きます。両側に縦バナーを設置する事は出来たのですが、高さを設定すると、例えば高さを2000pxにするとスクロールさせるとすぐに縦バナーは終わりますよね?で10000pxとかにすると、ページの下までスクロールさせても縦バナーだけが更に下に続くと言った感じになります。18:26双子のパパ様コメントありがとうございます。ご指摘の通り、縦バナーの高さは固定になってしまいます。ページ全体に収まるように出来れば一番なのですが、いかんせんRMSのページに無理やり設置しているものでjavascriptも効かず、解決策が現在のところ見つかっていません。要素のheightを100%にしてあげれば、ページサイズにきちんと収まるはずです。商品ページやカテゴリページと共通で使う場合は、やはり適度なサイズで調整するしかないとオモワレマス。お役に立てずスミマセン。解決策を発見したら、これ以上ない位のドヤ顔で記事にしたいと思いますので、たまにこのブログも覗いてみて下さい。17:00うちだったら、縦バナーをPhotoShopで、画像サイズ1140px×800pxの背景画像に、縦バナー50pX×800pxサイズのものを2つ両端に配置して作りますけど、そのほうが両端に配置しやすいですし、サイトの長さも丁度よく出来るのでお勧めです。ちなみにCSSbody{background-image:url(****.jpg);background-repeat:repeat-y;background-position:center;}これで縦バナーの2つは両端に表示され、しかも画像サイズ1140px×800pxの背景画像がセンタリングされるのでおすすめです。21:19非常に参考になります。ページの長さはまちまちなので、できれば、ページ長さに関係なくリピートする方法をお教えください。08:52かず様コメントありがとうございます。ご指摘のページの長さに関係なくリピートする方法ですが、実は現在でもまだ解決策を見いだせておらず・・・。RMSで作られるページのため色々と制限があり、javascriptを使う方法など色々試してみたのですが・・・。引き続き解決策を模索してみます。23:42楽天のスタンダードで出店してるんですが、上記のように書いても、両端に画像が固定しません。(左しか固定されない)初心者なので、ヘッダには、HTMLを書いているだけ(tableを並べてるだけ)なので、実際、HTMLに書くという部分をどこに書けばいいのかもわかりません。それと、スクロールしていくと、途中で切れるのは2000pxで高さを定義しているからだと思いますが、とりかく右下、左下に違う画像を固定したいです。返信が遅くなり申し訳ありません。質問の内容がよく分かりません。どんなコードを、どこに書いたら、どんな表示状態なのかもう少し詳しく情報を頂けるとアドバイス出来るかも知れません。右下、左下に違う画像を固定→こちらの記事が参考になるかも知れません楽天ショップでページの横に固定で表示されるタブバナーの作り方よろしくお願い致します。コメントをキャンセルメールアドレスが公開されることはありません。*サイトPREV:これからネットショップを始める人へNEXT:ドイツでGoogle法が成立。ハカセの研究室ページ先頭に戻る。