日直地獄

小学校では事件が起きる

はてなブログに載せた写真にその場でスターをつけられるようにした

f:id:AirReader:20120522103130j:plain淡路島のクマ
はてなブログから直接画像にスターを付加できるようなのを作った。(現在のところ、chromeでしか正常に動作しないようです…)

ブログに良い写真が掲載されているときに、写真にスターをつけたいと思うことがある。しかし、写真にスターをつけようと思ったら、写真をクリックしてフォトライフを開いて再度写真を読み込んで、みたいな手続きを経ないといけない。結構億劫な作業だと思う。
フォトライフには人気写真のシステムがあるけど、実際に写真が目に触れるであろうブログやダイアリーからスターがつけにくいのでもったいないなと思っていた。

なので、こういうのを作りました。

仕様

  • フォトライフ記法で貼り付けられた画像にマウスカーソルを載せると画像の下部にキャプションがニュッと出てきます
    • キャプション表示部分は、captifyというjQuaryプラグインを改変して利用しました
  • フォトライフ記法の後ろに以下のように書くと、キャプションの内容を変更できます
<span class="capt">タイトルです</span>
    • キャプションの内容が指定されていない場合は、”この画像にスターをつける”という文言が表示されます

利用方法

サイドバーモジュールのHTMLモジュールを追加し以下のコードを貼り付ける
<script type="text/javascript" src="http://dl.dropbox.com/u/673184/fotolifeCaption/fotolifeCaption.js"></script>
デザインCSSに以下を追加
/* caption styling */
.caption-top, .caption-bottom {
	color:#fff;   
	padding:1.2em;   
	font-weight:bold;
	font-size:11px;
	cursor:default;
	border:0 solid #334143;
	background: #000000;
}
.caption-top {
	border-width:0 0 8px 0;
}
.caption-bottom {
	border-width: 8px 0 0 0;
        opacity: 0.5;
}
.caption a, .caption a {
	border:0;
	text-decoration:none;
	background:#000;
	padding:.3em;
}
.caption a:hover, .caption a:hover {
	background:#202020;
}
.caption-wrapper {
	float:left;
}
#images span { font-size:1.2em; }
.capt { display: none;}