今更ながら、Make Link ジェネレータというツールを知りました。
Make Linkジェネレータは、Firefoxなら「Make Link」もしくは「CoLT」アドオン、Chromeなら「Create Link」と同様にリンクを作成できる「ブックマークレット」を手軽に作ることができます。
photo by Laura D’Alessandro
目次
ブックマークレットで作成する利点
僕はこれまで、これらのブラウザ拡張でよく使われるフォーマット設定集を、いくつか記事に書きました。
- ブログ記事の生産効率を上げるFirefoxアドオン「Make Link」の設定例まとめ
- ブログ記事の作成を補助するFirefoxアドオン「CoLT」の設定例まとめ
- ブログ記事の作成支援Chrome拡張「Create Link」の設定例まとめ
ブラウザ拡張によるリンク作成は、ものすごく手軽にリンクが作成できます。しかし反面、基本ブラウザに拡張をインストールして設定を一つ一つコピペかキーボードで入力していかなければならず、初期設定が面倒でした。（※Make Linkだと無理やり移行する方法はある）
ただ、Make Link ジェネレータの場合、リンクタグ作成用のブックマークレット集をHTMLファイルなどで作ってしまえば、マウスのドラッグ＆ドロップで簡単にブックマークに登録できます。さらには、ブラウザのブックマーク同期機能を使用すれば、自動的に他環境のブラウザで、設定の必要もなく、ブックマークレットが作成されている、なんてこともできるようになります。（Xmarksという手もある。）
ブックマークレット方式は滅茶苦茶設定が楽なので、今後どんな環境にいても、手軽に使えるようにと、「ブログなどでよく利用するタグ作成用ブックマークレット集」を作ってみました。結構ブログでよく使うタグを集めたので、使えそうなものをブックマークに登録しておけば、手軽にブログ用のリンクタグを作成できるようになります。
というか、これを作っておけば、のちのちパソコンの環境移行などをした時に、自分が楽になるので自分用に作りました。
Make Linkジェネレーターの使い方
と、その前に簡単なMake Link ジェネレータの使い方です。
作成手順
- タイトル欄にブックマークレット名を入力
- フォーマット欄に出力したい文字列や HTML 等を入力
- Make Link 生成ボタンをクリック
- 生成されたブックマークレットをドラッグ＆ドロップ等でブックマークやブックマークバーに追加
今回は、「ブログでよく使用するいろんなタグ」を1～3までやって、ブックマークレットを作ってあるので、使えそうなタグがあった場合は、4のブックマークレット登録だけ行えばよいことになります。
ちなみにブックマークレットを使用すると、リンクを作成するために閲覧しているWEBページの上部にテキストエリアが作成され、生成されたリンクタグがコピペできるように表示されます。
ブックマークレットの登録
作成したブックマークレットは、以下のようにブックマークバーに登録しておくと、手軽に使えます。
ブラウザの機能を使えばマークレットを自動的に同期してくれるので、他の環境で新たに設定する必要もありません。
通常のWEBページリンクの作成
まずは通常のリンクのブックマークレットです。
フォーマット
A（通常のリンク）
<a href="%url%">%title%</a>
A（新しいタブで開く）
<a href="%url%" target="_blank">%title%</a>
A（新しいタブで開く＋このリンクをたどらない）
<a href="%url%" target="_blank" rel="nofollow">%title%</a>
A（はてなブックマーク数付き）
<a href="%url%" target="_blank">%title%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"> <img src="https://b.hatena.ne.jp/entry/image/%url%" alt="" /></a> </div>
表示例
こんな感じのリンクが作成されます。
登録
WordPressにブックマークレットは貼り付けられないので、以下のページからドラッグ＆ドロップしてブックマークバーなどに登録してください。
WEBページのサムネイル画像とリンクを作成する
サムネイル画像と合わせてページを紹介すると、多少クリック率が上がったりします。
フォーマット
サムネイル画像＆リンク
<a style="overflow:hidden;display:inline-block;" href="%url%" target="_blank"> <img style="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/shorten?%url%" alt="" width="120" height="120" /> <span style="display:block;overflow:hidden;">%title%</span> </a>
表示例
登録
以下のページからドラッグ＆ドロップしてブックマークバーなどに登録してください。
WEBページのサムネイル画像とリンク＆はてなブックマーク数を作成する
さらに、サムネイルとはてなブックマークをプラスすることで、少しページがにぎやかになります。
フォーマット
サムネイル画像＆リンク＆はてな数
<div style="overflow:hidden;"> <a href="%url%" target="_blank"> <img style="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/shorten?%url%" alt="" width="120" height="120" /> </a> <a href="%url%" target="_blank">%title%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"> <img src="https://b.hatena.ne.jp/entry/image/%url%" alt="" /></a><br /> </div>
表示例
登録
以下のページからドラッグ＆ドロップしてブックマークバーなどに登録してください。
写真使用のクレジット表記
Flickrなどのサイトの画像を利用した時など、手軽にクレジット表記タグを作ることができます。
フォーマット例
photo by xxxx（写真のとき）
photo by <a href="%url%" target="_blank">%text%</a>
image by xxxx（イラストなど）
image by <a href="%url%" target="_blank">%text%</a>
credit: xxxx（クレジット表記）
credit: <a href="%url%" target="_blank">%text%</a>
使用方法
使い方は、以下のようにFlickrなどで著作者名などのテキストを選択して、ブックマークレットを使用します。
表示例
photo by Laura D’Alessandro
image by Laura D’Alessandro
credit: Laura D’Alessandro
登録
以下のページからドラッグ＆ドロップしてブックマークバーなどに登録してください。
引用文
WEBページ上の引用したい文章を選択して、ブックマークレットを動作させると、引用タグから参照リンクまで作成してくれるブックマークレットです。
フォーマット
引用文
<blockquote><p>%text%</p><p><a href="%url%">%title%</a></p></blockquote>
使用方法
引用したい文字を選択しながらブックマークレットをクリックする。
表示例
ヤフー株式会社（英称：Yahoo Japan Corporation）は、ポータルサイトのYahoo! JAPANを運営する日本の企業である。
登録
以下のページからドラッグ＆ドロップしてブックマークバーなどに登録してください。
ショートカットキーを使ってさらに手軽に
ChromeのKeyconfigという拡張を使えば、ショートカットキーを押すだけでHTMLタグをジェネレートすることができます。
これだと、キーボードから手を離さずにリンクタグをコピーできるので作業効率が上がります。
設定方法は、以下で詳しく書かれています。
Google Chromeでリンクタグを超高速に作成する方法
Firefoxの場合は、keysnailというアドオンで設定できます。
Firefoxでの設定方法は以下に詳しく書かれています。こちらはちょっと面倒くさい。
まとめ
今回は以下のリンクに「すぐにリンクタグが作成できるブックマークレット」をまとめてみました。
ブログでよく使用するリンクタグを、一発で作成するブックマークレットまとめ
このブックマークレットを利用すれば、ドラッグ＆ドロップですぐにブログなどで使えるHTMLタグを作成できるようになります。もしブラウザを変更しても、ドラッグ＆ドロップで1分もあれば登録できてしまいます。
「ブラウザの拡張機能のタグ作成ツールは、初期設定が面倒くさい」なんて時には、手軽に作成できるのでお試しください。
