サムネイル付きでブログ記事を引用するブックマークレット BlogQuote

前回作ったBlogClipの姉妹品。

ブログの記事をDraftPadにクリップしていく BlogClip
以前、ネット上の記事を切り取ってくるブックマークレットを作ったのですが、これにサムネイルが付くと分かりやすいなあ、と思い、改良してみました。ShareHTMLを参考にして、DraftClipを拡張して...

BlogClipも気に入ってるのですが、いつもいつも引用を探すのが面倒なこともあるので、本文中のテキストを丸々写してしまう暴挙に出てみました。意外と悪くない。

javascript:t=document.title;h=location.href;p=document.getElementsByTagName("p");s="";for(key in p) s+=p[key].innerText;s=s.replace(/\n/g,"").substring(0,100);location.href='draftpad://insert?after='+encodeURIComponent('\n<blockquote style=\"background-color:ivory;padding:15px;border-radius:5px;\"><a href=\"'+h+'\" target=\"_blank\" style=color:darkblue;><img align=left src=\"http://capture.heartrails.com/200x130/cool/shorten?'+h+'\" width=200 height=130>'+t+'</a><a href=\"http://b.hatena.ne.jp/entry/'+h+'\" target=\"_blank\"><img src=\"http://b.hatena.ne.jp/entry/image/'+h+'\"></a><br><font size=-1>'+s+'...</font><br clear=all></blockquote>\n');

Safariでこのブックマークレットを実行すると、開いているサイトのリンクをDraftPadに作ります。その際、pタグの付いたところから100文字ほど抜き出し、サイト解説代わりとします。後はBlogClipと同じ。適当なのに、サイトの雰囲気が掴めてしまう。

カラーチャート/カラーネーム 147色 - TAG index Webサイト
Webカラー - カラーコード・カラーネーム一覧HTML&CSS Web制作リファレンス- ホームページの構築・運用 -147色のカラーネームと、それに対応するカラーコードの一覧です。* マーク付きの...

「background-color:ivory」の部分を書き換えると、背景色の変更が出来ます。「ivory」を「azure」に変えるとか。もちろんカラーコードを直接書くのもOK。

DraftPadで色見本を確認するアシスト ColorPicker
HTMLタグの色を調べるのに、初めはアプリを使ってました。日本やフランスの伝統色や、ニュアンスによる検索ができる色辞典アプリ。写真から色を吸い出し検索できる。HTMLでの16進数も示してくれて、いろい...

細かなカラーコードは上の記事を参照ください。ただ、サムネイルが白背景を前提としているので、どぎつい色だと合わないだろうと思います。

もちろんこれをMyShorcutsに保存すれば、簡易リンク集の出来上がり。
MyShortcutsを使い、iPadの通知センターにリンク集を作る方法