おしゃれで素敵なブログカードがワンクリックで作れるWebサービス!Embedly
![Embedlyの紹介記事用のアイキャッチ画像](https://yuu.1000quu.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
こんにちは、@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をやっている人・興味がある人は期待してて下さい。
ではでは
今回はこの辺で!ヽ(•̀ω•́ )ゝ✧
![Embedlyの紹介記事用のアイキャッチ画像](https://yuu.1000quu.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)