BLOG

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

 

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

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

 

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

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

 

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

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

 

Embedly使い方

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

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

 

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

http://embed.ly/cards

 

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

 

Embedly1

 

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

embed preview

 

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

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

 

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

 

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

 

Embedlyブックマークの使い方

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

http://embed.ly/bookmarklet

 

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

embedly bookmark

 

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

 

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

 

Embed bookmark

 

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

 

画像の縮小

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

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

 

記事本文の表示

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

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

 

 

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

 

完成品

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

 

画像はサイズは(大)記事の説明は非表示

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

 

画像はサイズは(大)記事の説明は非表示

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

 

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

 

Embedly以外のブログカード

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

 

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

 

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

 

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

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

 

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

 

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

 

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

カルペ・ディエムとメメント・モリの違いとは - スキニノート
カルペ・ディエムとメメント・モリの違いとは - スキニノート

  対義語というよりも、あくまで2つの異なった表現、相反する世界感。   memento mori(メメント・モリ) と carpe diem(カルペ・ディエム)   私

続きを見る

 

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

 

 

-BLOG

Copyright© スキニノート , 2020 All Rights Reserved Powered by AFFINGER5.