facebookから「〜さんがあなたの写っている写真にタグをつけました」のようなメッセージを受けたので、その写真を除いてみたら、fbのタグとは、はてブにあるようなタグ(keyword)ではなく、吹き出しのことを指すみたい。
はてなphotolifeには、このような機能はない気がしますが、確かに分かりやすい。
で、htmlというかスタイルシートによる吹き出しのは実装したことがありませんが、次のように書くと良いみたい。
ポイントは、2重のborderとnegativeマージン。
html
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="common.css" rel="stylesheet"> </head> <body> <div class="container"> <img id="test_img" src="user.jpg"> <span class="pop_tag"><span class="pop_tag_body"> ここは吹き出し(コメント、タグ)です </span></span> </div><!--.container--> </body> </html>
body { padding: 1px; background-color: #F5F5F5; } /* http://terkel.jp/archives/2009/12/css-only-speech-bubbles/ */ .pop_tag { position: absolute; top: 60px; left: 50px; border-left: 10px solid #FFB119; border-top: 10px solid transparent; -border-top-color: white; } .pop_tag_body { float: left; padding: 5px 10px; margin: 0 0 0 -30px; border: 2px solid #FFB119; background: white; text-align: center; color: black; position: relative; }