外部リンクをブログカードで表示する3つの方法

外部リンクをブログカード表示で紹介したい時に使える方法を紹介します。 ブログカードとは、記事のタイトルやアイキャッチをカード表示してリンクを見やすくするものです。  

①ブックマークレットを使用する

ブックマークバーにツールを追加することによりボタン一つでブログカードを使用できるようにする方法です。 2通りのサイトで紹介されています。 デザインに少し差があるので、好みのほうを使ってみてください  

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

こんにちは、めぐたんです。 ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。...

www.granfairs.com

 

ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応し　

vanillaice000.blog.fc2.com

②iframelyを使用する

iframelyというサイトツールを使用すれば簡単に外部リンクをブログカードに変換することができます。 こちらのサイトにアクセスします。

Generate Responsive Embed Codes via Iframely

Get responsive embed codes for your YouTube, Vimeo or over 1900 others

iframely.com

URLを入力して「CHECK NOW」をクリックします。 出力されたコードをコピペすることでブログカードとして表示することができます。 ↓こちらはiframelyで作成したブログカードです。  

③embed.ly　を使用する

こちらのサイトにアクセスします。

Embed Code Generator | Embedly

The card generator has moved to the Embedly Dashboard.

embed.ly

ブログカードにしたいURLを入力して「EMBED」をクリック 下にでてくるコードをコピペすれば完了です。 ↓embed.lyで作成したブログカードです

Embed Code Generator | Embedly

Enter a URL and Embedly will generate HTML you can embed in your site or blog.

 

まとめ

ブログカードにする方法を3つ紹介しました。 自分にあったものを使用してサイト作成に役立てていただければと思います！