2年 ago
5474 Views

楽天でよく見る画面固定バナー設置方法(マウスオーバーで滑らかな動き+画面可変対応)

css

こんにちわ。今日初めて「意識高い系」って言葉を知りましたwこうゆう人いますよね。会社にも…いるようないないような…w
さて、今日は楽天でよく見る画面固定バナーの完全版的な簡単コピペで設置可能なタグ公開です。固定バナーのタグを公開してるとこは多いのですが、動きを滑らかにしてさらに、画面がメインのコンテンツ近くに小さくなった場合にバナーの大きさによっては邪魔になります。なので、画面の可変に合わせて消すタグも入れておきます。
(↓こんな感じで左右どちらか、または両方に入っていたりします。)
exsample_stable_bnr

コピペで簡単に設置できる固定バナーのタグ

■html&CSS

<style type="text/css">
@media screen and (min-width: 400px /*表示させたくない最小の大きさを記入(これはスマホの画面の大きさ)*/){
#sidebanner a{ display: none;}
}
#sidebanner a{
display: block;
background: url("画像URL")/*通常時画像*/ no-repeat scroll 0 0;
width: 70px;/*画像幅*/
height: 190px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
left:0px;
top:240px;
}
 
#sidebanner a:hover{
display: block;
background: url("画像URL")/*マウスオーバー時画像*/ no-repeat scroll 0 0;
width: 70px;/*画像幅*/
height: 190px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
left:0px;
top:240px;
-webkit-transition: width ease-in-out 0.5s;/*マウスオーバーの動く時間を記入して滑らかさを調節*/
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}
</style>
<div id="sidebanner">
<a href="リンク先URL"></a>
</div>

びっくりするぐらい簡単で思わずおもらししそうになりましたね(笑)また簡単シリーズやりたいと思います~(ง ´͈౪`͈)ว

Article Tags:
·
12345 (No Ratings Yet)
Loading...

Comments to 楽天でよく見る画面固定バナー設置方法(マウスオーバーで滑らかな動き+画面可変対応)

  • 初心者ですみません、
    二つ固定バナーを張りたい場合はどうすればよろしいでしょうか?

    名無し 2015年12月11日 10:35 AM 返信
    • 二つ貼りたい場合は、positionの位置をバナーのサイズに合わせてずらせばダイジョブです

      chee のプロフィール写真 chee 2015年12月24日 12:36 AM 返信
  • 左右に2個ずつ設置したいのですが、同じタグを貼って left,rightを変えてみても、片側しか表示されません。すみません、ご教示いただけますでしょうか?

    maron 2016年2月3日 5:34 PM 返信

Leave a Comment

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

Menu Title
ツールバーへスキップ