はてなブログっぽいリンク（ブログカード）をbloggerでも使いたい

はてなブログに憧れつつも、いまさら移動するのも面倒。なので、取り込めそうなところを取り込んでいくスタイル。


動機

はてなブログは記事中のリンクをカード形式で表示してくれるっぽい。タイトル・概要・画像がシンプルに纏まっててとても良い。これをbloggerで使うにはどうするかを調べたのでまとめる。以下のサイト様がブックマークレットを提供してくださっているので、拝借する。



方法

上記サイトでブックマークレットを入手する。読めばわかるはず。その後、カード化したいサイトに行って、ブックマークレットをクリック。ダイアログにブログカードのコードが出てくるので、コピー。

bloggerの投稿画面で「HTML」を選んで、挿入したい場所にペースト。

<iframe class="bookmarklet hatena-embed" src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fyorimoi.com%2F" style="border: none; display: block; height: 155px; margin: 0 0 1.7rem; max-width: 100%; overflow: hidden; width: 100%;" title="TVアニメ「宇宙よりも遠い場所」公式サイト"><a href="http://yorimoi.com/" target="_blank">TVアニメ「宇宙よりも遠い場所」公式サイト</a></iframe>

やったぜ。


サイトによってはカード右側の画像が出ないこともあるようです。


その他・備考

「それっぽく」なってきた。ただ、使いすぎるとスクロール量が増えて鬱陶しいので乱発は避けよう。

ブックマークレットで生成されるブログカードのサイズは幅100%・高さ155pxとなっていて、高さは固定。サイトによってはこの高さに収まらないことがあるので、プレビューを見ながら高さを適宜修正していく必要がありそう。

HTMLを<pre>で囲むときのエスケープがめんどくさすぎた。サクッと自動変換してくれるいい感じの何かが欲しい。