2009年06月10日

はてなの引用ブロックを真似てみた


「>>」だけの行と、「<<」だけの行で段落をはさむと、その部分が引用文だということを示すことができます。


はてなの引用ブロックが良いなーっと思ったので、<blockquote>をjQueryで似たような感じにパクろうと実装してみようと。

◆script(javascript,css)

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.3");</script>
<style type="text/css">
blockquote {
background:#AADDAA;
border:1px solid #228822;
color:#232323;
margin:2.5em 3.5em;
padding:0;
}
blockquote p{
margin:0.75em;
}
blockquote cite{
background-color:#FFFFFF;
border-top:2px dashed #667766;
color:#232323;
font-style:normal;
margin:1em 0 0;
padding:0.1em 0.3em;
display:block;
text-align:right;
}
</style>
<script type="text/javascript">
$(function (){
$("blockquote").each(function(){
//元の文章を段落で囲む
$(this).html("<p>"+$(this).html()+"</p>");

//-----引用先を表示-----//
var strCite = "<cite>";
strCite += "<a href='"+ $(this).attr("cite") + "' target='blank'>";
strCite += $(this).attr("title");
strCite += "</a>";

if(($(this).attr("bookmark")==undefined)||$(this).attr("bookmark")=="ON")
{
strCite += "<img src='http://b.hatena.ne.jp/entry/image/normal/";
strCite += $(this).attr("cite") + "'>"
}
strCite += "</cite>";
$(this).html($(this).html()+strCite);
});
});
</script>

◆html

<blockquote title="はてなダイアリーのヘルプ:引用ブロックを作る(引用記法)" cite="http://hatenadiary.g.hatena.ne.jp/keyword/%E5%BC%95%E7%94%A8%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%88%E5%BC%95%E7%94%A8%E8%A8%98%E6%B3%95%EF%BC%89" bookmark="ON">
「>>」だけの行と、「<<」だけの行で段落をはさむと、その部分が引用文だということを示すことができます。
</blockquote>

◆<blockquote>の指定
要素
title引用部にリンク付きで表示される
cite引用先のURL。titleのリンクに使用
bookmark"ON"または未記述で、はてブの数を表示("OFF"で未表示)


posted by purigen at 00:07| Comment(1) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
$(this).html("<p>"+$(this).text()+"</p>");

$(this).html("<p>"+$(this).html()+"</p>");
に修正しました。
Posted by purigen at 2009年06月14日 02:17
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。