リンクも出来る!コピペでOK!楽天ショップ用「縦バナー」最強版

公開日: 

最強版と書きましたが、「何をもって最強と言っているんだ」「誇大表現じゃないのか」「俺のほうが強えから勝負だ!」などのご意見はとりあえずご容赦下さい。「当社比」または「独自の調査による」って魔法の言葉で何卒ご勘弁を。

そのうち「最強版2」とか「続・最強版」とか「最強版ZXターボ」とか出てくる可能性もありますが、そちらもあわせてご勘弁願えれば幸いです。ちなみに「最終セール」を何度もやったり、「閉店セール」を8年間続けたりというオオカミ少年的な行為は、お客様の信頼を著しく損ないますので、絶対にやってはいけません。

遂に登場!リンクの出来る縦バナー

縦バナー隆

書く書くって言って全然書いてませんでしたが、準備はしていたんです。勉強しなさいって怒られた瞬間の中学生みたいな言い訳ですが、本当です。本当に途中までは書いていたんですが、夏なので誘惑が多くて完成させられなかったんです。

そして今、他にやる事がいっぱい過ぎて現実逃避の一環でこれを書いているのです・・・。

戯言はソレくらいにして、本題ですが、縦バナーにリンクを張るのに苦労している人は結構多そうですが、そのほとんどの人はこれを理解していないから苦労しているんです!

<a>はインライン要素である

リンクを張るのに使う<a>タグはインライン要素といって、文章の一部として扱われるので、その中にブロックレベル要素(divとかpとか)を含むことが出来ません。

正しい <div><a href="hoge.htm">どこかのサイト</a></div>
誤り  <a href="hoge.htm"><div>どこかのサイト</div></a>

縦バナーは基本的に繰り返しで表示されるので、CSSを使って背景画像として表示されます。なのでその画像にリンクを張るのでは無く、画像が表示される領域にリンクを張りたい。でもその領域はブロックレベル要素なので<a>タグが使えない。じゃあ中にリンクを張るんだけど<a>タグはインライン要素なので幅や高さの設定が出来ません。

じゃあどうしよう。そうだ「display:block」だ!

CSSのdisplayプロパティでblockを指定するとブロックレベル要素として扱われます。そのため幅や高さの設定ができる様になり、入れ物の中にいっぱいに広がる<a>要素が設置可能となるのです。

display:blockのイメージ

「実際にやってみよう!」コピペで設置可能です。

まずは縦バナーの入れ物をHTMLでページに記載する。 下記コードのURLをリンク先のURLに置き換えて、GOLDページや楽天RMSのデザイン設定→ヘッダー・フッター・レフトナビ→テンプレートなどにコピペする。

<div class="link" id="tbl"><a href="リンク先のURL"></a></div>
<div class="link" id="tbr"><a href="リンク先のURL"></a></div>

