注釈で記事を書いてみた＆ポップアップ機能をjQueryで作ったよ！

　*1　*2　*3

　*4　*5　*6

　*7　*8

　*9　*10　*11

　*12　*13

　*14 *15

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7");
google.setOnLoadCallback(function() {
	var popupObj = $('<span></span>');
	popupObj.css({
		'position' : 'absolute',
		'padding' : '5px',
		'background-color' : '#eaeaea',
		'border' : '1px solid #999999',
		'border-radius' : '3px',
		'max-width' : '500px',
		'z-index' : '9999',
	});
	$('body').prepend(popupObj);
	$(popupObj).hide();
	
	$(function() {
		$(".entry-content a").hover(function(e) {
			var annotation = $(this).attr("title");
			$(this).removeAttr("title");
			if (annotation != undefined) {
				popupObj.html(annotation)
						.css({
							'top' : e.pageY,
							'left' : e.pageX + 20,
						});
				$(popupObj).show();
			}
		},
		function() {
			if ($(popupObj).text()) {
				$(this).attr("title", $(popupObj).text());
				$(popupObj).hide();
				$(popupObj).html('');
			}
		});
	});
});
</script>

*1:この記事（ブログで注釈を多用すると読みにくくなることもある - 有限な時間の果てに）を読んで、注釈だけで記事を書いたら面白いんじゃないか？ と考えました。

*2:本当は、何気ない注釈だらけの文章が上にあって注釈を追いかけると深い理解が得られる、というのがいいなと思ったんですが、作るのが難しいです。

*3:そこでとりあえず、注釈内に全部書いちゃえパターンを記事にしてみたいと思います。では、いってみよー！

*4:注釈って、出典を表示するなどで適切に使うと、見やすく説得力のある文ができると思います。

*5:上の記事では「いちいち見に行く必要がある」とありましたが、カーソルを合わせると表示もされますし。リンクなどは動かないため、出典を注釈に書いてあるとそこまで行く必要がありますが、それも押せば飛ぶためスクロールする必要はなかったと思います。

*6:ただ、カーソルを合わせると見えると言っても小さな文字がひょろっと出るだけなので見やすいわけではないですし、もっといい方法がないかなとも思います。

*7:というわけで、作ってみました。このページをPCで読まれている方はもうお気づきかもしれませんが、ブラウザの機能としてのポップアップではなく表示されるようにしてみました。

*8:jQueryを使ってます。コード中のcssの部分をいじれば、見た目も自由自在です。どうでしょう、使えますかね？

*9:使い方は、この記事の最後（注釈が長すぎて半ばに表示されますが）にあるコードを、はてなブログのデザインのフッターのところに貼り付けるだけです！

*10:はてな記法などは効かないことを確認しています。HTMLでリンクを貼っていても、カーソルを離すと消えるので押せません。が、リンク文字列は表示されるようです。

*11:良さそうだったら、適当に使ってみてください。

*12:せっかく物を作ったんだから、もう少しちゃんと記事にすればよかったかなと思わなくもないけど、注釈で記事を書こうというところからのスタートですしね。

*13:カテゴリをネタ記事にしようか、ブログにしようか迷ってます。うーん、スタートはネタだけど、ブログの改造と見ればブログだしな……。

*14:まぁいいや。長くなってきましたし、この辺りで終わります。jQueryで物が作れて面白かったから良かったです。

*15:では、今回はこのへんで。おわり！