ブログでよく見るこのような表示。リンク表示でも画像もあってインパクトありますよね。どのような仕組みになっているかキニナル！さすがにこの画像とかタイトルとかを打ち込んでいると時間がバカにならんし、なにかツールを使っていますよね。どれどれ…。
そもそもこれってなに？
外部リンクをこのようなデザインで表示させる方法をブログカードと呼ぶんだとか。日本で有名なツールのひとつは「はてなブログのブログカード拡張機能」ですね。
はてなブログのブログカード
はてなブログを使ってないけど、iframe要素で「はてなブログカード」の機能を呼び出しているんです。
「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ
はてなブログでは、先日公開した「ブログカード」を拡張し、インターネットの一般的なWebサイトに対応しました。URLを貼るだけで、さまざまなWebページをコンパクトな「ブログカード」形式で紹介することができます。「ブログカード」は、ブログに掲載する記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め...
staff.hatenablog.com
たとえば、以下のソースを記事に埋め込むと、
このように、できちゃうんですね♪
これは便利だなぁ。けど、もうちょい目立たせたいなと思いまして。はてなブログカードとは別の表示方法を探していたら「Embedly」にたどり着きました。
Embedly
「Embedly」は入力したページURLからブログカードを作成するツールです。この記事からツールのことを知りました。わいひらさん( @MrYhira )ありがとうございます。
かなり大きくサムネイルが表示されるので、目立たせたいリンクにぴったり！使い方は以下の記事に詳しく書いていますので、おまかせ。簡単に取り入れることができるのでオススメです。
Embedlyで一風変わったブログカードをクリック一発で作成する方法
最近はてなブログカードがよく利用されています。このブログでもたまに使用していて、以下のようなiframeを用…
nelog.jp
まとめ
思っていた以上に他のサイトとデータがつながっているんだなぁと感じました。しばらくは「Embedly」を使っていこうと思います。
追記
WordPressにプラグインがあったので、現在はこちらを利用しています。
