ブログで外部サイトのリンク先を入れる際、
テキストではなくカードタイプで表示したい。
はてなブログや、WordpressのテーマにはURLを入力するだけで、
カードタイプに表示できるものもありますが、その機能がついてないものもある。
今回は、URLを入力して対象のページのブログカードを作成するツール
「Embedly」を使って外部リンクカードを作成する方法について。
Embedly使い方
Embedlyの使い方には「コードジェネレーター」と「ブックマーク」の２種類 があります。
カスタマイズなどはブックマークの方が簡単ですので、そちらをオススメします。
コードジェネレーターを使う場合はまず、以下のサイトを開きます。
「MAKE A CARD FOR FREE」と書かれたボタンがあるのでクリックします。
URLを入力すると、画面下にプレビューが表示されます。
画面横にはカスタマイズ設定があります。
SNSボタンや背景の色などお好みでカスタマイズ。
URLを入力した部分の左にある「EMBED」をクリックします。
プレビュー画面の下「Embed Code」に生成されたコードがあるので、コピーして「テキスト」に貼り付けます。
Embedlyブックマークの使い方
まずブックマークレットのページを開きます。
「＋Embed」をドラッグしてブックマークバーにドロップします。
使う時は、リンク先のページを開き、ドロップした「＋Embed」をクリックするだけです。
リンク先を決め、「＋Embed」をクリックするとこのように表示されます。
これではカードが大きすぎるので、コードをコピーする前にカスタムします。
画像の縮小
画像にカーソルを当てると画像左下に矢印が表示されます。
クリックすると画像が小さくなります。
記事本文の表示
記事タイトル下の本文にカーソルを当てると背景が黄色に変わり、
本文右上に「×」マークが表示されるので、クリックすると本文が非表示にできます。
最後に画面下のコードをコピーし、「テキスト」に貼り付けます。
完成品
Embedlyで作成したブログカードはこうなりました。
画像はサイズは（大）記事の説明は非表示
画像はサイズは（大）記事の説明は非表示
David Bowieの「Life on Mars?」のピアノが美しすぎる。
よくあるブログカードは画像が小さめですので、大きいといつものカードとの差別化も出来ます。
Embedly以外のブログカード
WordPressではURLをビジュアル（通常の記事作成）にそのまま貼り付けると
このように表示されます。
スッキリと表示させるなら、今日紹介した「Embedly」
もしくはプラグインを使うという方法があります。
私は最初の頃「Pz-LinkCard」というプラグインを使用していました。
また、Wordpressテーマにはブログカードも簡単に表示できるものもあります。
私が現在使っているAFFINGER5ではこのように表示出来ます。
-
-
カルペ・ディエムとメメント・モリの違いとは - スキニノート
対義語というよりも、あくまで２つの異なった表現、相反する世界感。 memento mori（メメント・モリ） と carpe diem（カルペ・ディエム） 私
続きを見る
他にも無料のテーマでブログカード機能がついているものもあります。