リンクも出来る!コピペで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>要素が設置可能となるのです。
「実際にやってみよう!」コピペで設置可能です。
まずは縦バナーの入れ物を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時間タイムセール」などお祭り感の演出はバッチリです。実際の店舗で言えば、店先や駐車場に「のぼり」が並んでいるようなものでしょうか。道行く人は「おっ!なんかやってる?」と足を止めて商品を見てくれるはず。
その後で重要なのは、商品を売っている売り場(ページ)であり、商品やサービスそのものの価値だと思います。「大売出し」ってのぼりがたくさんあるのに、店に入ってみたら店員もいなければ商品も並んでいないなんて状態だったら売れるわけがありません。
見た目だけにとらわれず、お客さんが買いやすいお店作りを心がけましょう。
それではまた。
さっそくコピペしてやってました。
ところが、
プレビューだと、縦バナーが左右表示されず!
「あれ、だめなのか」と思い、
いろいろいじったてみたのですが、
プレビューではやっぱりバナーが表示されません。
「うちはカスタマイズしすぎだから、
だめなのかなぁ」と思いながら、
念のため、テンプレートを自動選択の設定にして、
プレビューでは非表示なのに、
実際のページではちゃんと表示されておりました!!!
リンクもちゃんと貼れてました。
プレビューでは何故バナーが表示されないのか?
ほんとに不思議なのですが、
とにかく、
ありがとうございました!!!