ブログカードにEmbedlyを使うことにしました。

ブログで外部サイトのリンク先を入れる際、

テキストではなくカードタイプで表示したい。

はてなブログや、WordpressのテーマにはURLを入力するだけで、

カードタイプに表示できるものもありますが、その機能がついてないものもある。

今回は、URLを入力して対象のページのブログカードを作成するツール

「Embedly」を使って外部リンクカードを作成する方法について。

Embedly使い方

Embedlyの使い方には「コードジェネレーター」と「ブックマーク」の２種類　があります。

カスタマイズなどはブックマークの方が簡単ですので、そちらをオススメします。

コードジェネレーターを使う場合はまず、以下のサイトを開きます。

http://embed.ly/cards

「MAKE A CARD FOR FREE」と書かれたボタンがあるのでクリックします。

URLを入力すると、画面下にプレビューが表示されます。

画面横にはカスタマイズ設定があります。

SNSボタンや背景の色などお好みでカスタマイズ。

URLを入力した部分の左にある「EMBED」をクリックします。

プレビュー画面の下「Embed Code」に生成されたコードがあるので、コピーして「テキスト」に貼り付けます。

Embedlyブックマークの使い方

まずブックマークレットのページを開きます。

http://embed.ly/bookmarklet

「＋Embed」をドラッグしてブックマークバーにドロップします。

使う時は、リンク先のページを開き、ドロップした「＋Embed」をクリックするだけです。

リンク先を決め、「＋Embed」をクリックするとこのように表示されます。

これではカードが大きすぎるので、コードをコピーする前にカスタムします。

画像の縮小

画像にカーソルを当てると画像左下に矢印が表示されます。

クリックすると画像が小さくなります。

記事本文の表示

記事タイトル下の本文にカーソルを当てると背景が黄色に変わり、

本文右上に「×」マークが表示されるので、クリックすると本文が非表示にできます。

最後に画面下のコードをコピーし、「テキスト」に貼り付けます。

完成品

Embedlyで作成したブログカードはこうなりました。

画像はサイズは（大）記事の説明は非表示

「 ほぼ日手帳2019」F1ファン的使い方

画像はサイズは（大）記事の説明は非表示

David Bowieの「Life on Mars?」のピアノが美しすぎる。

よくあるブログカードは画像が小さめですので、大きいといつものカードとの差別化も出来ます。

Embedly以外のブログカード

WordPressではURLをビジュアル（通常の記事作成）にそのまま貼り付けると

カルペ・ディエムとメメント・モリの違いとは

このように表示されます。

スッキリと表示させるなら、今日紹介した「Embedly」

もしくはプラグインを使うという方法があります。

私は最初の頃「Pz-LinkCard」というプラグインを使用していました。

また、Wordpressテーマにはブログカードも簡単に表示できるものもあります。

私が現在使っているAFFINGER5ではこのように表示出来ます。

他にも無料のテーマでブログカード機能がついているものもあります。