ホーム » QooQ »

ブログカードに loading="lazy"等を付けました。

更新  
公開
当サイトはアフィリエイト広告を使用しています

Blogger QooQ

  • 通信エラーが発生しました。
この記事は最後の更新から3年以上が経過しています

ブログカードははてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズのものを使わせていただいています。

ブログカード提供元

はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ

こんにちは、めぐたんです。ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。...

ファビコンwww.granfairs.com

画像そのものは小さいですが、遅延読み込みのためにloading="lazy"等を追加しました。widthとheightも追加したので(たぶん)CLS対策にもなっていると思います。

やったこと

  • loading="lazy"の追加
  • width heightの追加
  • レイアウトはなるべく維持したままCSSの変更
    • タイトル、ディスクリプションが長い場合、指定行以上を省略
    • 画像は正方形にトリミング

また、こちらのブログカードのカスタマイズについてはこちらの記事が参考になりました。

※記事後半にコピペ用のJavaScriptコードがあります。

注：(カスタマイズ前でも)Webサイト側のContent Security Policyの設定によっては実行しないようです。

Firefox
Content Security Policy: ページの設定により次のリソースの読み込みをブロックしました: https://j.mp/1bPoAXq (“script-src”)

Chrome
Refused to load the script 'https://j.mp/1bPoAXq' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
目次

JavaScript

提供元のJavaScriptのコードは圧縮されていていたのでテキストエディタで<imgと検索し、loading="lazy"の追加場所を特定しました。

ちなみに元のコードをツールを使って整形したものがこちら

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="blogCardTxt"><p class="blogCardTitle"><a href="' + obj.url + '" target="_blank">' + obj.title + '</a></p><p>' + obj.desc + '</p></div>';
    var cardFooter = '<div class="blogCardFooter"><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="blogCard blogCard--noimg"><div class="blogCardCont">' + cardTxt + '</div>' + cardFooter + '</div>';
    } else {
      var cardImg = '<div class="blogCardImg"><div class="blogCardImg__wrap"><a href="' + obj.url + '" target="_blank"><img src="' + obj.img + '" alt=""></a></div></div>';
      var card = '<div class="blogCard"><div class="blogCardCont">' + cardTxt + cardImg + '</div>' + cardFooter + '</div>';
    }
    prompt('%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AEHTML%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82', card);
  })
})();

imgタグは2か所、上がfavicon用、下がOGP用です。

<img src="http://www.google.com/s2/favicons?domain=' + obj.url + '" alt="">

<img src="' + obj.img + '" alt="">

OGP用のimgタグにloading="lazy"を付ければPageSpeed Insightsで「オフスクリーン画像の遅延読み込み」について指摘されないようです。

<img loading="lazy" src="' + obj.img + '" alt="">

widthとheightも書いた方がいいらしいので

<img loading="lazy" src="' + obj.img + '" alt=" " width="100" height="100">

CSS

/****************************************
   ブログカード
*****************************************/
/* タイトル、ディスクリプションが長い場合、指定行以上を省略する
https://coliss.com/articles/build-websites/operation/css/css-line-clamp-property.html */
/* 画像は正方形にトリミング
https://recooord.org/css-images-trimming/ */

.blogCard {
    border: 1px solid #575757;
    border-radius: 3px;
    padding: 1em;
    margin: 1em auto;
}
.blogCardCont {
    display: flex;
    justify-content: space-between;
}
.blogCardTxt {
    flex-basis: 65%;
}
.blogCardTxt p {
    margin-block-start: initial !important;
    margin-block-end: initial !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blogCardTitle a {
    font-weight: 700;
}
.blogCardImg {
    flex-basis: 30%;
}
.blogCardImg__wrap {
    position: relative;
}
.blogCardImg__wrap::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.blogCardImg__wrap img {
    position: absolute;
    width: auto;
    height: 100%;
    top: 0;
    object-fit: cover;
}
.blogCardFooter img {
    vertical-align: text-bottom;
    margin-right: .5em;
}
@media (min-width: 768px){
    .blogCardTxt {
    flex-basis: 80%;
}
    .blogCardImg {
    flex-basis: 15%;
}
}

参考サイト

コピペ用

以下はコピペ用です。JavaScriptの圧縮はJS Minifier (JavaScriptの圧縮)を利用しました。

+ loading="lazy" + width + height

圧縮前 クリックすると開きます 
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="blogCardTxt"><p class="blogCardTitle"><a href="' + obj.url + '" target="_blank">' + obj.title + '</a></p><p>' + obj.desc + '</p></div>';
    var cardFooter = '<div class="blogCardFooter"><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="blogCard blogCard--noimg"><div class="blogCardCont">' + cardTxt + '</div>' + cardFooter + '</div>';
    } else {
      var cardImg = '<div class="blogCardImg"><div class="blogCardImg__wrap"><a href="' + obj.url + '" target="_blank"><img loading="lazy" src="' + obj.img + '" alt=" " width="100" height="100"></a></div></div>';
      var card = '<div class="blogCard"><div class="blogCardCont">' + cardTxt + cardImg + '</div>' + cardFooter + '</div>';
    }
    prompt('%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AEHTML%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82', card);
  })
})();
圧縮後 クリックすると開きます 
javascript:(function(){(function(c,b,a){a=c.createElement("script");a.src="//j.mp/1bPoAXq";a.onload=function(){b(jQuery.noConflict(!0))};c.body.appendChild(a)})(document,function(d){var e=[];e.title=d("title").text();e.img=d('meta[property="og:image"]').attr("content");e.desc=d('meta[name="description"]').attr("content");e.url=document.URL;e.domain=location.host;var b='<div class="blogCardTxt"><p class="blogCardTitle"><a href="'+e.url+'" target="_blank">'+e.title+"</a></p><p>"+e.desc+"</p></div>";var f='<div class="blogCardFooter"><a href="'+e.url+'"><img src="http://www.google.com/s2/favicons?domain='+e.url+'" alt="">'+e.domain+"</a></div>";if(e.img==undefined){var a='<div class="blogCard blogCard--noimg"><div class="blogCardCont">'+b+"</div>"+f+"</div>"}else{var c='<div class="blogCardImg"><div class="blogCardImg__wrap"><a href="'+e.url+'" target="_blank"><img loading="lazy" src="'+e.img+'" alt=" " width="100" height="100"></a></div></div>';var a='<div class="blogCard"><div class="blogCardCont">'+b+c+"</div>"+f+"</div>"}prompt("%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AEHTML%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82",a)})})();

