サムネイル画像付きリンクのブックマークレットを自作する方法

考える人

ブログを書いていると他のサイトを紹介する時に画像(サムネイル)付きで紹介リンクを貼りたい時ってありますよね。

でも全部手動でリンクを作ると画像をキャプチャしてアップロードしてURLをコピーしてリンクを貼って、などなどかなりの手間がかかってしまいます。

それをボタン一発で出来るようにするサービスがShareHtmlというWebサービスなんですが今回はShareHtmlよりももっと簡単にサムネイル画像付きリンクを作成する方法を考えてみました。

スポンサーリンク

画像付きリンク作成サービス「ShareHtml」

参考:ShareHtmlメーカー

ブロガーの間で画像付きリンクを作ると言えばShareHtmlが有名でしょう。最初の設定のままリンクを作成してもそれっぽいリンクを作ることができます。

たぶん多くのブロガーにとっては使いやすいリンク作成ツールだと思います。

ビジュアルエディタとShareHtmlの相性問題

汎用的で使いやすいShareHtmlですが自分の場合はWordPressのビジュアルエディタを使ってブログを書いていてShareHtmlとビジュアルエディタは相性が悪いと感じることがありました。

というのもWordPressにはビジュアルエディタとテキストエディタを切り替えた時に余計な改行などを削除してくれる「自動整形」という親切(大きなお世話)機能があります。

この自動整形機能が悪さをしてShareHtmlのレイアウトが崩れることがあるんですよね。

上記コードはShareHtmlメーカーの「左サムネイル大」テンプレートから作成したブックマークレットを使って取得したHTMLなんですけどこのコードの一番最後 <br style="clear:both;" /><br>  の部分がビジュアルエディタとテキストエディタを画面切り替えした時に自動整形で削除されてしまいます。

↓回り込み解除が削除されるのでブログでこんなふうに表示されるようになってしまいます。

画像の回り込み

自動整形を無効にするプラグイン

じゃぁ自動整形を止めれば良いじゃんということでWordPressのプラグイン「PS Disable Auto Formatting」の導入を考えてみたりもしましたが、自動整形が便利な場面もあるし過去記事が崩れていないか確認もしないといけないのでやめておきました。

結局自分でブックマークレットを作る

WordPressの自動整形によってbrタグが削除されるんだから br タグ以外で clear:both を使って回り込みを解除すれば良いってことになりますが結局コードをいじることになったら自分で最初からブックマークレット作るのとそんなに変わらなくなってしまいます。

ということでサムネイル画像付きリンクを生成するブックマークレットを自作してみることにしました。

DIY

画像付きリンクのブックマークレットを自作

具体的に画像付きリンクを生成するブックマークレットを自作するためにどんな操作をしたのか説明していきます。

キャプチャのサムネイル画像を取得

参考:HeartRails Capture | サムネイル画像/PDF ファイル作成サービス

ShareHtmlの中でも使われている「HeartRails」というWebサービスを利用します。サイトのキャプチャを取得してキャッシュしてくれます。

URLのパラメータをいじったら好きなサイズのサムネイルを取得できます。

ブックマークレット生成サービス

参考:My Utility-Make Link ジェネレータ

このMake Link ジェネレータというWebサービスはカスタマイズしたURLでブックマークレットを作ることができます。

以下、実際の設定など。

ブックマークレット作成手順

まずMake Link ジェネレータで「フォーマット」の欄に以下のコードを入力します。divもclassも使わず画像の次の行にテキストリンクだけのシンプルなものです。

%url% というのは現在開いているサイトのURLが取得され、
%title% というのはタイトルが取得されます。
という部分はheartrails.comのWebサービスを利用して現在開いているサイトの200×150サイズの画像を取得する部分です。
200x150 は画像の大きさを指定しています。400まで使えます。これを変更する場合はそれに合わせてwidthとheightの値も変更します。

これをMake Link ジェネレータの説明に従ってブックマークレットを作ってリンクを作りたいサイトを開いた状態で実行するとこのようなHTMLコードを取得できます。

このHTMLコードをWordPressのテキストエディタに貼り付けると完了です。最終的なリンクの見た目はこんな感じになります。(※今後デザインが変わる可能性があるため画像として貼り付けています。)

画像付きリンクの自作

自分専用のclassを作成

ここからは無理して設定する必要はありません。

一応今後レイアウトを調整する可能性があるかもしれないのでspanタグで各要素を囲んでclass名を指定しておくと後々活用できることもあるかもしれません。

以下、Make Link ジェネレータのフォーマット欄に入力したものです。囲む位置やclass名の書き方はShareHtmlを参考にさせてもらいました。

これで取得したサムネイルリンクのHTMLコードがこんな感じになります。

classを書かない場合と見た目の違いはありませんが今後一括でデザインを変更したい時などに利用することができます。

シンプルなレイアウトで満足している場合は無理して設定する必要はありません。

※divとビジュアルエディタの相性が悪いのでdivを使っていません。使う場合は最初と最後で囲むようになります。

自作ブックマークレットのメリット

ブックマークレットを自作すると無駄なものを無くせるし中身をいじるのでいろいろメリットがあります。

起動が速い

取得したいサイトを開いた状態でブックマークレットを起動すると一瞬でコードが画面上部に出てきます。そしてすぐにCtrl+C でコピーが完了します。

ShareHtmlの場合は起動してからわずかなタイムラグがあったりメモ入力のダイアログボックスが出てくるので一瞬というわけにはいきません。※気になるほどじゃありませんが。

プログラミング(コード)をいじる練習になる

一度 Make Link ジェネレータで設定をした経験があればその後は目的に合わせてカスタマイズすることができるので経験になります。

こういうほんのちょっとしたことでプログラミングのコードに触れておくのはかなり勉強になるのでおすすめ。

まとめ

以上、画像付きリンクを作成するための設定を試行錯誤した結果でした。

何でもそうですけど納得がいくところまでカスタマイズができれば自分専用なので使い勝手が良くなります。

そう考えるとShareHtmlみたいに一般公開するWebサービスって利用する人がたくさん居るのでどこまで機能を持たせれば良いのか判断が難しいですね。

<関連>
Retina対応の綺麗なサムネイルリンクを作成する方法

ブログに最適なリンク色をGoogle・ヤフー・Bingの比較から考える

スポンサーリンク

このページのシェア・保存はこちら

Amazonでの買い物について

大きな買い物をするならAmazonチャージがおすすめ。チャージ金額に応じて余分にポイントがもらえます。
プライム会員ならさらにポイント上乗せ(学生はPrime Student

スポンサーリンク
スポンサーリンク

著者のフォローはこちら

名前:
Twitter
YouTube

ーーー

制作物:「ノイズレスサーチ

プロフィール
問い合わせフォーム
当サイトご利用時の注意事項

記事が良いと思ったら、Twitterでツイートしたり、ブログなどで紹介してくださると嬉しいです。よろしくお願いします。

『サムネイル画像付きリンクのブックマークレットを自作する方法』へのコメント

  1. 名前:test2 | bolo-bolo 投稿日:2015/11/25(水) 11:41:19 ID:e121e29de 返信

    […] short : http://goo.gl/lCkuyx ShareHtmlより速く簡単に画像付きリンクを作成する方法 […]

test2 | bolo-bolo へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。