外部リンクをブログカード表示で紹介したい時に使える方法を紹介します。
ブログカードとは、記事のタイトルやアイキャッチをカード表示してリンクを見やすくするものです。
①ブックマークレットを使用する
ブックマークバーにツールを追加することによりボタン一つでブログカードを使用できるようにする方法です。
2通りのサイトで紹介されています。
デザインに少し差があるので、好みのほうを使ってみてください
はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ
こんにちは、めぐたんです。
ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。...
ブログカードのブックマークレットを作成しました
SSL化後の悩ましい作業のひとつ ブログカード
これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀)
画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。
* 2018年現在ではSSL対応し
vanillaice000.blog.fc2.com
②iframelyを使用する
iframelyというサイトツールを使用すれば簡単に外部リンクをブログカードに変換することができます。
こちらのサイトにアクセスします。
Generate responsive embed codes - 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
Enter a URL and Embedly will generate HTML you can embed in your site or blog.
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つ紹介しました。
自分にあったものを使用してサイト作成に役立てていただければと思います！
