今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレット

 めんどくさがりのためのツール。これまで作ってきたブログ投稿時用ツールのなかで最も使用頻度が多いものとなりました。
リンクと引用 いま見ているページを紹介する際に、URLとタイトル、引用したい文章(ドラッグで範囲選択)を一気にコピーできるというブックマークレットです。
(追記 2012/03/07)サムネイル表示を追加しました。詳しくは→ サムネイル付きで今見てるページをカンタンにリンク&引用(追記終わり)
 HTMLはもちろん、BBS用にテキスト、各種Wikiシステム用の出力が可能。似たようなツールはいくつかありますが、こちらはIE、Firefox、Chrome、Safariなどほとんどのモダンブラウザで同じように使えるようになっております。以下、詳細。

これは何?

今見ているページをリンクするためのHTMLコードをカンタンにコピペできるようにするブックマークレットです。
リンク用のHTMLコードを書くための手間を軽減します。登録方法は最後にあります。

  • URLのリンク用HTMLタグ(コード)を出力
  • BBSやSNS用にテキストでの出力もOK
  • 選択部分は引用タグ(blockquote)付きで出力
  • IE/Firefox/Safari/Chromeに対応、どれも使いかたは同じ
  • はてなブックマークの登録数やボタンも付加できます
  • PukiWiki@wiki(アットウィキ)livedorr WikiDokuWiki用コードにも対応

linclipはページ内の複数のリンクを一発で作成するのに対し、こちらは単体ページのリンクを出力します。

どうやって使う?

今見ているページをブログなどで紹介したい場合に、あらかじめ登録しておいたブックマークレットをクリック。

たとえば、Yahoo! JAPANを見ています。
Yahoo! JAPAN
このページをブログやBBSで紹介したいとしましょう。


ブックマークレットをクリック
ブックマークレットをクリック(画面はFirefoxのブックマークバーに登録したもの)。


コピペ用コードを表示
画面を覆うようにコピペ用HTMLコードなどが表示されます。
用途に合わせてコードをコピー、ブログやBBSの投稿欄に貼りつけます。

上下にある灰色の部分(「CLOSE」)をクリックすると元のページ表示に戻ります。

選択部分はblockquoteタグで引用

たとえば、ページ内の一部を選択(ドラッグで反転)してから……
テキストの一部を選択

ブックマークレットを実行すると、こんな表示になります。
コピペ用コードを表示
貼り付け先に合わせて、コードをコピー。


コピペすると以下のようになります。

●HTMLブログ用一般の場合

綾瀬はるか、『ホタルノヒカリ』で人見知りを克服 (ダ・ヴィンチ) – Yahoo!ニュース

5月28日より公開される映画『プリンセス トヨトミ』に出演する綾瀬はるかさんがダ・ヴィンチ6月号の表紙を飾り、インタビューに応えている。

記事タイトルがリンクになっているのがわかると思います。また、ブログなどではCSSなどが指定されてると思うので、引用部分がインデントされたり、枠で囲まれたりするはず(されてない場合はご自分でCSSをカスタマイズするといいでしょう)。

●テキストのみ(BBS/メール/SNS用)

綾瀬はるか、『ホタルノヒカリ』で人見知りを克服 (ダ・ヴィンチ) – Yahoo!ニュース
http://zasshi.news.yahoo.co.jp/article?a=20110526-00000301-davinci-ent
——————-
5月28日より公開される映画『プリンセス トヨトミ』に出演する綾瀬はるかさんがダ・ヴィンチ6月号の表紙を飾り、インタビューに応えている。
——————-

HTML、テキストのみのほか、Wikiサービス/ツール用のコードもあります。

HTMLの「ブログ用一般」と「MT系」の違いは?

blockquoteの扱いに違いがあります。
MovableType、TypePad、ココログなどでは、blockquoteタグで囲んだ部分の改行にbrタグが挿入されないという仕様になっています。「MT系」はそれに対応するため、改行部分にbrタグを挿入しています。

はてなブックマークの登録数やブックマークボタンも付けられます!

こういうやつです。

ページ内の複数のリンクを抽出するためのlinclipへのリンクもあります。

ブックマークレットの登録

linclip Singlesのページからどうぞ。さらに詳細な説明と登録方法もそちらにあります。
出先でも使える、普段使ってない環境で使えるよう、あとで、linclipのトップページにもリンクを貼っておきます。
linclip.com これさえ覚えておけばいいようにしておきまーす。よろしくお願いしまーす。

その他

 なお、ブックマークレット作成時にはさまざまなサイト/ブログを参考にさせていただきました。途中で困ったときはこれらがとても助けになりました。そのへんは以下のエントリにすでに書いております。
z-indexを無視してFlashが上に重なってしまうのに対処
Safariでtextareaを選択状態にできない
SafariでブックマークレットでDOMに出力すると文字化け
Safariのlocation.hrefで文字化け
 あらためてありがとうございました。

コメント

  1. サムネイル付きで今見てるページをカンタンにリンク&引用するブックマークレット

     今見ているページをカンタンにリンク&引用できるブックマークレットlinclip Singlesに、ページのサムネイルを加える機能を追加しました。  自作ツールで普段からよく使っているツール。要望にお応えする形で機能追加してみました。  これで、記事へのリンク、ページ内の文字列の引用に加えて、記事ページのサムネイル(縮小画像)も同時に掲載できるようになります。  以下、例。  このブックマークレットを紹介した記事を新機能を使って引用してみます。 今見ているページをカンタンに紹介。リンクと引用を手間な…