ブログなどで簡単にスクリーンショットつきリンクを貼る方法

このブログでよく使っている、スクリーンショットつきリンク。

【子どもと暮らしてみぃつけたっ】

テキストだけのリンクより、リンク先のサイトの内容がつかみやすいですし、画面も華やかになっていいですよね。

HeartRails Capture

このスクリーンショットの生成には、こちらのサービスを利用しています。

【HeartRails Capture | サムネイル画像／PDF ファイル作成サービス】

アドレスを入れるだけでシンプルなスクリーンショットつきリンクが生成されますし、カスタマイズもいろいろできる、便利なサイトです。
リンクコードが公開されていて、いちいちこちらのサイトに行って生成しなくても利用できるのがありがたい。

この機能を使って、ブラウザでWebサイトを見ながら簡単にサムネイルつきコードを生成する方法を考えました。

FireFoxアドオン Make Link

【Make Link :: Add-ons for Firefox】

こちらのアドオンをFireFoxにインストールします。
このアドオンは、Webページを見ながら右クリック→「Make Link」を選ぶと、指定した形式でのリンクテキストを生成してくれるというもの。
ブログやTwitterなどでサイトを紹介するのにお役立ちです。

このアドオンの機能を使って、スクリーンショットつきリンクのコードが生成されるようにします。

まず右クリック→「Make Link」→「設定」でオプション画面を開き、「新規」をクリック。
名前は適当に付けてください。
「フォーマット」のところに、以下のように記述します。（横400ピクセル×縦300ピクセル、枠線あり、シャドウあり、角丸なしの場合）

<a href="%url%" target="_blank">【%text%】</a><br /><a href=
"%url%"><img title="%text%" alt="%text%" 
src="http://capture.heartrails.com/400x300/shadow/border?%url%" 
width="400" height="300" /></a>

<a href="%url%" target="_blank">【%text%】</a><br /><a href=

"%url%"><img title="%text%" alt="%text%"

src="http://capture.heartrails.com/400x300/shadow/border?%url%"

width="400" height="300" /></a>

※記事内に収める為に適当に改行していますが、実際は改行がないほうがいいかも。

実際に使用すると、「%url%」の部分はアドレスに、「%title%」の部分はページのタイトルに置き換えられたリンクコードがコピーされるので、ブログ編集画面などにペーストすればOK。（WordPressの場合はビジュアルモードでなくテキストにすること）

これで、このページでも使用しているような、テキスト＋スクリーンショットでのリンクを簡単に貼ることができます！