Connection start...

blog

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


クリエイティブ性の高いサイトを掲載している 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;
}
といった感じで設置。

Delicious

Name*
Company
E-mail*
Select*
  • 問い合わせ
  • 制作依頼・お見積もり
  • 営業・宣伝
  • その他
Message*

※サービスやツールなどの営業・広告・紹介・宣伝はおやめください。

Close