mainvisual

ついにみつけました!

自分でブログを作っていると、 サイトのリンクがとてもデザイン的にみっともないなぁ〜と思って、 いつかははてなブログで提供されているものを自前のAPIで作っちゃおうかと思っていたんです。

で、はてなブログ中にあるHTMLを解析したとこり、 iframeタグを使って内部にHTMLドキュメントを構築して表示している事がわかりました。

多分検索したら何か引っかかるかなと思ったので、 「hatena link iframe」というキーワードで調べると、探していたものがみつかりました!

どうやら、このような綺麗なリンクのことを、「ブログカード」というようです。

はてなブログカードの埋め込み方法(すべてのサイトで対応可能)

情報は下記のリンク先から仕入れました。

この方法によると、iframeタグを使って、 このように書くことでデザインされたリンクを作成出来るようです。 例えば、上記のリンクはこのように書いています。

<iframe
  class="c-hatena-embed"
  title="はてなブログカードのような美しい外部リンクをクリック一発で作成する方法"
  src="https://hatenablog-parts.com/embed?url=http://nelog.jp/hatenablogcard"
  frameborder="0"
  scrolling="no">
</iframe>

これをそのままブログにコピーするだけで、綺麗なリンクの完成です。

URLを変えたければ、https://hatenablog-parts.com/embed?url=以降の部分をhttp から書き換えて下さい!同時にタイトルを書き換えるのもお忘れなく!

また、これは例としてstyle属性にベタ書きしてますが、cssで外に出してもいいです!

Wordpressを使っている人は、もっと便利に使える

Wordpressを使っている!というひとは、こっちの記事が参考になります。

内容としては、はてなブログoEmbed APIを使って、ゴニョゴニョしている模様です。

oEmbedとは

Wordpressでブログカードを使う記事を見ていると、 「oEmbed」という単語が出て初めて見たので調べました。

oEmbedとは

oEmbedと、サードパーティのサイト上のURLの埋め込み表現を可能にするためのフォーマットです。 Webサイトが(そのような写真やビデオなど)埋め込まれたコンテンツを表示するときに、開発者がHTMLの内容を直接解析すること無く、その埋め込み先リンクの情報をシンプルなAPIで提供することを目的とした規格です。

http://oembed.com/ | oembed 仕様書公式サイト

なるほど!外部リソースを便利に使うために、規格を統一しましたと。それが、「oEmbed」ということみたいです。

この記事内では詳細に解説はしないで、詳しくは別の記事をみてください。 個人的には、本家の英語ドキュメントが読みやすかったです。

英語がダメという人は、以下の時期を参考にするといいと思います。

他の既成デザインのブログカード

はてなブログカードの他にも、Embedlyブログカードという種類も存在します。 はてなブログとはかなり違ったデザインなので、テーマに合わせて変えてみるのもいいかもしれませんね!