2017年10月8日

Embedlyを使ってブログカードを作ってみた

以前からほかのブログとかを見てると、埋め込みでサムネイル付きのリンクが貼り付けてあって、こういうの自分もやってみたい!って思っていたのですが、調べてみると「はてなカード」と言って、はてなブログ用のサービスらしいんです。

このブログはBloggerですので、残念ながら「はてなカード」は使えないんですよね。

そこで他に何かいい方法はないかと探してみたところ、今日、Embedlyというサービスを見つけました。

試しにブログカードを作ってみましたので、その使い方をちょっとご紹介したいと思います。


まず、Embedlyのサイトに行きます。
http://embed.ly/




サイトにアクセスしたら、上部にある「PRODUCT」をクリックします。
するとメニューが開いてきますので、その中から「Cards to quickly get started」を選びます。



次に、「MAKE A CARD FOR FREE」を選びます。



するとこのようなページが表示されますので、ブログカードを作りたいサイトのURLを入力します。



URLを入力するとこんな感じになります。



次にサムネイル横に表示されるソーシャルボタンの中からEMBEDボタンをクリックします。



するとこのような画面が表示されてきます。
この画面で少しカスタマイズが出来ますので、サムネイル画像を小さくしてみます。画像の左下の縮小マークをクリックします。



こんな感じになります。



次に記事概要部分を削除してみたいと思います。
記事概要部の右上の×ボタンをクリックします。



サムネイルとタイトルだけになりました。



あとは、下部に表示されているタグコードをコピーして、記事の中に貼り付ければブログカードが表示されるようになります。
<a class="embedly-card" data-card-description="0" data-card-type="article" data-card-via="http://embed.ly/code?url=https%3A%2F%2Fhosopro.blogspot.jp%2F2014%2F03%2Faccess-update-insert.html" href="https://hosopro.blogspot.jp/2014/03/access-update-insert.html">【Access】 あれば更新なければ追加 | ほそぼそプログラミング日記</a><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>


実際作ったものがこちらになります。

【Access】 あれば更新なければ追加 | ほそぼそプログラミング日記

外枠の罫線とか無いんでちょっとアレですが、そこは自前でどうにでもなります。
記事によってはサムネイルの画像がうまく表示されない場合もありますが、これからこのEmbedlyを使ってブログカードを作っていきたいと思います。


<参考サイト>
Embedlyで一風変わったブログカードをクリック一発で作成する方法 | 寝ログ
「Embedly」のブログカードを小さく表示したい時の使い方 | ぐうたら紺の勉強帳


スポンサーリンク