mainvisual

はてなブログを見たことある人なら、このようなリンクを見たことあるかと思います。

この、デザインされたリンクの事を「カードリンク」といいます。 はてなAPIから提供されており、iframeを使うことによって簡単にHTMLに埋め込む事が出来ます。

はてなリンクカードを使う方法

はてなリンクカードはiframeを使うことで、HTMLに埋め込む事が可能です。iframeで必要な属性はtitle,src,frameborder,scrollingです。

titleはユーザービリティの向上から、SEO対策として有効です。

srchttps://hatenablog-parts.com/embed?url=<リンクカードのURL>のようにURLを書くとリンクカードが表示されます。

全体コードはこのようになります。

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

はてなブログの場合、リンクカードの使えるリンクと使えないリンクが存在するので、iframeで対応するのも手です。

参考:

はてなリンクカードの幅を調節する方法

iframeだけだと、幅が100%表示なので、不格好になることがあります。この場合は、iframeにCSSを適応するといいです。渡しの場合はc-hatena-embedというクラス名をつけて使用しています。

cはcomponent、hatena-embedでhatena埋め込み要素であることを示しています。

.c-hatena-embed{
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    margin: 0 0 1.7rem;
    border: none;
}

重要なのは、width: 100%;max-width: 500px;です。この2つがあるお陰で、幅が500px以上のときは500pxで、それ以下のときは画面幅に合わせる という、「レスポンシブ対応」が可能になります。

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

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

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

補足2: oEmbedとは

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

oEmbedとは

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

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

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

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

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

補足3: 他の既成デザインのブログカード

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

補足4: もっと知りたいなと思ったときは!

はてなブログについての本が出ています。この本は私もよく読んでいて、ブログを作るための基本としています。

その他、この記事でわからないことがあったら、teratialというサービスを利用するといいと思います。 勇者が初歩的な質問からマニアックな質問に幅広く答えてくれますよ! 是非、一度使ってはいかがでしょうか?

comments powered by Disqus