※EnbedlyのWordPressプラグインがバージョンアップしてより使い勝手が上がったので、一部記事を修正しました(平成27年10月27日)。

ブログを書いていると、他サイトを紹介したいときが出てくると思いますが、ただのリンクでは味気ないし、クリックしてみるまでどんなサイトかわかりません。はてなブログカードのような感じで、いい感じのデザインのやつがないかなぁと探していたら、Embedlyというサービスが有ったのでご紹介します。

Embedlyとは?

実際に見てもらったほうが早いので、下記にいくつかのサンプルを貼り付けてみたいと思います。

ウェブサイトやブログ

安彦キャラの再現度が凄まじい「機動戦士ガンダムTHE ORIGIN 青い瞳のキャスバル」 – エキレビ!

「機動戦士ガンダム THE ORIGIN 起源の啓示 青い瞳のキャスバル」2.28(土)〜3.13(日)二週間限定 全国13館にてイベント上映(C)創通・サンライズ 配給 松竹 ( 1 / 2 ) ●冒頭のルウム戦役は手描きアニメとCGの集大成ガンダム専門誌『ガンダムエース』誌上で連載されていた『機動戦士ガンダム THE …

YouTube

MOBILE SUIT GUNDAM THE ORIGIN II Artesia’s Sorrow Trailer#1

機動戦士ガンダム THE ORIGIN Ⅱ 哀しみのアルテイシア 予告1 機動戰士高達THE ORIGIN II 預告篇#1 機動戰士鋼彈THE ORIGIN II 預告篇#1 机动战士敢达THE ORIGIN II 预告篇#1 MOBILE SUIT GUNDAM THE ORIGIN II Artesia’s Sorrow Trailer#1 모빌 슈트 건담 디 오리진 II Trailer#1

ツイート

T.Matsuda on Twitter

THE ART OF GUNDAM。安彦良和氏の作画を眺めながら腹の中でうおおおおお、、と唸り続けてた(笑)。小さい頃からよーく知ってる劇場版ポスターやレコードジャケットの原画からも暫く目を離せなかった。もう一回観たいですよ。pic.twitter.com/GKplCTARb7

このような感じで、カード内にサムネイルやリンク先の抜粋、ファビコンや執筆者、シェアボタンまでが表示されます。これであれば、リンク先にどのようなことが書いてあるのかがイメージできますし、シェアも簡単、何よりデザインがいいですよね。 では早速使い方を見て行きましょう。

Embedlyの使い方

Embedlyの使い方はいくつかの方法がありますが、ここでは3種類の方法をご紹介します。

