はてなブログカードよりもこれ!Embodyを使ってオシャレなリンクを!

embedly私がブログを再開して気づいた事の一つの中に、他のブログによく使われている「はてなブログカード」や「ブログカード」というもの。

hatenablogcardこういうやつですね。
ほぅ・・・。

私も使いたい!!!
どうやったら使えるんだろうなと調べた結果これを使う際の注意点があるようです。

WordPressではてなブログカードを使う際の注意点

  • 1. 公式から認められている方法なのか不明
  • 2. はてながサービス終了すると使えない
  • 3. はてなの仕様変更があると、今までのリンクが無駄になる
  • 4. 参照元が当ブログではなく、はてなドメインになる

1.2.3に関しては、はてな側の事なのでどうやっても知るすべはないと思います。
現状、WordPressで使えている人がいる事を考えると、黙認されている部分もあるとは思いますが、急遽使えなくなるといった可能性も十二分にありえます。
4に関しては、当ブログのような超弱小ブログは少しでも存在を知ってもらいたいという切実な思いがあるのでかなり痛いです。(実際にどれほどの差があるのかは不明ですが。)

という事で、私がはてなブログカードを使う事が不可能という事が分かってしまいました。
はてなブログカードに似せたブログカードなどを作成・公開されているのも見つけましたがどうもしっくり来ず。

そんな時にみつけたのがEmbedlyというサービスです。前置きが長くなってしまいましたがEmbedlyがどういったサービスなのかご紹介したいと思います。

Embedlyとは?

Embedlyは簡単にリンクコードをオシャレに生成してくれるサービスです。
Embedly makes your content more engaging and easier to share | Embedly
YouTubeやTwitter、Instagramなど、どんな外部サイトでもなんでもいけちゃいます。

どうですか?オシャレじゃないですか?
あまり使っているブログを見かけないので、他ブログとの差別化も込みで良い印象があるかなと思います。

こんなオシャレなリンクをさくっと作れて、レスポンシブ対応ですし、もちろん参照元も自分のブログからになります。

Embodyの使い方

Bookmarklet: instantly generate a Card for any web page. | Embedly
Bookmarklet: instantly generate a Card for any web page. | Embedly
上記の公式サイトにブックマークレットが用意されています。

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

ブックマークバーに登録しましょう。
embedly01
これで前準備は終わりです。簡単でしょ?

実際に使ってみます

embedly02
リンクしたいページで、先程のブックマークレットをクリックします。
embedly03
クリックするとこんな風に表示されるので、下部のコードをコピーして貼り付けるだけ!

簡単すぎません?

けど、画像が大きすぎるとか、抜粋が長すぎない?とか色々と気になるところもあったりすると思います。

応用編

抜粋を編集する

出力されるコードをササッと自分好みにできます。
embedly04
抜粋にカーソルを合わせることで、抜粋部分の右上にバツ印が出てくるので抜粋を消す事もできますし、抜粋を編集することも出来ます。

画像の大きさを変更する

embedly05
画像にカーソルを合わせると、右上にバツ印、左下に画像サイズの変更ボタンが表示されます。

画像を小さく、抜粋なしで出力すると

embedly06
このような感じになります。
好みの形にした状態でコードをコピーするとその状態で出力されます。

まとめ

Embedlyを使うと、非常に簡単にオシャレなリンクを生成することができますね。
画像を大きく見せたいリンクを貼りたい時や、小さく見せたい時。抜粋なし、あり。など色んなパターンをEmbedlyひとつで作れるのは非常に便利だと思います。
冒頭で触れた、はてなブログカードの問題点である

  • 1. 公式から認められている方法なのか不明
  • 2. はてながサービス終了すると使えない
  • 3. はてなの仕様変更があると、今までのリンクが無駄になる
  • 4. 参照元がはてなドメインになる

上記の4点もクリアしています。
2のサービス終了したら使えないじゃんという点ではEmbedlyも同じなんですが、Embedlyが終了しても今まで貼ったリンクが通常のテキストリンクとして残るので無駄も生まれないという利点があります。

data-matched-content-rows-num="4" data-matched-content-columns-num="3" data-matched-content-ui-type="image_stacked"

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.