淡路島のクマ
はてなブログから直接画像にスターを付加できるようなのを作った。(現在のところ、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;}