楽天ショップのリンク付きの縦バナーを設置する方法

楽天ショップのリンク付きの縦バナーを設置する方法

まずbody直下に

<div id="length_banner">
<a href="リンク先URL" target="_blank"></a>
</div><!-- /.length_banner -->

を挿入します。

そして縦バナーをCSSで表示させる設定です。

#length_banner a{
background:url("") repeat-y scroll 0 0 transparent;
display: block;
width: 縦バナーの横幅;
position: absolute;
left:0;
top:0;
min-height: 100%;
}

ポイントはmin-heightでこれで親要素であるbodyと同じ高さになるので
他のサイトで紹介されているような高さを指定してページによってはバナーが切れてしまうことはないです。

お役に立てれば幸いです。

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

コメントを残す




関連記事

IE8以下でCSSで背景を指定したのに全く表示されない時にチェックしておきたいポイント
Web制作にルーチンワークに便利!Googleスプレッドシートを利用した簡単html生成法
最近残りやすくなったな~って感じるWEB製作者の皆様!Clear Cashがめっちゃ便利と強く言いたい!
PC・スマホでMedia Queriesを使って個別にCSSを読み込ませる方法(IE対策済み)
これだけあればOK! WEB制作で必須の簡単なURLを入れるだけでダミー画像が作れるWebサービス3選
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
[IE対策]IEでfade効果などをさせた場合のPNG画像が透過されない(黒くなる)時の対処法
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
Sublime Text 2で自動補完してさらさら~っとHTMLやCSSを記述する方法
GitHubGistでWhoops.と表示された時の対処法
IE7でdisplay:inline-blockを適用させる方法
WordPressをインストールしたディレクトリと同じ階層にindex.htmlがある時の開発準備TIPS
Webサイトを制作したらしておくべきチェックリスト
IEチェックでの修正に必須!IEの条件分岐&IE7やIE8などのCSSハック一覧をまとめてみました。
Web制作者に必須のFTPクライアントソフト!FileZillaのメリットとは?

Menu

HOME

 TOP