• HOME
  • HTML/CSS
  • 画像に半透明のキャプションや著作者のクレジットをつけるCSS

画像に半透明のキャプションや著作者のクレジットをつけるCSS

管理人:sofu

自分のホームページに資料用のサンプルとして写真を載せたいとき、Flickrやフォト蔵などの写真共有サイトからとってくる場合があります。
それらの写真の中にはライセンスが付いていて、著作者のクレジットを表示しないと使ってはいけないというものもあります。今回は、そういった場合にCSS（スタイルシート）を使って画像にクレジットを表示するテクニックを紹介します。

画像にクレジットを表示

画像の上下左右に表示するのではなく、画像の上に重ねて表示するので、周りのデザインを崩さないというメリットがあります。

 
<div class="photo">
    <img src="image-caption.jpg" alt="" />
    <cite>Spring came by Hs7th</cite>
</div>
 
 
.photo {
    position: relative;
    display: block;
    width: 400px;
    height: 265px;
}
 
.photo cite {
    padding: 5px;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    background-color: #111111;
    position: absolute;
    bottom: 0;
    right: 0;
    -moz-opacity:.55;
    filter:alpha(opacity=55);
    opacity:.55;
}
 

ホームページのリンクも付ける

クレジットだけではなく、著作者のホームページにリンクして欲しいというライセンスなら、<cite>タグの中に<a>タグを入れてあげれば、雰囲気を壊すことなく簡単にリンクさせることもできます。

 
<cite><a href="">Spring came by Hs7th</a></cite>
 

→著作者のクレジットをつけたサンプル

クレジットだけではなく、画像のタイトルやキャプションを表示させるということもできます。（その場合、普通はalt属性に書くんですけどね）

date 2010.10.26
blog comments powered by Disqus

PageTop