+ loading="lazy" + width + height + リンクカード（ブログカード）を作るブックマークレット（nkuri さん）のカスタマイズ適用後

圧縮前 クリックすると開きます 
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 = document.title;
    obj.img = $('meta[property="og:image"]').attr('content');
    obj.desc = $('meta[name="description"]').attr('content');
    obj.url = $('link[rel=canonical]').attr('href') || document.URL;
    var m = obj.url.match(/^https?:\/\/([^/]+)/);
    obj.domain = m[1];
    var cardTxt = '<div class="blogCardTxt"><p class="blogCardTitle"><a href="' + obj.url + '">' + obj.title + '</a></p><p>' + (obj.desc || '') + '</p></div>';
    var cardFooter = '<div class="blogCardFooter"><a href="' + obj.url + '"><img src="//www.google.com/s2/favicons?domain=' + obj.url + '" alt="">' + obj.domain + '</a></div>';
    if (obj.img == undefined) {
      var card = '<div class="blogCard blogCard--noimg"><div class="blogCardCont">' + cardTxt + '</div>' + cardFooter + '</div>';
    } else {
      var cardImg = '<div class="blogCardImg"><div class="blogCardImg__wrap"><a href="' + obj.url + '"><img loading="lazy" src="' + obj.img + '" alt=" " width="100" height="100"></a></div></div>';
      var card = '<div class="blogCard"><div class="blogCardCont">' + cardTxt + cardImg + '</div>' + cardFooter + '</div>';
    }
    prompt('%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AEHTML%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82', card);
  })
})();
圧縮後 クリックすると開きます 
javascript:(function(){(function(c,b,a){a=c.createElement("script");a.src="//j.mp/1bPoAXq";a.onload=function(){b(jQuery.noConflict(!0))};c.body.appendChild(a)})(document,function(e){var f=[];f.title=document.title;f.img=e('meta[property="og:image"]').attr("content");f.desc=e('meta[name="description"]').attr("content");f.url=e("link[rel=canonical]").attr("href")||document.URL;var a=f.url.match(/^https?:\/\/([^/]+)/);f.domain=a[1];var c='<div class="blogCardTxt"><p class="blogCardTitle"><a href="'+f.url+'">'+f.title+"</a></p><p>"+(f.desc||"")+"</p></div>";var g='<div class="blogCardFooter"><a href="'+f.url+'"><img src="//www.google.com/s2/favicons?domain='+f.url+'" alt="">'+f.domain+"</a></div>";if(f.img==undefined){var b='<div class="blogCard blogCard--noimg"><div class="blogCardCont">'+c+"</div>"+g+"</div>"}else{var d='<div class="blogCardImg"><div class="blogCardImg__wrap"><a href="'+f.url+'"><img loading="lazy" src="'+f.img+'" alt=" " width="100" height="100"></a></div></div>';var b='<div class="blogCard"><div class="blogCardCont">'+c+d+"</div>"+g+"</div>"}prompt("%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AEHTML%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82",b)})})();
  • 通信エラーが発生しました&#12290;

検索

サイト内検索に使ってください 🐤

お知らせ

  • 試験的にいいねボタンを実装しました

カテゴリー

Random Picks

すたすた式

Enjoy!👍

QooQ