はてなブログの記事内に外部ブログ（サイト）のリンクを貼る際に「サムネイル画像」付きにする方法
いろいろなブログを拝見してると、外部ブログ（サイト）へのリンクに格好いいサムネイル画像が表示されているのをチラホラと見かけて気になったので、ググって調べてみました。
見つけたサイトはこちら
リンクしたいブログ（サイト）のURLを「記事URL」欄に入力して「コード出力」ボタンをクリックすると、下の「出力コード」欄にHTMLのコードが出力されます。このコードをブログ記事にコピペしたら、サムネイル画像付きのリンクが完成します。
こんな感じに表示される
リンクを設置したいサイトやブログが「はてなブログ」の場合には、サムネイル画像とタイトルとはてブ数に加えて、リンク先ブログの最新記事の最初の文章を取得して表示します。（下のサンプルは当ブログです）
「そういえば最近iPhoneアプリ開発について何もやってないなー」と思いつつ「ほとんど忘れてしまったから改めて基本から学びたいなー」とか思いつつ「そうだ、最近は...
リンクを設置したいサイトやブログが「はてなブログ」以外の場合には、サムネイル画像とタイトルとはてブ数が表示されます。（サンプルはいつもお世話になっているドットインストールさんです）
コピペする「HTMLコード」について
作成した「HTMLコード」をコピペする場合には、はてなブログの記事投稿画面での入力方法を「HTML編集」にする必要があります。とは言っても、最初から最後まで「HTML編集」で記事を書かないといけないわけではなく、コピペする時だけ「HTML編集」にすればOKです。
コピペするとこんな感じになります。ちなみに「<div class ...」から始まって「... </div>」までがコピペしたHTMLコードです。
実際に設置してみる
それでは改めて「はてなブログ記事紹介ジェネレータ」でHTMLコードを作成してみます。
まずは当ブログです。ブログのURLを「記事欄」にコピペして、このブログは「はてなブログ」なので「冒頭を取得」にチェックをつけて、おもむろに「コード出力」ボタンをクリックします。すると下にHTMLコードが出力されます。
はてなブログに戻ってHTML編集画面にします。設置したい箇所を見つけて、コピペしたHTMLコードを貼り付けます。
コピペしたHTMLコードがわかりやすいように、上下に改行を入れました。
さて次にドットインストールさんです。サイトのURLを「記事欄」にコピペして「冒頭を取得」のチェックは外しておいて、おもむろに「コード出力」ボタンをクリックします。すると下にHTMLコードが出力されます。
はてなブログに戻ってHTML編集画面にします。設置したい箇所を見つけて、コピペしたHTMLコードを貼り付けます。
こちらも、コピペしたHTMLコードがわかりやすいように、上下に改行を入れました。
以上で完成です。この記事の上の方にある「サムネイル画像リンク」はこんな流れで作成しました。（一応スクリーンショットを貼っておきます）
個人的な感想
リンク先のサムネイルが表示されるていると、なんとなくイメージできてクリックしやすかったりするは自分だけでしょうか。
ただし、全ての外部リンクをサムネイル付きにすると少々うざかったりするので、使いドコロを考えつつ活用していくのが良いかもしれませんね。
