またかよ
またまたです。
すんません。
今回は、おしゃれな引用カードです。
引用したよ!ということがわかるし、なおかつおしゃれな感じで。
引用しなくても、リンクカードとして。ディスクリプションが表示されます。
そんな風に使えるものを作りました。
サンプル
選択で引用した場合
「ざっくりと、どんな商品なの? 大口径望遠単焦点レンズフラッグシップモデル 防塵・防滴性能の強化 第6世代の超音波モーターHSM採用」という部分を選択しているので、中に表示されています。
選択で引用しなかった場合
選択部分が見つからなかったので、ディスクリプションを表示しています。
もし、さらにディスクリプションがみつからない場合は、アドレスを表示するように設定しています。
ブックマークレット
なんか過去のブックマークレットは使い物にならないみたいな感じらしいのでちゃんと作りました。
CSSの設定も必要ありません。
どうぞ!
javascript: (function() { function productImg() { var f = document.evaluate('//link[(@rel=\'icon\') or (@rel=\'shortcut icon\') or (@rel=\'ICON\') or (@rel=\'SHORTCUT ICON\')][1]/@href', document, null, XPathResult.STRING_TYPE, null); var u=f.stringValue;var favicon=(u == '') ? 'http://'+location.host+'/favicon.ico' : (u.substring(0, 7) != 'http://') ? 'http://'+location.host+'/'+u : u;var pi = document.getElementsByTagName('meta'); for (i = 0; i < pi.length; i++) {if (pi[i].getAttribute("property") == "og:image"){ return pi[i].getAttribute("content");}}return favicon;return "";} var ogimg=productImg(),img=""; if(ogimg.length > 0){var img='<img src="'+ogimg+'" style="float: left;width: 100px;margin: 5px;border: 1px solid #000;">';} var title=document.title,sourceurl=location.href,domain=location.host,bqBefore = "",bqAfter ="",selection = getSelection();if(selection.rangeCount==0){var selection=document.getElementsByName('description').item(0) ? document.getElementsByName('description').item(0).content : document.location.href;} var bqBefore='<div style="position: relative;border: 2px solid #DADADA;padding:5px;color: #000;margin: 15px 0;background: #fff;background: rgba(255,255,255,0.9);">',bqAfter="</div>"; var card='<!--'+title+'-->\n<div style="background:url('+ogimg+') no-repeat center;background-size:cover;">'+bqBefore+''+img+'<div style="font-weight: bold;margin-top: 5px;"><a href="'+sourceurl+'">'+title+'</a></div><hr style="margin:3px"><span>'+selection+'</span><div style="text-align:right;color:#000;opacity:0.5;"><a href="//'+domain+'">'+domain+'</a></div>'+bqAfter+'</div>'; prompt("コピーしてください",card); })();
ブックマークレットの使い方
簡単です。
手順1
うえのコードをコピーして、適当にブックマークバーにあるリンクのアドレスを編集を行う
手順2
貼り付けたら、終了です。
手順3
引用したいページで、引用部分を選択もしくは選択せずにそのまま、先ほど編集したブックマークをクリックします。
手順4
コードが現れるので、そのままコピーして、表示させたい記事に貼り付けるだけです!!!
以上。
もう完成形っぽいから、これからはここのパーツのフィードバック記事を書いていくと思います。