ShareHtmlのサムネイル画像をアレンジする

ブログを書く方には必須のブックマークレットのひとつが『ShareHtml』です。紹介したいサイトのサムネイル画像とタイトル、URLやコメントを付けたHTMLコードをカンタンに作成できるツールです。

ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記

【ShareHtmlの例】サムネイル画像、タイトル、URL、範囲選択したテキスト、入力コメント

アップル – OS X Mountain Lion – Macの新しい使い方が、こんなにたくさん。
OS X Mountain Lionは、iPhone、iPad、iPod touchでおなじみの画期的な機能の数々をMacでも使える ようにします。iMessageでメッセージを送る。MacでGam …
ついに出たMacの次世代OS『OS X Mountain Lion』をリリース初日にインストール。通知センターや音声入力、リマインダーなどこれまで以上にiPhoneとシームレスにつながります。


ShareHtmlはBookmarkletメーカーでテンプレートが複数用意されていますが、サムネイルにもう少しアレンジを加えることができます。たとえば、上の例はサムネイル画像をテンプレートにはないサイズに変更しています。

ShareHtmlメーカー

Bookmarkletメーカーでテンプレートを選択すると、”Bookmarkletを生成する”前にテキストエリアでカスタマイズすることが出来ます。


スクリーンショット 2012-07-27 8.38.43 PM

カスタマイズ前の<左サムネイル大-align>テンプレートHTMLコード

<a href="${posturl}" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150×130/shadow?${posturl}" alt="" width="150" height="130" /></a><a style="color:#0070C5;" href="${posturl}" target="_blank">${posttitle}</a><a href="http://b.hatena.ne.jp/entry/${posturl}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/${posturl}" alt="" /></a>${postselect}${memo}<br style="clear:both;" /><br>

サムネイル画像は HeartRails Capture | サムネイル画像/PDF ファイル作成サービス を使っているので、このAPIが指定するようにURL(上の赤字の部分)を変えてやることでアレンジが可能になります。

HeartRails Captureの画像APIの構造

http://capture.heartrails.com/サムネイル画像サイズ/デコレーション/背景色?対象サイト

サムネイル画像サイズ
(Width)x(Height)

デコレーション
shadow(シャドー)、round(角丸)、border(枠線)

背景色
bg=RBG6桁

HeartRails Captureの画像APIを使ってアレンジ

ShareHtmlの基本テンプレートは画像サイズとShadowのみですが上記のAPIのパラメーターを指定することでアレンジができます。

【画像サイズをW250xH150にしてシャドーを付けた例】
http://capture.heartrails.com/250×125/shadow/round?http://daisukeblog.com
18345983_250x125

【画像サイズをW250xH150にしてシャドーと枠線を付け背景色を変える例】
http://capture.heartrails.com/250×125/shadow/border/bg=eaeaea?http://daisukeblog.com
18345983_250x125-1

round(角丸)とborder(枠線)はイマイチな感じですが、画像サイズを自由に変更したり、shadow(シャドー)を付けた時の背景色はブログのテーマに合わせることができるので便利かもしれません。ご自分のテーマや紹介スタイルにあわせてアレンジを加えてみてはいかがでしょう?

サムネイル画像のサイズ指定の注意点

画像サイズには許容範囲があるようで、縦横の比率で弾かれるケースがあります。ShareHtmlでサイズを指定する前に、上記の構造にあわせたURLをブラウザのアドレスバーに入力してテストしてみましょう。対応範囲外だと以下のような画像が出ます。

small_error

それから、画像サイズを変えたら、ShareHtmlのテンプレートのimgタグにあるwidthとheightも合わせて変更してください。