好きなものだけ詰め込んで、
好きなところへ
- Gadget Camera Camp Leather -

ブックマークレットで一発!WordPressに簡単にリンクカードを実装する方法を考える

   

Wordpress 581849 340

ブログ執筆環境をちょくちょく整備中。

空き時間を有効に!どこでも、iPadだけでWordPressのブログを書くツールのまとめ | GarretCafe

空き時間の有効活用のため、iPadだけでブログを書いて、投稿できる環境を作る、という記事を書きました。 iPadだけでWordPressのブログを書くのに必要なことを整理してみた 普段はMacBook ...

リンクを貼るときに、上記みたいに、ちょっとリッチなリンクカードタイプにしたくなることがある。
通常のテキストタイプのリンクとは違って、目を引くので、別の記事も読んで欲しい時とかに使いたい。

ということで、2022年の現状使えそうなリンクカード作成ソフトを見繕ったので、
メモしておきます。

はてなブログカード

昔から今までよく見かけるタイプ。はてぶろのブログカードを使ったリンクカードです。
必要最低限の情報と、シンプルで見やすいデザインが特徴。

ブログカード - はてなブログ ヘルプ

採用にあたって気になる点は、ピンバックが飛ばないこと。
違うブログにリンクを貼った場合、通常であれば、リンク貼りましたよ〜と、相手に通知がいきます。
リンク先の相手に認知してもらえるので、良いか悪いかは置いておいて、機能が一個減る。

まぁ、自分のブログにしかリンクを貼らない場合は気にならないか?

HeartRails Capture

昔よく使っていたやつ。
ウェブサイトのスクショ画像を作ってくれるサイトです。こちらで生成した画像を使って、リンクカードを作る。

HeartRails Capture | サムネイル画像/PDF ファイル作成サービス

洗練されてだいぶ使いやすいくなった第3世代のAirPodsを買ってみた | GarretCafe
  2022/01/05  新年明けましておめでとうございます。年明けのなんやらかんやらでバタバタしてて、更新が滞っていました。今年もぼちぼち隙をみて記事を更新していきますので、よろしくお願いいたします。新年一発目は、AirPodsのレビューです。第1世代のA...

JavaScriptとCSSで基本どうとでもなるし、慣れているので使いやすい。

欠点というか、気になっているのは、サイト全体のスクショが生成されるという点。
今作りたいリンクカードでは、アイキャッチ単体の画像を使いたい。

なので、他に良いものが見つからない場合につかうということで。

リンクカード

ブラウジングしていたら見つかったもの。

リンクカード最新版(ブックマークレット改訂を含む)のお知らせ - リンクカード

スクリーンショット 2022 01 06 22 50 49

アイキャッチも拾えるし、基本的に良いかんじ。
ただ、アイキャッチが相手のサイトに直リンクっぽいので、相手のサーバーに負担がかかりそう。いいんだろうか。

自分のサイト内ならOKだと思うので、悩み。

リンクカードその2

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

コク深い麺つゆに納得感バシバシ!駐車場もあって来訪しやすい矢田部茶屋 | GarretCafe

第16回目の今回は、深大寺を通れば、一度は見るであろう深大寺蕎麦屋さんへ行ってきました。 駐車場を探すだけで疲れが溜まってしまう深大寺では、駐車場が備え付けてあるお蕎麦屋さんへは来訪しやすく、非常にあ ...

サイト直リンクはこちらも同様。
まぁでもCSSで好きにカスタムできるし、ブックマークレットで一発だし、楽ちんかも。

Pz-LinkCard

WordPressでリンクをカード形式で表示する Pz-LinkCard | ぽぽづれ。

リンクカードを作れるWordPressのプラグイン。
プラグインが死んだ時のことを考えると怖いので、ちょっと辛い。

あと、WordPressの編集画面を使ってブログを書かないので、使い勝手が合わなそう。

Embedly

使っている人が多い。
デザインもお洒落。

Bookmarklet: instantly generate a Card for any web page. | Embedly

スクリーンショット 2022 01 07 0 08 50

有料化が進んでいるのと、デザインに融通が効かなそうなので、常用は難しそう。

ShareHtmlを、もっと綺麗にしたメーカー

昔めちゃくちゃお世話になったShareHtmlをリバイスしたウェブサイト。
シンプルイズベストという感じ。好き。

ShareHtmlを、もっと綺麗にしたメーカー

スクリーンショット 2022 01 07 0 07 24

ただ、こちらもアイキャッチが相手のサイトに直リンクなので、他サイト紹介時に使いづらいのが難点。

僕が直リンクと思っているだけで、実は相手に負担がかからない記法になっていたりしているのかな。わからん。

今回の結論

リンクカードを作れるウェブサイトやツールをリストアップしました。
僕のブログ執筆状況にマッチしたツールはあまり多くなかったので、ちょい悩みました。

結論としては、リンクカード2を使用させていただこうかなと思います。
CSSで少し見た目をいじってみます。