こんにちは、@Yuuです。

皆さんブログ書かれていますか？
僕はいつも時間に追われ、ヒーヒー言いながら記事を書いております。
月に3,4記事しか更新出来ていないので、毎日更新している方をみると
「神だ・・(;ﾟдﾟ)」ぐらいに思う日々でございます。

さて、ブログを書いてる時に他のサイトを紹介すること、ありますよね？

そんな時におすすめなのが、これから紹介する「Embedly」というWebサービスです。 実際に使用すると以下のような感じで、サイトを紹介する事が出来ます。

たった30秒でイケてる画像が作れるMacアプリ！Intensify

おぉ！ステキ！
自分の記事にステキというのもなんですがw

このEmbedlyの利点は、簡単な設定をすればワンクリックでステキな見た目のブログカードが作れるところ、そしてレスポンシブにも対応しているところです。

ブログカードが作れるEmbedly

では、Embedlyの紹介を。

ブックマークレットを登録する

まずこちらのEmbedlyのブックマークレット登録ページにアクセスします。

画面中央に「+Embed」というボタンがあるので、それをブックマークツールバーまでドラッグアンドドロップし、ブックマークに追加します。

これでブックマークレットの登録は完了です！

ブックマークレットからブロクカードを作成する

では、先ほどのようなブログカードを作成してみます。

試しに、いつも愛読させて頂いているOZPAの表4さんの記事で試してみたいと思います。

サイトにアクセスし、先ほど登録した「+Embed」ボタンを押すと以下のように表示されます。

上記の画像に記載してある「Embedlyを使ったURL部分」をコピーして試しに貼り付けてみると・・

iPhone 6s Plusを4日ほど使ってみたので詳細レビュー。3D Touch最高です！

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

お手軽にいい感じのブログカードが出来ましたね！(๑•̀ㅂ•́)و✧

またEmbedlyを使用したブログカードはある程度カスタマイズできます。
例えば、最初に例として上げた自分の記事を、カスタマイズしてみると以下のような感じにも出来ます。

たった30秒でイケてる画像が作れるMacアプリ！Intensify

コードで書く（HTML /CSS分かる人向け）

見出しにも書いた通り、HTML/CSSが多少分かる人向けの内容になってしまうと思うので、HTML/CSSなんて知るか！という方は読み飛ばしちゃって下さい。

Embedlyを使う前と使った後のaタグを比較してみます。

Embedly使用前

Embedly使用後
分かりやすくなるよう、途中で改行しています。

2つのコードの違いを見れば、分かるかと思いますが、
aタグ内にclass="embedly-card"を付けて、
aタグ後に<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script> と書けば、Embedlyでのブログカードを作る事が出来てしまうというわけです。

ですので、今まで書いた記事内のリンクでEmbedlyのブログカードのように表示したい場合は、
aタグにEmbedlyのクラス名を追加し、aタグ後にEmbedlyのscriptタグを追加すれば、それでOKです！

いちいち、リンク先に飛んでブックマークレットのボタンを押さなくても、Embedlyのブログカードが出来るということですね。
素晴らしい！₍₍ (ง ˙ω˙)ว ⁾⁾

あとがき

これだけ簡単にブログカードが作れるのはいいですね。
見た目もステキだし、SNSボタンも付いている点も素晴らしいと思います。

ただ、リンクを全てEmbedlyでやりと、うっとうしく感じてしまう記事もあるかと思いますので、その辺は適材適所で対応して頂ければと思います。

もしも、Embedlyの表示方法が気に入られた方は、試してみて下さいね。

次回は、SoundCloudを使っている人向けのEmbedlyの記事を書きたいなと思っています。
SoundCloudをやっている人・興味がある人は期待してて下さい。

ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