やっとわかったサムネイル画像のつくりかた
最近よくみかける、こういうリンク。
とんでもなく参考になりすぎるEvernote使用例 5 ～[図解]@saiut のEvernote「超」情報収集術！！ | OZPAの表4
コレ、どうやったらつくれるの？
私はさっそくGoogleにたずねました。
～4日後～
(｀Д´#)ﾉｼ ~@ ﾏｳｽﾎﾟｰｲ！
どうやら私のパソコンのGoogleは壊れているみたいですね。
かくなるうえは、「HTMLハック」
四苦八苦している私にぴったり。
業務でも大変お世話になっているGoogleChromeの「デベロッパーツール」を使い、
プライベートで大変参考にさせていただいてる「OZPAの表4」を覗かせていただきました。…イヒヒ。
OZPA「ダメっ...！そこ...！」
@OZPAさん、いろいろごめんなさい。
これが本題！はい、どん！
要点をぎゅっとまとめると、「デベロッパーツールで、サムネイル画像を構成しているHTMLを見た」です。
Heartrailsが提供するWebサービスのひとつとして、対象のURLを瞬時にサムネイルするというものがあるようです。
HeartRails Capture | サムネイル画像／PDF ファイル作成サービス
ふむふむこれですね！
使い方は、超絶カンタン。
imgタグのsrc属性に
http://capture.heartrails.com/150x130/shadow?（サムネイルにしたいURL）
と指定するだけ。
サムネイルになった時のサイズや、影なども指定できるようです。
GoogleChromeの拡張機能「CreateLink」にテンプレートを登録して使っています。
あとは、サムネイルしたいページで、右クリックし、CreateLinkに登録したテンプレートを呼び出すだけで、サムネイル、テキストリンク、はてブ数を表示するHTMLがクリップボードにコピーされますぜ。ムフフ。
「CreateLink」の使い方は以下の記事が参考になります。
Google ChromeでMake Linkっぽいことを実現する『Create Link』が便利ですね | IDEA*IDEA 
サムネイルリンクの説得力は、テキストだけのそれをはるかに上回ります。
みなさんも、ステキなサムネイルリンクをじゃんじゃんつくって、楽しいブログライフをおすごしくださいませ。
新社会人必携、就職・進学祝いに最適、「あっという間に月25万PVをかせぐ人気ブログのつくり方―これだけやれば成功する50の方法」絶賛好評発売中です！
コレ、どうやったらつくれるの？
探索
私はさっそくGoogleにたずねました。
～4日後～
(｀Д´#)ﾉｼ ~@ ﾏｳｽﾎﾟｰｲ！
どうやら私のパソコンのGoogleは壊れているみたいですね。
かくなるうえは、「HTMLハック」
四苦八苦している私にぴったり。
業務でも大変お世話になっているGoogleChromeの「デベロッパーツール」を使い、
プライベートで大変参考にさせていただいてる「OZPAの表4」を覗かせていただきました。…イヒヒ。
OZPA「ダメっ...！そこ...！」
@OZPAさん、いろいろごめんなさい。
透視
これが本題！はい、どん！
要点をぎゅっとまとめると、「デベロッパーツールで、サムネイル画像を構成しているHTMLを見た」です。
capture.heartrails.com
Heartrailsが提供するWebサービスのひとつとして、対象のURLを瞬時にサムネイルするというものがあるようです。
ふむふむこれですね！
使い方は、超絶カンタン。
imgタグのsrc属性に
http://capture.heartrails.com/150x130/shadow?（サムネイルにしたいURL）
と指定するだけ。
サムネイルになった時のサイズや、影なども指定できるようです。
GoogleChromeの拡張機能「CreateLink」にテンプレートを登録して使っています。
あとは、サムネイルしたいページで、右クリックし、CreateLinkに登録したテンプレートを呼び出すだけで、サムネイル、テキストリンク、はてブ数を表示するHTMLがクリップボードにコピーされますぜ。ムフフ。
<a href="%url%" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?%url%" alt="" width="150" height="130"></a>
<a style="color:#0070C5;" href="%url%" target="_blank">%htmlEscapedText%</a>
<img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" alt="" style="">
<br style="clear:both;">「CreateLink」の使い方は以下の記事が参考になります。
サムネイルリンクの説得力は、テキストだけのそれをはるかに上回ります。
みなさんも、ステキなサムネイルリンクをじゃんじゃんつくって、楽しいブログライフをおすごしくださいませ。
新社会人必携、就職・進学祝いに最適、「あっという間に月25万PVをかせぐ人気ブログのつくり方―これだけやれば成功する50の方法」絶賛好評発売中です！