[list icon=”fa-icon-ok” icon_color=”#81d742″ ]Embedlyのサイトから、埋め込みコードを取得する方法。,ブックマークレットから、埋め込みコードを取得する方法。,WordPressプラグインから、埋め込みコードを取得する方法。[/list]

それでは、順番に使い方をご紹介したいと思います。

Embedlyのサイトから利用する方法

[divide icon=”square”]
  1. 予めブログカードにしたいサイトのURLをコピーしておきます。
URLをコピー
URLをコピー
[divide icon=”square”]
  1. Embedlyのサイトへアクセスし、[CREATE EMBED]をクリックします。
Embedlyのトップページ
Embedlyのトップページ
[divide icon=”square”]
  1. [Paste in a URL to embed…]と書かれたテキスト入力エリアに、先ほどコピーした埋め込みたいURLを貼り付けます。
URLを貼り付ける
URLを貼り付ける
[divide icon=”square”]
  1. 数秒待つと、プレビューと埋め込みコードが表示されます。[CLICK TO COPY EMBED CODE]をクリックすると、埋め込みコードをコピーすることが出来ます。
コピーボタンをクリック
コピーボタンをクリック
[divide icon=”square”]
  1. 最後に、そのコピーした埋め込みコードをブログのHTML入力部分に貼り付ければ完了です。
投稿画面にコードを貼り付け
投稿画面にコードを貼り付け
[divide icon=”square”] また、コード取得時のプレビュー画面上にマウスを合わせると、矢印のアイコンや☓ボタンが現れたり、選択範囲部分の色が変わったりします。

  • サムネイル上にマウスカーソルを合わせると出てくる矢印アイコンは、クリックするとサムネイルのサイズを大⇔小と変更することが出来ます。
  • テキスト上にマウスカーソルを合わせると出てくる☓印は、クリックするとそのテキストを非表示に出来ます。
  • テキスト場にマウスカーソルを合わせ、背景の色が変わる部分をクリックすると、テキスト内容を修正できます。抜粋が長過ぎるような場合には、短くするのに利用できます。

ブックマークレットから利用する方法

頻繁に活用する場合は、公式に配布されているブックマークレットからの利用が便利です。埋め込みたいサイトから1クリックでコードが取得できるようになります。 [divide icon=”square”]

  1. Bookmarklet | Embedlyへアクセスし、[+Embed]と書かれた部分をブラウザの[お気に入り]や[ブックマークバー]などにドラッグします。
+Embedをブックマークバーにドラッグ
+Embedをブックマークバーにドラッグ
[divide icon=”square”]
  1. ブックマークバーに[+Embed]が追加されるので、埋め込みたいサイトを表示させてから[+Embed]をクリックすると、プレビューが表示され、埋め込みコードが取得できます。
クリックでコードを取得できるようになる
クリックでコードを取得できるようになる
[divide icon=”square”] ブックマークレットを使ったことがないと難しく感じるかもしれませんが、実際はとても簡単で、使い勝手もいいですね。

WordPressプラグインから利用する方法

Embedlyには、公式のWordPressプラグインも用意されています。WordPressユーザーの方はこれを利用するのもひとつの手です。

Embedly
Embedly
Developer: Embed.ly Inc
Price: Free
  1. WordPress › Embedly « WordPress Pluginsからプラグインを入手するか、プラグインの検索画面から[Embedly]で検索すると見つけることができるので、インストール後有効化します。
  2. プラグインの設定画面に入ると、[Embedly Key]の取得を促されるので、表示されているリンクから公式サイトへ飛び、ユーザー登録後、[Embedly Key]を取得します。
  3. 取得した[Embedly Key]を、Embedlyの設定画面から入力し、保存します。
  4. あとはブログ記事投稿画面へ行き、URLを入力するだけで利用できるようになります。

プラグイン利用のメリット

  • 記事投稿画面からURLを入力するだけで利用でき、ビジュアルモード内でプレビューも可。

プラグイン利用のデメリット

  • ユーザー登録が必要。

まとめ

たまに使用する程度であれば、Embedlyのサイトへ行ってコードを取得するのでもいいのですが、よく利用する場合は、現在のところブックマークレットが一番便利だと思います。また、WordPressユーザーであれば、最初のユーザー登録が必要なものの、プラグインを利用すればURLを記入するだけで利用できるので、それを利用するのもいいですね。 いずれの方法にしても、Embedlyのサービスはとても便利なので、気になった方はぜひ利用してみてください。

おまけ

多くのブログに設置してあるSNSのシェアボタンのように、このEmbedlyも埋め込みボタンが用意されています。ブログを訪れた方が、そのボタンを押すことで簡単に自分のブログに埋め込む事ができるというものです。

Embed

これらの設置も面白いかもしれませんね。ボタンの設置コードは、The Embed Button allows your readers to easily share and embed your posts on their sites | Embedly から取得することが出来ます。

Embedly makes your content more engaging and easier to share | Embedly

Embedly delivers the ultra-fast, easy to use products and tools for richer sites and apps.

Load More Related Articles
Load More By kenc0224
  • Macのショートカットキー紹介時に役立つ簡単カスタマイズ!

    Macのショートカットキー紹介時に役立つ簡単カスタマイズ!

    Macに関する操作方法やショートカットキーをブログで紹介する際に、普通にキーの文字列を入力して提示するだけでもいいのですが、もう少し視覚的にもわかりやすい方法はないかなーと思い、H…
Load More In Web制作

2 Comments

  1. […] Embedly:いろんなサイトをブログカードで埋め込みできるサービスが超便利! | タノコレ […]

    Reply

  2. […] Embedlyで一風変わったブログカードをクリック一発で作成する方法こいつぁ便利ね…!他サイトの記事紹介リンクをかっこ良く作成してくれる「Embedly」Embedly:いろんなサイトをブログカードで埋め込みできるサービスが超便利…なるほど、YouTubeとかTwitterまでカードでシェアできるのか!やはり便利。 […]

    Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Check Also

CloudMounter:クラウドストレージを外付けディスクのように扱えるMacアプリ

クラウドストレージを外付けディスクのように扱うことができるMacアプリ、「CloudMounter」が3,600円→240円のセール中となっています! クラウドストーリッジをネット…