Chromeブックマークレットのブログカードが作動しない時の対処法〜突然使えなくなった件！

ブックマークレットで「はてなブログ風ブログカード」を取得して使っている方は多いと思うのですが、なぜか昨日から突然作動しなくなってしまい困っていました。

ネットを見ると他にもそのような方がいるようでしたので、ひとまず私がたどり着いた解決方法をシェアしますね(^-^)

私に起こったブックマークレットの不具合

私が元々使っていた「はてな風ブログカードのブックマークレット」はこちらの仕様のものでした。
シンプルで気に入って使っていたのですが突然動かなくなったのです！！（2022/11/17頃。前日まではたぶん使えてたと思う）
↓↓

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

ブックマークレットが作動しない場合の解決策

1.作動するブックマークレットを公開されているスクリプトを利用させていただいた。

ただし、このままブックマークレットを利用すると、CSSもコピペし直したり、カードの表示も前に使っていたものと違うものになってしまう。

↓↓

理想のブログカードでページスピードを上げる方法 - after work lab

そこで、

2.
スクリプトの中のCSSのクラス名に相当する部分を自分が今まで使っていたものに書き換えた。

書き換えたものはちなみにこちらです。
このままリンクを左クリックしてブックマークレットにドラッグ＆ドロップできます。
↓↓

ブログカード

ブックマークレットのブログカードが作動しない時の対処法

一応、クラス名を書き換えたもの（上記ブックマークレットの中身）を載せておきます。

<p><a href="javascript:(function(){javascript:(function()%7Bvar obj%3D%5B%5D%3Bobj.url%3Ddocument.location%3Bobj.domain%3Dlocation.host%3Bvar ogp%3Ddocument.getElementsByTagName(&quot;meta&quot;)%3Bfor(i%3D0%3Bi<ogp.length%3Bi%2B%2B)%7Bif(ogp%5Bi%5D.getAttribute(&quot;property&quot;)%3D%3D&quot;og:title&quot;)obj.title%3Dogp%5Bi%5D.getAttribute(&quot;content&quot;)%3Bif(ogp%5Bi%5D.getAttribute(&quot;property&quot;)%3D%3D&quot;og:image&quot;)obj.img%3Dogp%5Bi%5D.getAttribute(&quot;content&quot;)%3Bif(ogp%5Bi%5D.getAttribute(&quot;property&quot;)%3D%3D&quot;og:description&quot;)obj.desp%3Dogp%5Bi%5D.getAttribute(&quot;content&quot;)%3Bif(ogp%5Bi%5D.getAttribute(&quot;name&quot;)%3D%3D&quot;description&quot;)obj.desp%3Dogp%5Bi%5D.getAttribute(&quot;content&quot;)%7Dif(obj.title%3D%3Dundefined%7C%7Cobj.title%3D%3D&quot;&quot;)obj.title%3Ddocument.title%3Bif(obj.img%3D%3Dundefined%7C%7Cobj.img%3D%3D&quot;&quot;%7C%7C!obj.img.match(/%5E(http%7Chttps):%5C/%5C//i))obj.img%3D&quot;https://capture.heartrails.com/382x200%3F&quot;%2Bobj.url%3Bif(obj.desp%3D%3Dundefined%7C%7Cobj.desp%3D%3D&quot;&quot;)obj.desp%3D&quot;&quot;%3Bvar cardText%3D%27<div class%3D&quot;blogCardTxt&quot;&gt;<p class%3D&quot;blogCardTitle&quot;&gt;<a href%3D&quot;%27%2Bobj.url%2B%27&quot;&gt;%27%2Bobj.title%2B%27</a&gt;</p&gt;<p class%3D&quot;blogcard-description&quot;&gt;%27%2Bobj.desp%2B&quot;</p&gt;</div&gt;&quot;%3Bvar cardFooter%3D%27<div class%3D&quot;blogCardFooter&quot;&gt;<a href%3D&quot;%27%2Bobj.url%2B%27&quot;&gt;<img src%3D&quot;https://www.google.com/s2/favicons%3Fdomain%3D%27%2Bobj.url%2B%27&quot; loading%3D&quot;lazy&quot;&gt;%27%2Bobj.domain%2B&quot;</a&gt;</div&gt;&quot;%3Bvar cardImg%3D%27<div class%3D&quot;blogCardImg&quot;&gt;<div class%3D&quot;blogCardImg__wrap&quot;&gt;<img src%3D&quot;%27%2Bobj.img%2B%27&quot; alt%3D&quot;%27%2Bobj.title%2B%27&quot; loading%3D&quot;lazy&quot;&gt;</div&gt;</div&gt;%27%3Bvar card%3D%27<figure class%3D&quot;blogCard&quot;&gt;<div class%3D&quot;blogCardCont&quot;&gt;%27%2BcardImg%2BcardText%2B&quot;</div&gt;&quot;%2BcardFooter%2B&quot;</figure&gt;&quot;%3Bprompt(&quot;%5Cu3053%5Cu306eHTML%5Cu3092%5Cu30b3%5Cu30d4%5Cu30fc%5Cu3057%5Cu3001HTML%5Cu7de8%5Cu96c6%5Cu753b%5Cu9762%5Cu3067%5Cu8a18%5Cu4e8b%5Cu306b%5Cu8cbc%5Cu308a%5Cu4ed8%5Cu3051%5Cu3066%5Cu4e0b%5Cu3055%5Cu3044&quot;,card)%7D)()%3B})();">ブログカード</a></p>

念のため、CSSは以下の通りです。

.blogCard {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 12px;
  margin-bottom: 1.6rem;
}
.blogCardCont {
  position: relative;
  margin-bottom: 5px;
  min-height: 100px;
}
.blogCardCont p {
  font-size: 12px;
  overflow: hidden;
  margin: 0;
}
.blogCardTxt {
  margin-right: 110px;
}
.blogCardTxt p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.blogCardTitle {
  margin-bottom: 5px;
  overflow: hidden;
  -webkit-line-clamp: 2 !important;
}
.blogCardTitle a {
  font-size: 17px;
  line-height: 1.4;
  color: #3d3f44;
  font-weight: bold;
  text-decoration: none;
}
.blogCardTitle a:hover {
  text-decoration: underline;
}
.blogCardImg {
  position: absolute;
  top: 0;
  right: 0;
}
.blogCardImg__wrap {
  float: right;
  width: 15%;
  min-width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.blogCardImg__wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: 100%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.blogCardFooter {
  font-size: 12px;
}
.blogCardFooter a {
  color: #9aa5ab;
}
.blogCardFooter a img {
  margin-right: 5px;
}
.blogCardTitle a i,
.blog article .blogCardFooter a i {
  display: none;
}
.blogCard.blogCard--noimg .blogCardCont {
  min-height: auto;
}
.blogCard.blogCard--noimg .blogCardTxt {
  margin-right: 0;
}