自作ブログカードの作成をブックマークレット化【コピペOK】

この記事では、自作のブログカードをブックマークレットから作成する方法を紹介します。コピペOKです。

はてな風のブログカードを実装じっそうしているWordopressテーマも多いと思いますが、ショートコードを使う仕様が多いですよね。

ショートコードを使ってブログカード型リンクを作成していると、テーマを変更することがあったときに、うまく表示されなくなる可能性があります。

ショートコードとは、短いワードを記述きじゅつすることで、決められた動作や表示をするようプログラムされた、Wordopressの機能です。

ブログカードでは、リンクしたいURLを記述すると、自動的にブログカード形式で表示してくれます。

以前、ショートコードを使わずにブログカードを表示する方法を自作していました。

ブログカードの書式をテーマを変えても使えるようにCSSとHTMLを抜き出して独自要素化してみた

当ブログは、現在Simplicity２というテーマを使わせていただいてます。このテーマには「ブログリンク」という機能が搭載されていますが、とある弱点があったので、勝手に対策してみました。ブログカードSimplicity２に標準搭載されている

weblog10.com

画像の取得に、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化されているサイトでも問題なく動作します。

表示されるブログカード

ブックマークレット

CSS

ブックマークレットコードの解説

jQueryの読み込み

取得情報を変数へ代入

タイトル＋テキストとファビコン＋ドメイン

サムネイル画像の処理

出力

まとめ

コメント