この記事では、自作のブログカードをブックマークレットから作成する方法を紹介します。コピペOKです。
はてな風のブログカードを実装しているWordopressテーマも多いと思いますが、ショートコードを使う仕様が多いですよね。
ショートコードを使ってブログカード型リンクを作成していると、テーマを変更することがあったときに、うまく表示されなくなる可能性があります。
ショートコードとは、短いワードを記述することで、決められた動作や表示をするようプログラムされた、Wordopressの機能です。
ブログカードでは、リンクしたいURLを記述すると、自動的にブログカード形式で表示してくれます。
以前、ショートコードを使わずにブログカードを表示する方法を自作していました。
画像の取得に、HeartRails Captureというサムネイル画像作成サービスを使っていました。
ページ全体のスクリーンショットを取得して、サムネイル化してくれるサービスなのですが、リンク画像としては、できればアイキャッチ画像を取得したいと思うようになり、新たにブックマークレット方式で作り直しました。
もくじ
表示されるブログカード
作成されるブログカードの表示形式は、以前のままで特に変えていません。
サムネイル画像のサイズが変わるために、調整をした程度です。
はてな数表示は、今回からなくしました。はてながついてない記事の場合、リンクエラーとして検出されてしまうためです。
ブックマークレット
今回作ったブックマークレットはこちらです
ブックマークバーへドラッグ&ドロップで登録できます。
ドラッグ&ドロップで登録できない場合は、下記のコードを使って登録してください。不要な注釈やスペースを取り除いたコードです。
javascript:(function(){(function(d,f,s){s=d.createElement("script");s.src="//j.mp/1bPoAXq";s.onload=function(){f(jQuery.noConflict(!0))};d.body.appendChild(s)})(document,function($){ var obj = [];obj.title = $('title').text();obj.img = $('meta[property="og:image"]').attr('content');obj.desc = $('meta[name="description"]').attr('content');obj.url = document.URL;obj.domain = location.host;var cardTxt = '<div class="link-card-title"><a href="'+obj.url+'" target="_blank">'+obj.title+'</a></div><div class="link-card-excerpt">'+obj.desc+'</div>';var cardFooter = '<div class="link-card-footer"><a href="'+obj.url+'"><img src="http://www.google.com/s2/favicons?domain='+obj.url+'" alt="">'+obj.domain+'</a></div>';if(obj.img == undefined){var card = '<div class="link-Card link-Card--noimg"><div class="link-card-content">'+cardTxt+'</div>'+cardFooter+'</div>';}else{var cardImg = '<div class="link-card-thumbnail"><a href="'+obj.url+'" class="link-card-thumbnail-link" target="_blank"><img class="link-card-thumb-image" src="'+obj.img+'" alt=""></a></div>';var card = '<div class="link-card">'+cardImg+'<div class="link-card-content">'+cardTxt+'</div>'+cardFooter+'</div>';}prompt('ブログカードのHTMLを生成しました。', card);})})();
CSS
ブログカードのCSSです。以前作ったものと同じデザインですが、サムネイル画像の大きさ変更などにともない、一部修正しています。
/************************************ リンクカードのスタイル ************************************/ .link-card{ margin: 20px 0; max-width:100%; position: relative; clear:both; min-height:145px; min-width: 300px; box-sizing: border-box; padding:12px; padding-bottom: 6px; border:1px solid #ddd; word-wrap: break-word; border-radius: 5px; } .link-card:after{ content: ""; clear: both; display: block; } .link-card-thumbnail{ float: left; } .link-card img.link-card-thumb-image{ border:0; width: 178px; height: 100px; object-fit: cover; display: block; margin-bottom: 10px; } .link-card-content{ margin-left:180px; padding-left:2%; line-height:120%; margin-bottom: 0.5em; } .link-card-title{ margin-bottom:5px; } .link-card-title a{ font-weight: bold; text-decoration: none; color: #111; } .link-card-excerpt{ color: #333; font-size: 0.8em; max-height: 80px; overflow: hidden; } .link-card-footer { position:relative; font-size: 0.7em; width: 100%; clear:both; vertical-align: bottom; } .link-card-footer a{ color:#777; text-decoration:none; padding-left:18px; } .link-card-footer a:hover{ color:#111; } .link-card-footer img{ position:absolute; float:left; top:50%; -webkit-transform : translateY(-50%); transform : translateY(-50%); } .link-card-hatebu{ float: left; margin-right: 7px; position: relative; bottom: -5px; } /* リンクカード(幅が狭い場合)*/ @media screen and (max-width: 560px){ .article .link-card, .article .entry-content .hover-card{ width: 100%; } .link-card-content{ margin-left: 0; } .link-card-title a{ font-size: 14px; line-height: 120%; } .link-card-excerpt, .link-card-footer{ font-size: 11px; line-height: 120%; } #main .link-card, #main .hover-card{ margin-left: 0; margin-right: 0; width: 100%; } img.link-card-thumb-image{ width: 80px; height: 80px; } .link-card-content { margin-left: 90px; } }
そのままのデザインで良ければ、style.cssへコピペしてください。
使いたいサイトに合ったデザインにしたい場合は、自由に書き換えてください。
ブックマークレットコードの解説
ここからは、ブックマークレットの解説です。興味のある方だけどうぞ。
ブックマークレットから生成されるHTMLコードは、以前作ったものと大きく変えていません。
最終的に出力されるHTMLは、このようなものになります
<div class="link-card"> <div class="link-card-thumbnail"> <a href="記事URL" class="link-card-thumbnail-link" target="_blank"> <img class="link-card-thumb-image" src="アイキャッチ画像URL" alt=""> </a> </div> <div class="link-card-content"> <div class="link-card-title"> <a href="記事URL" target="_blank">ブログカードの書式をテーマを変えても使えるようにCSSとHTMLを抜き出して独自要素化してみた</a> </div> <div class="link-card-excerpt">紹介文</div> </div> <div class="link-card-footer"> <a href="記事URL"><img src="ファビコンURL" alt="">weblog10.com</a> </div> </div>
サムネイル画像が、javascriptを使うことで、ソースコードのメタタグ[og:image](アイキャッチ画像)から取得できるため、HeartRails Captureというサムネイル画像作成サービスから変更しています。
ブックマークレットのjavascriptコードはこちら
javascript:(function(){ //jQuery呼び出し (function(d,f,s){ s=d.createElement("script"); s.src="//j.mp/1bPoAXq"; s.onload=function(){ f(jQuery.noConflict(!0)) }; d.body.appendChild(s) }) (document,function($){ var obj = []; obj.title = $('title').text(); //タイトル obj.img = $('meta[property="og:image"]').attr('content'); //アイキャッチ画像 obj.desc = $('meta[name="description"]').attr('content'); //紹介文 obj.url = document.URL; //URL obj.domain = location.host; //ドメイン名 //タイトル+テキスト var cardTxt = '<div class="link-card-title"><a href="'+obj.url+'" target="_blank">'+obj.title+'</a></div><div class="link-card-excerpt">'+obj.desc+'</div>'; //ファビコン+ドメイン var cardFooter = '<div class="link-card-footer"><a href="'+obj.url+'"><img src="http://www.google.com/s2/favicons?domain='+obj.url+'" alt="">'+obj.domain+'</a></div>'; if(obj.img == undefined){ //アイキャッチ画像がないときの最終HTML var card = '<div class="link-Card link-Card--noimg"><div class="link-card-content">'+cardTxt+'</div>'+cardFooter+'</div>'; }else{ //サムネイル画像部分 var cardImg = '<div class="link-card-thumbnail"><a href="'+obj.url+'" class="link-card-thumbnail-link" target="_blank"><img class="link-card-thumb-image" src="'+obj.img+'" alt=""></a></div>'; //アイキャッチ画像があるときのの最終HTML var card = '<div class="link-card">'+cardImg+'<div class="link-card-content">'+cardTxt+'</div>'+cardFooter+'</div>'; } prompt('ブログカードのHTML', card); }) })();
jQueryの読み込み
ソースコードからの情報取得にjQueryを使っていますが、jQueryを使っていないサイトからも利用できるように、ブックマークレット単体でjQueryを読み込ませています。
参考:ブックマークレットで jQuery を使う魔法の 210 文字 – Qiita
(function(){//jQuery呼び出し (function(d,f,s){ s=d.createElement("script"); s.src="//j.mp/1bPoAXq"; s.onload=function(){ f(jQuery.noConflict(!0)) }; d.body.appendChild(s) }) (document,function($){ ///////////////////////////////////// /// ここに内容 /// //////////////////////////////////// }) })();
jQueryは、本来本体をダウンロードして使うものですが、GoogleやMicrosoftがCDN(Content Delivery Network)に用意しているものを、直接読み込んで使うこともできます。
このコードでは、Google Ajax API CDNを読み込んで使うようにしています。
ブックマークレット内で直接読み込むことで、jQueryを使っていないサイトでも、ブックマークレットを使うことができるようになります。
取得情報を変数へ代入
各種必要な情報を、サイトのソースコードから取得します。
var obj = []; obj.title = $('title').text(); //タイトル obj.img = $('meta[property="og:image"]').attr('content'); //アイキャッチ画像 obj.desc = $('meta[name="description"]').attr('content'); //紹介文 obj.url = document.URL; //URL obj.domain = location.host; //ドメイン名
旧バージョンのときには、画像の取得に、HeartRails Captureというサイトのスクリーンショットをサムネイルにする画像作成サービスを使っていましたが、javascriptを使うことで、アイキャッチ画像を取得できるようになりました。
タイトル+テキストとファビコン+ドメイン
本文にあたるタイトルと紹介文の部分と、フッター扱いのファビコン・ドメイン部分です。
//タイトル+テキスト var cardTxt = '<div class="link-card-title"><a href="'+obj.url+'" target="_blank">'+obj.title+'</a></div><div class="link-card-excerpt">'+obj.desc+'</div>'; //ファビコン+ドメイン var cardFooter = '<div class="link-card-footer"><a href="'+obj.url+'"><img src="http://www.google.com/s2/favicons?domain='+obj.url+'" alt="">'+obj.domain+'</a></div>';
それぞれ読み込んだ情報を、HTMLに落とし込んでいます。
ここは、HTMLの各属性に当てはめて並べるだけですので、かんたんです。
サムネイル画像の処理
アイキャッチ画像をサムネイルとして使うようにしていますので、アイキャッチ画像がないサイトの場合、空白ができてしまいます。
サムネイル画像があるバージョンとないバージョンのHTMLを分けて、出力するようにします。
if(obj.img == undefined){ //アイキャッチ画像がないときの最終HTML var card = '<div class="link-Card link-Card--noimg"><div class="link-card-content">'+cardTxt+'</div>'+cardFooter+'</div>'; }else{ //サムネイル画像部分 var cardImg = '<div class="link-card-thumbnail"><a href="'+obj.url+'" class="link-card-thumbnail-link" target="_blank"><img class="link-card-thumb-image" src="'+obj.img+'" alt=""></a></div>'; //アイキャッチ画像があるときのの最終HTML var card = '<div class="link-card">'+cardImg+'<div class="link-card-content">'+cardTxt+'</div>'+cardFooter+'</div>'; }
アイキャッチ画像を代入する変数「obj.omg」が空だった場合、サムネイル画像なしバージョンのHTMLを出力。空でなければサムネイル画像ありバージョンのHTMLが、変数「card」に代入されます。
出力
出力には、ダイアログ画面を使って出力させています。
prompt('ブログカードのHTML', card);
生成されたリンクHTMLがダイアログに表示されますので、コピーして使います。
まとめ
以前作ったGoogle Chromeの拡張機能「Create Link」を使った方法だと、サムネイル画像がそのページのサムネ画像になっていました。
ブックマークレット化で、アイキャッチ画像を表示するようにすることができました。こちらのほうが見栄えも良いと思います。
SSL化されたサイトでは、javascriptをブロックすることがあるため、ブックマークレットが使えないことがあります。
今回使っているjQueryのGoogle Ajax API CDNは、httpsにも対応しているので、SSL化されているサイトでも問題なく動作します。
コメント
[…] 自作ブログカードの作成をブックマークレット化【コピペOK】この記事では、自作のブログカードをブックマークレットから作成する方法を紹介します。コピペOKです。はてな風のブログカードを実装じっそうしているWordopressテーマも多いと思いますが、ショートコードを使う仕様が多いですよね。ショートコーweblog10.com […]