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

 

この記事では、自作のブログカードをブックマークレットから作成する方法を紹介します。コピペ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化されているサイトでも問題なく動作します

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする