2014年4月 5日 09:30

webサイトをサムネイル画像で紹介しつつ引用も表示できるブックマークレット

APPLE MacBook Air 1.3GHz Dual Core i5/13.3"/4GB/128GB MD760J/A

スクリーンショットサムネイル付き引用ブックマークレット

当ブログで各サイトの紹介用に使う為、既存のブックマークレットを組み合わせて作成しました。使った感じは以下のようになります。尚、サムネイルのサイズなどは変更が可能です。


「ARIA」の作者としても有名な天野こずえ先生が月刊コミックブレイドで連載中のマンガ『あまんちゅ!』。その既刊レビューを一括で記事にしました。あらすじ程度の記載はありますが、ネタバレなしのレビューです。

引用元:日常ときどきダイビング。『あまんちゅ!』既刊7巻の一括レビュー【コミック感想】| 絶版あかみる

スポンサードリンク

ブックマークレットの導入方法

下記のコードをメモ帳で開き、コピーしておきます。

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='<blockquote><p><img src="http://capture.heartrails.com/?'+location.href+'" style="float:left;margin-right:10px;"><br>'+window.getSelection()+'</p><cite>引用元:<a href="'+location.href+'" target="_blank">'+document.title+'</a></cite></blockquote>';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()

次に、ブックマークバーで右クリックをして「ページを追加」を選択します。名前に「tmbQuote」などと入力しておき、URL部分にコピーしたコードを貼り付けて保存します。これで導入は完了です。

ブックマークレットを使ってみよう

紹介したいページを開き、引用したい部分を選択します。

選択状態でブックマークレットをクリックします。

ページ上部にHTMLコードが出力されるので「Ctrl + c」でコピーします。後は自分のブログ記事などにHTMLを入力すればOK

サムネイルの表示を変更したい

このブックマークレットでは「HeartRails Capture」によってサムネイル画像を取得しています。下記ページにサムネイルのカスタマイズ方法が詳しく書かれています。

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

それを元にコードの以下部分を書き換えます。

<p><img src="http://capture.heartrails.com/?'+location.href+'" style="float:left;margin-right:10px;">

「HeartRails Capture」でカスタマイズしたサムネイルのURLでhttp://capture.heartrails.com/から?の間の半角英数字+記号をコードに追記して下さい。

例えば、「http://capture.heartrails.com/64x64/round?画像URL」としたければ、該当部分のコードを次のように書き換えます。

<p><img src="http://capture.heartrails.com/64x64/round?'+location.href+'" style="float:left;margin-right:10px;">

これで「HeartRails Capture」で設定した画像スタイルを実現することができます。

あかめ@akamiru_後記

引用文だけだと寂しい時にも便利だと思います。アイキャッチにもなるので、ニュース情報記事を書くときにも重宝しています。

【追記】
すげー便利なのがとっくにありました。


引用元:ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
  • 【タグ】
便利&役立カテゴリの他の記事はこちら。

スポンサードリンク

news

新作同人誌! MEMORIE(あまんちゅ!イラスト本)の通販 → メロンブックス

イラスト・漫画など活動報告 → イラスト・漫画仕事および同人活動の記録| 絶版あかみる