ブログを書いていると他のサイトを紹介する時に画像（サムネイル）付きで紹介リンクを貼りたい時ってありますよね。
でも全部手動でリンクを作ると画像をキャプチャしてアップロードしてURLをコピーしてリンクを貼って、などなどかなりの手間がかかってしまいます。
それをボタン一発で出来るようにするサービスがShareHtmlというWebサービスなんですが今回はShareHtmlよりももっと簡単にサムネイル画像付きリンクを作成する方法を考えてみました。
もくじ
参考：ShareHtmlメーカー
ブロガーの間で画像付きリンクを作ると言えばShareHtmlが有名でしょう。最初の設定のままリンクを作成してもそれっぽいリンクを作ることができます。
たぶん多くのブロガーにとっては使いやすいリンク作成ツールだと思います。
汎用的で使いやすいShareHtmlですが自分の場合はWordPressのビジュアルエディタを使ってブログを書いていてShareHtmlとビジュアルエディタは相性が悪いと感じることがありました。
というのもWordPressにはビジュアルエディタとテキストエディタを切り替えた時に余計な改行などを削除してくれる「自動整形」という親切（大きなお世話）機能があります。
この自動整形機能が悪さをしてShareHtmlのレイアウトが崩れることがあるんですよね。
|
1 |
<a href="http://pasokatu.com/" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?http://pasokatu.com/" alt="" width="150" height="130" /></a><a style="color:#0070C5;" href="http://pasokatu.com/" target="_blank">パソ活ラボ</a><a href="http://b.hatena.ne.jp/entry/http://pasokatu.com/" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/http://pasokatu.com/" alt="" /></a><br><strong>メモ</strong><br style="clear:both;" /><br> |
上記コードはShareHtmlメーカーの「左サムネイル大」テンプレートから作成したブックマークレットを使って取得したHTMLなんですけどこのコードの一番最後 <br style="clear:both;" /><br> の部分がビジュアルエディタとテキストエディタを画面切り替えした時に自動整形で削除されてしまいます。
↓回り込み解除が削除されるのでブログでこんなふうに表示されるようになってしまいます。
自動整形を無効にするプラグイン
じゃぁ自動整形を止めれば良いじゃんということでWordPressのプラグイン「PS Disable Auto Formatting」の導入を考えてみたりもしましたが、自動整形が便利な場面もあるし過去記事が崩れていないか確認もしないといけないのでやめておきました。
結局自分でブックマークレットを作る
WordPressの自動整形によってbrタグが削除されるんだから br タグ以外で clear:both を使って回り込みを解除すれば良いってことになりますが結局コードをいじることになったら自分で最初からブックマークレット作るのとそんなに変わらなくなってしまいます。
ということでサムネイル画像付きリンクを生成するブックマークレットを自作してみることにしました。
画像付きリンクのブックマークレットを自作
具体的に画像付きリンクを生成するブックマークレットを自作するためにどんな操作をしたのか説明していきます。
キャプチャのサムネイル画像を取得
参考：HeartRails Capture | サムネイル画像／PDF ファイル作成サービス
ShareHtmlの中でも使われている「HeartRails」というWebサービスを利用します。サイトのキャプチャを取得してキャッシュしてくれます。
URLのパラメータをいじったら好きなサイズのサムネイルを取得できます。
ブックマークレット生成サービス
参考：My Utility－Make Link ジェネレータ
このMake Link ジェネレータというWebサービスはカスタマイズしたURLでブックマークレットを作ることができます。
以下、実際の設定など。
ブックマークレット作成手順
まずMake Link ジェネレータで「フォーマット」の欄に以下のコードを入力します。divもclassも使わず画像の次の行にテキストリンクだけのシンプルなものです。
|
1 |
<a href="%url%" target="blank"><img src="http://capture.heartrails.com/200x150?%url%" alt="%title%" width="200" height="150" /></a><br /><a href="%url%" target="blank">%title%</a> |
%url% というのは現在開いているサイトのURLが取得され、
%title% というのはタイトルが取得されます。
という部分はheartrails.comのWebサービスを利用して現在開いているサイトの200×150サイズの画像を取得する部分です。
200x150 は画像の大きさを指定しています。400まで使えます。これを変更する場合はそれに合わせてwidthとheightの値も変更します。
これをMake Link ジェネレータの説明に従ってブックマークレットを作ってリンクを作りたいサイトを開いた状態で実行するとこのようなHTMLコードを取得できます。
|
1 |
<a href="http://pasokatu.com/" target="blank"><img src="http://capture.heartrails.com/200x150?http://pasokatu.com/" alt="パソ活ラボ" width="200" height="150" /></a><br /><a href="http://pasokatu.com/" target="blank">パソ活ラボ</a> |
このHTMLコードをWordPressのテキストエディタに貼り付けると完了です。最終的なリンクの見た目はこんな感じになります。（※今後デザインが変わる可能性があるため画像として貼り付けています。）
自分専用のclassを作成
ここからは無理して設定する必要はありません。
一応今後レイアウトを調整する可能性があるかもしれないのでspanタグで各要素を囲んでclass名を指定しておくと後々活用できることもあるかもしれません。
以下、Make Link ジェネレータのフォーマット欄に入力したものです。囲む位置やclass名の書き方はShareHtmlを参考にさせてもらいました。
|
1 |
<span class="LinkThumb"><a href="%url%" target="blank"><img class="LinkThumbImg" src="http://capture.heartrails.com/200x150?%url%" alt="%title%" width="200" height="150" /></a></span><br /><span class="LinkTitle"><a href="%url%" target="blank">%title%</a></span> |
これで取得したサムネイルリンクのHTMLコードがこんな感じになります。
|
1 |
<span class="LinkThumb"><a href="http://pasokatu.com/" target="blank"><img class="LinkThumbImg" src="http://capture.heartrails.com/200x150?http://pasokatu.com/" alt="パソ活ラボ" width="200" height="150" /></a></span><br /><span class="LinkTitle"><a href="http://pasokatu.com/" target="blank">パソ活ラボ</a></span> |
classを書かない場合と見た目の違いはありませんが今後一括でデザインを変更したい時などに利用することができます。
シンプルなレイアウトで満足している場合は無理して設定する必要はありません。
自作ブックマークレットのメリット
ブックマークレットを自作すると無駄なものを無くせるし中身をいじるのでいろいろメリットがあります。
起動が速い
取得したいサイトを開いた状態でブックマークレットを起動すると一瞬でコードが画面上部に出てきます。そしてすぐにCtrl+C でコピーが完了します。
ShareHtmlの場合は起動してからわずかなタイムラグがあったりメモ入力のダイアログボックスが出てくるので一瞬というわけにはいきません。※気になるほどじゃありませんが。
プログラミング（コード）をいじる練習になる
一度 Make Link ジェネレータで設定をした経験があればその後は目的に合わせてカスタマイズすることができるので経験になります。
こういうほんのちょっとしたことでプログラミングのコードに触れておくのはかなり勉強になるのでおすすめ。
まとめ
以上、画像付きリンクを作成するための設定を試行錯誤した結果でした。
何でもそうですけど納得がいくところまでカスタマイズができれば自分専用なので使い勝手が良くなります。
そう考えるとShareHtmlみたいに一般公開するWebサービスって利用する人がたくさん居るのでどこまで機能を持たせれば良いのか判断が難しいですね。
[…] short : http://goo.gl/lCkuyx ShareHtmlより速く簡単に画像付きリンクを作成する方法 […]