ちょっと洒落たリンクバナーリボンを作ってみました。


クリエイティブ性の高いサイトを掲載している Awwwards のリンクバナーリボンがかっこいいので真似て作ってみました。Twitterとfacebookのカラーを使ったものを取り急ぎ。
実際に3つ並ぶと微妙な印象。
掲載方法はHTML上にdivで囲んだリンク+CSS+画像

HTML
<div id=”掲載したいエリアを指定するID”>
<a href=”リンク先” target=”_blank”>リンク名</a>
</div>
CSS
#掲載したいエリアを指定するID{
top:80px;
right:0px;
width:60px;
display:block;
position: fixed;
z-index:100;
}
#掲載したいエリアを指定するID a{
background-image:url(バナーのリンクパス);
background-position:0px 0px;
background-repeat:no-repeat;
display:block;
float:left;
width:68px;
height:102px;
text-indent:-9999em;
overflow:hidden;
}

といった感じで設置。