最小限のアクションで簡単にシェアできます
ブログのエントリーは今もWordPressの投稿画面で書いてます。りく（@Rikuma_）です。
当ブログでは日報などでブログ記事をシェアさせてもらってます。笑えるエントリー、とても有益なエントリー、ぜひとも読んでもらいたいエントリーなど、いろんな方々に読んでもらいたいなと感じたものは積極的に紹介したい。
当ブログではシェアする際にブログ記事をサムネイル画像付きで表示しています。
リンク用コードは、WordPressの投稿画面（HTMLエディタ）で複数のボタンを自作し、それを駆使して作成しました。5アクションほどかかっていました。
今回紹介するのは、5アクションもの手間などかけず、最小限の操作だけで簡単にシェア用リンクを生成できる方法です。
WordPressプラグイン「BM_Shots」をインストール
まず最初に、WordPressのプラグイン「BM_Shots」をダウンロードし、インストールします。
「BM_Shots」は、指定したリンク先のサムネイル画像を自動取得してくれるプラグイン。URLと画像サイズを指定するだけ。
新たにプラグインを追加したい場合、私は大抵WordPress管理画面の「プラグイン」＞「新規追加」でプラグインを検索してからインストール、という方法でやってます。
しかし、おそらく「BM_Shots」は検索でヒットしません。理由は後述します。
なのでPCなどでプラグインをダウンロードし、ブログを入れているサーバーのプラグイン用フォルダに手動でアップロードしてあげる必要があります。
Chromeエクステンション「Create Link」をインストール
次に、Chromeのエクステンション（拡張機能）である「Create Link」をPCにインストールします。
↑まず「Chromeウェブストア」を表示します。（Chromeの「設定」＞「ツール」＞「拡張機能」＞一番下の「他の拡張機能を見る」でも表示できます）
↑左上の検索欄で「Create Link」と入力し、検索を実行。
↑検索結果が一覧表示されます。私のPCは既にインストール済みなので、緑のチェックも表示されています。
「Create Link」という行の右端にある「Chromeに追加」ボタンをクリック。これでエクステンションがChromeブラウザにインストールされます。
実はこのエクステンション、ずいぶん前にインストール済みだったのですが、一度も使うことなく放置してました。使い方や便利さが全然分かってなかったんですわ。
しかし、以下のエントリーを読み、その便利さと快適さに気付いて、今では活用しまくってます。
↑今回紹介している方法も、上記エントリーで使い方を理解した後、応用させて作りました。大谷さん、大変助かっています。ありがとうございました。
エクステンションでシェア用リンクを登録する
エクステンションをインストール完了したら、「Create Link」のボタンがエクステンションのバーに表示されているはずです。
↑「Create Link」のボタンをクリック、さらに一番下の「Configure」をクリック。
Create Linkの登録画面が表示されますので、「Formats」という所の一番下にある「＋」をクリック。するとコードを新たに追加登録できるようになります。
「Name」はコードの名前。自分が分かりやすいものを入力します。今回私は「HATEBU」で作りました。
「Format」には、以下のように入力しました。
<div class="bshotdetail"><a href="%url%" target="_blank">%htmlEscapedText%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"> <span class="hatebuuser"><img src="http://b.hatena.ne.jp/entry/image/%url%" alt="*" /></span></a></div> <div class="divclear"></div>
↑見やすいように改行してますが、実際は改行なしで登録しています。
これはあくまで「私の例」です。HTMLやCSSなどがお分かりの方は、もっと簡単に効率よいコードで指定できると思います（たぶん私のは下手な組み方です）。私の例だと何をやってるかを簡単に解説していきますね。
1行目はプラグイン「BM_Shots」の指定。この指定だけで紹介したいブログのサムネイル画像を取得できます。「200」という数値はサムネイル画像の幅。数値を大きくすると画像の幅が大きくなります。
2行目から6行目までは、サムネイル画像の右側に表示させる「ブログエントリーのタイトル（リンク付）」と「はてなブックマーク数の画像リンク」の指定。
7行目は、2～6行目で文字をサムネイル画像の右側に回り込ませている（float）ので、その回り込みを解除する指定。
↑こんな風に表示されたら登録完了です。「HATEBU」で登録されてますね。
「Create Link」の使い方
登録が完了したら、さっそく使ってみましょう。
ブログで紹介したいサイトやブログ記事をChromeで表示させ、「Create Link」をクリック。
↑さっき登録した名前が一覧で表示されているはず。私の場合は「HATEBU」です。これをクリックすると、シェア用コードが記憶（コピー）されます。
そして、書いてるブログエントリーの好きな場所に貼り付け（ペースト）すればOKなのですが、見た目も調整したほうがキレイですよね。
CSSで表示を調整します
最後は見た目の調整。WordPressだと「style.css」というスタイルシート（CSS）のファイルがありますので、ここにシェア用リンクの見た目を調整するようコードを追加していきます。
追加の前にバックアップを取っておきましょうね。
/* サムネイル画像 */
div.browsershot img {
float: left;
margin-right: 15px;
}
/* 右側タイトル内の画像、はてブ */
div.bshotdetail span img,
span.hatebuuser img {
float: none;
margin-left: 5px;
}
/* 回り込みの解除 */
div.divclear {
clear: both;
}
↑CSSのサンプルは上のような感じになります。
2～5行は左側に表示するサムネイル画像の指定。記事タイトルなどの文字リンクをサムネイル画像の右側に回り込ませる指定や、左側と右側の間に隙間を指定しています（上の例だと15ピクセルの隙間）。
8～12行は右側の文字リンク内にある「はてブ」画像の指定。記事タイトルのリンクと少しだけ離したかったので隙間を入れています。
8行目の指定はなくても大丈夫ですが、今後「はてブ数の画像」以外に何か画像を使いたくなった時のために備えて付け加えています。
15～17行は回り込みを解除する指定。シェア用リンク以降の文字や画像に回り込みの影響がないよう指定しています。
これで問題なく表示できましたでしょうか。
TIPSその1：サムネイル画像にターゲット指定させる
ここまで書いた方法で上手く表示されたら、実際に表示されたシェア用リンクをクリックしてみて下さい。
右側の記事タイトルをクリックすると、シェアしたブログが別ウィンドウやタブに表示されたはずです。「target=”_blank”」を指定しているので。
「はてブ数」の画像（26 usersなど）をクリックしても別ウィンドウやタブに表示されますよね？
一方、左側のサムネイル画像をクリックすると、同じウィンドウやタブに表示されるはずです。プラグイン「BM_Shots」の初期設定ではターゲット指定が何もないため、同一ウィンドウやタブに表示されてしまいます。
これがもしイヤで、サムネイル画像をクリックした時も別がいい（「target=”_blank”」にしたい）場合は、プラグインをチョコッと変更するだけで解決します。
ただし、プラグインを改造しますので、変更は自己責任でお願いします。バックアップもお忘れなく。
WordPress管理画面で「プラグイン」＞「インストール済みプラグイン」に移動。
↑プラグイン「BM_Shots」の「編集」をクリック。
52行目あたりに、
return '<div class="browsershot mshot"> <a ' . $att . '>' . $image . '</a></div>';
↑という記述があると思います。（上記は改行してますが実際は1行です）
これを、↓
return '<div class="browsershot mshot"> <a ' . $att . 'target="_blank">' . $image . '</a></div>';
↑このように変更すれば、サムネイル画像をクリックしても別ウィンドウやタブに表示されるようになります。
TIPSその2：「BM_Shots」は隠れ機能です
上の方で、プラグイン「BM_Shots」をWordPress管理画面で検索してもヒットしないと書きました。
プラグイン「BM_Shots」で使用している機能は、WordPressの非公式APIを利用しているのだそうです。要するに「隠れ機能」ですね。
だから検索してもヒットしなかったんじゃないかなー、と想像してます。
非公式APIのため、そのAPIサービスが停止・終了すると、「BM_Shots」の機能も使えなくなり、サムネイル画像は表示されなくなるようです。
さいごに
今回はPCのChromeでエクステンション「Create Link」を使い、プラグイン「BM_Shots」を呼び出して簡単にサムネイル画像とはてブ付きリンクを生成する方法を紹介しました。
この機能を使うようになったので、投稿画面でいろんな自作ボタンをアレコレ押してシェア用リンクを作らなくても済むようになりました。すっげーラクチン。
同じようにコードを登録できる機能であれば、たとえばFirefoxで「Make Link」を使ったりだとか、Macだと…ん～Mac知らないから良く分かんないや、とにかくコード登録できるツールであれば同じ事が可能だと思います。
いろいろ応用させて、ブログ更新をどんどんラクチンにさせていきましょう。以上でございます。