楽天ショップで左右別の縦バナーを設置する-その2初級編

公開日:  最終更新日:2013/07/17

アクセスの少ない(記事が少ないとも言う)当ブログにおいてもっとも需要がありそうなエントリーがこちら 楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻 楽天ショップでページの左右に別々の縦バナーを設置する方法 楽天のショップを運営している人で、「縦バナー」の設置で困っている人は意外に多いようです。自分も右も左もわからない状況で店舗運営の担当者にされて、かなりの試行錯誤をした記憶があります。 試行錯誤の経験ももちろん後々生きてくるのですが、時間に追われるネットショップの店舗運営担当者のために、簡易ながらもすぐに設置できる様に改めてこの記事を用意してみました。誰かの役にたったら嬉しいです。

用意するもの

縦バナーの画像(左右それぞれに必要) 下記ソースをメモ帳などにコピペしておく
<style type="text/css"><!--
.tban {
	visibility:visible;             /*消したい時はhiddenに変更*/
	height:2000px;                  /*高さを設定*/
	_height:2000px;
	min-height:100%;
	width: 100px;                   /*画像の横幅に合わせる*/
	z-index: -1;                    /*ページの背面に廻る様に*/
	position: absolute;             /*位置調整用です*/
	display: block;
	top:0px;                 /**/
	list-style:none;
	}
#t_left{
	 left:20px;                      /*左側に20pxの隙間を空けます*/
	 background: url(「画像のURL」) repeat-y scroll;/*左のバナー画像URL*/
        }
#t_right {
	 right: 20px;                    /*右側に20pxの隙間を空けます*/
	 background: url(「画像のURL」) repeat-y scroll;/*右のバナー画像URL*/
	 right: 20px;                    /*右側に20pxの隙間を空けます*/
        }
--></style>

実際の作業の流れ

用意した画像をR-cabinet(GOLDでも可)にアップする アップした画像のURLをメモ帳にコピーしたソースの「画像のURL」部分と置き換える source_mihon URLを置き換えたソースをページに貼り付ける(一番上など解りやすい部分でOK)

最後に

こちらの記事は初級編で、とりあえず設置出来ればOKと言う方向けに書いています。そのため、バナーのサイズや位置を調整したり、全ページに一度に反映したり、表示非表示を簡単に切り替えたり、縦バナー自体にリンクを設定したりという事は考慮していません。 上級編は近いうちに記事にしますので、少々お待ちください。また、こんな事に困っているなどコメント頂けると対応するかも知れません。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. みい より:

    博士様
    ご丁寧に教えて下さってありがとうございます。楽天市場のトップページに店舗ブログを貼りたいのですが教えて頂けますか?就職先でhp の管理から、楽天市場、Yahoo!ショップ全部しています。お時間ありましたら、御指導よろしくお願い致します。

    • hakase より:

      みい様コメントありがとうございます。
      店舗ブログを貼り付けたいとの事ですが、「店長の部屋Plus+」でしたら、
      楽天より新着記事用ウィジェットが公開されています。
      https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=service/tenchonoheya/1-8.html&s=&param2=0
      (要RMSログイン)

      その他の外部ブログだとリンク不可(外部リンクとして規約違反)ですのでご注意下さい。
      その他にはFacebook連携サービス(楽天S4)を契約して連動させる手もありますが、
      残念ながら私には経験が無くてよくわかりません・・・。

      「店長の部屋Plus+」に関してはそのうち詳しい記事を書いてみようと思います。
      よろしくお願い致します。

  2. みい より:

    博士様
    こんばんは。御返事頂きありがとうございます。店長の部屋へ行ってみます。これから沢山質問してもいいですか?Dreamweaverの受講が終わり、まだまだ、駆け出しの初心者です。就職先がホームページビルダーで扱い方が分からなくて困っています。楽天市場、Yahoo!ショップもjavaスクリプト設置可能でしょうか?全くの初心者ですみません。ありがとうございます。

    • hakase より:

      みい様
      コメントありがとうございます。
      経営者の方は「絵がうまそうな奴」「「PCに詳しそうな奴」「ヤル気がありそうな奴」「若いやつ」「その辺にいたやつ」をネットショップの担当者にするものです(笑)。
      お仕事大変でしょうが、やりがいのある仕事だと思いますので、頑張ってください。

      私はネットショップ運営をしている方のお手伝いを仕事にしていこうと思っていますので、質問などは大歓迎ですが、個別の質問にすべて答えられるとは限りません。あまり期待せずに軽い気持ちでお願いします(笑)

      需要が有りそうだと思った場合は記事にして説明をするかもしれません。

      ちなみにヤフーショッピングではJavaScriptは使用出来ません。CSSもstyleタグが使えないのでインラインでの記述が必須だったはずです。(うろ覚え)

      よろしくお願い致します。

  3. みい より:

    博士様
    おはようございます。いつもありがとうございます。
    今日も質問ですみませんが、楽天市場トップページにレビューを置きたくて何度か楽天の説明を受けながらやっているのですが、フレームは載せれるのですが、インラインフレームの中のリンクが上手くいかなくてレビューが入ってくれません。また、お時間ございます時に教えて頂けますか?
    いつもご迷惑おかけしてすみませんが、よろしくお願い致します。

  4. […] みいさんよりコメントでリクエストがあったので、需要があると判断し手短に説明してみます。 […]

  5. hana より:

    始めまして。
    突然の質問で申し訳ありません。

    縦バナー設置の方法をさがしてこちらに来ました。
    一番シンプルな、片側に置くだけ、のコピペはできたのですが、
    両側に設置する方法がリンクあり、なし、ともに画面に何もでません。
    もしくは出た場合、左上に一番上の切れ端のようなものが10px分くらいだけ2つぶん縦に並んでこそっとでます。
    問題点と解決策がおわかりになれば教えて下さい!
    ※一時CSSを独学で勉強してましたがRMSでは面倒になって数年いじってませんでした。
    何が悪いやら、何を書き込んでいるやらよくわかってない状態です。

    • ハカセ より:

      hana様
      コメントありがとうございます。
      表示出来ないとの事ですが、現在の状態がわからないと、原因の特定はちょっと難しいです。
      出る場合と出ない場合の違い(ブラウザの種類なども)などが分かると解決の糸口が見えるのですが・・・。
      どうしてもお困りでしたら、このサイトのCONTACTの部分から設定したページのURLなどを送って頂けるとアドバイス出来るかも知れません。
      (コメント欄だとみんなに見えちゃうので)
      よろしくお願い致します。

  6. hana より:

    ありがとうございます。とりあえず一旦諦めて(苦笑)、縦バナーひとつをまずは導入してみました。あの長い経てばなーってイメージとしてはあんまり好きではないんですw。というか、なんか崩れてるけど?てお店結構あるんで嫌なのかも。イベントの時に短期間だけやってみたかったので、またチャレンジして解決できなかったらcontactからお願いするかもしれません。その時は、よろしくお願いします!

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る