すたすた式
Blogger QooQ
ブログカードははてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズのものを使わせていただいています。
ブログカード提供元
はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ
こんにちは、めぐたんです。ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。...
画像そのものは小さいですが、遅延読み込みのためにloading="lazy"等を追加しました。widthとheightも追加したので(たぶん)CLS対策にもなっていると思います。
やったこと
また、こちらのブログカードのカスタマイズについてはこちらの記事が参考になりました。
※記事後半にコピペ用の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のコードは圧縮されていていたのでテキストエディタで<imgと検索し、loading="lazy"の追加場所を特定しました。
<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">
/**************************************** ブログカード *****************************************/ /* タイトル、ディスクリプションが長い場合、指定行以上を省略する 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の圧縮)を利用しました。
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)})})();
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)})})();
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