CSSはこんな感じ。linkってクラスのa要素にdisplay: blockの指定がしてあり、widthとheight共に100%で指定してありますが、これが今回のキモです。 ( ´Д`)キモッ

@charset "utf-8";
/* CSS Document */
.link {
	position: absolute;
	width: 80px; /*縦バナーの横サイズに合わせる*/
	width: 100px;
	top: 0px;
	min-height: 100%;
	z-index: 0;/*重なり順の設定大きい数字程上になる*/
	height: 3000px;/*ページの長さによって調整する*/
	visibility: visible;/*縦バナーの表示・非表示(hidden=消す、visible=見せる)*/
}
#tbl {
	left: 20px;
	background: url(ban_left.gif) repeat-y scroll;/*縦バナー左の画像URL*/

}
#tbr {
	right: 20px;
	background: url(ban_right.gif) repeat-y scroll;/*縦バナー右の画像URL*/
}
div.link a {
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

/*小さいモニタの場合非表示にする*/
 @media screen and (max-width: 1220px) {
.link {
	visibility: hidden;
}
}

CSSの一番最後に@media~という見慣れない記述がありますが、これは「横幅が1220px以下のブラウザやデバイスで見た時に縦バナーを隠す」という内容です。この記述が無いと、小さい画面でページを見た時にページの内容と縦バナーが重なってしまい、お買い物かごに商品が入れられないなどの不具合が発生する場合があります。1220pxの部分は設置するページの幅等によって修正してお使い下さい。

まとめ的な何か

どうでしょう?思ったほど難しくないのでは?これで「ポイント10倍!」や「24時間タイムセール」などお祭り感の演出はバッチリです。実際の店舗で言えば、店先や駐車場に「のぼり」が並んでいるようなものでしょうか。道行く人は「おっ!なんかやってる?」と足を止めて商品を見てくれるはず。

その後で重要なのは、商品を売っている売り場(ページ)であり、商品やサービスそのものの価値だと思います。「大売出し」ってのぼりがたくさんあるのに、店に入ってみたら店員もいなければ商品も並んでいないなんて状態だったら売れるわけがありません。

見た目だけにとらわれず、お客さんが買いやすいお店作りを心がけましょう。

それではまた。

コメント

  1. やっと何とか より:

    さっそくコピペしてやってました。

    ところが、

    プレビューだと、縦バナーが左右表示されず!

    「あれ、だめなのか」と思い、

    いろいろいじったてみたのですが、

    プレビューではやっぱりバナーが表示されません。

    「うちはカスタマイズしすぎだから、

    だめなのかなぁ」と思いながら、

    念のため、テンプレートを自動選択の設定にして、
    プレビューでは非表示なのに、

    実際のページではちゃんと表示されておりました!!!

    リンクもちゃんと貼れてました。

    プレビューでは何故バナーが表示されないのか?

    ほんとに不思議なのですが、

    とにかく、

    ありがとうございました!!!

    • ハカセ より:

      やっと何とかさん
      コメントありがとうございます。少しでもお役に立てて何よりです。これからもよろしくお願いします。
      そしてやっと何とかさんのコメントにより、このコメント欄のCSSの設定に問題がある事が発覚しましたw重ねてお礼を言わせて頂きます。
      うーん。どうやって直そうか・・・。

  2. やっと何とか より:

    ハカセ

    ご返事をありがとうございました。

    今現在、上記cssを活用させていただいておるのですが、
    使っていてひとつわかった事があります。

    z-index: 0;/*重なり順の設定大きい数字程上になる*/

    現状、0にしていると、
    ページ最上部の楽天のブロック(左端の楽天のロゴとか「楽天トップへ」とか、
    右端の「ヘルプ」「kobo」の帯より縦バナーが上にきちゃうんですね。

    0ではなく、マイナスの値にすると、
    縦バナーは楽天のブロックより下になります。

    下になるのですが、リンク機能がなくなります。

    少なくとも当店の場合は、
    z-indexの値が0以上でないと、リンク機能がなくなるようなので、
    今は0で使っております。

    以上、ご報告まで。

  3. やっと何とか より:

    ありゃ、コメントがまだ、あれですね。^^;
    これは、、、うーん、、、
    でも、自分もうまくいかない事が多すぎなので、心中お察しいたします。

  4. 楽天シュークリーム より:

    まずは縦バナーの入れ物をHTMLでページに記載する。

    って書いてありますが

    どこのページに記載するんですか?

  5. ハカセ より:

    楽天シュークリームさん
    コメントありがとうございます。

    縦バナーを設置したいページに記載して下さい。
    商品ページやカテゴリページでもいいですが、
    全ページまたは複数のページに設置したいのであれば、
    デザイン設定のヘッダ・フッタレフトナビなどに設置するのがお勧めです。

  6. できましたー! より:

    できましたー!
    できましたー!
    ありがとうございますー!!!

  7. ちまなこパラダイス より:

    お世話になってます。
    縦バナー設置問題なく出来ましたが、小さいモニタの場合非表示だけが適用されず、ノートパソコンだと縦バナー邪魔で見づらいというお声が多数・・・。
    なにか考えられる原因を教えて頂けますでしょうか?最大のpxを調整しても適用されませんでした;

    • ハカセ より:

      ちまなこパラダイスさん
      該当のページのソースコードを見ていないので、
      なんとも言えないのですが・・・
      CSSの下記の部分の表記が間違っている可能性があるので
      再度確認して見てください。
      (コピペミスで文字が足りない、クラスの指定がまちがっているなど)

      /*小さいモニタの場合非表示にする*/
       @media screen and (max-width: 1220px) {
      .link {
      	visibility: hidden;
      }
      }
      

      それ以外の理由はページを見てみないと何とも言えません・・・
      よろしくお願い致します。

Your Message

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

Twitter

ページ先頭に戻る