概要 他のページへのリンクをスマートに表示できる「ブログカード」を提供元のはてなブログ以外で簡単に使う方法を紹介。もちろんライブドアブログもOKです。

というわけで、はてなブログは使っていなくてはてなダイアリーしか開設していない私ですが、はてなのブログカードって「お、これいいな〜」と思っていたのですよ。


はてなのブログカードとは、以下の画像で見える、記事のタイトルと概要とスクリーンショット(またはイメージ)がコンパクトにまとめて紹介できるものです。

20141009-はてなブログカードを他のブログサービスで使う-01

画像出典:はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます【追記あり】(はてなブログ開発ブログ)


ただ、開発日記を見てみると、この機能を他のブログサービス、例えばライブドアブログやMovable Typeなどで使おうとするとちょっと敷居が高いように思えました。なんですか、oEmbedって…。(詳しくは→はてなブログoEmbed APIを公開しました。ブログカードの情報をAPIで取得できます(開発者向け)(はてなブログ開発ブログ))


●ブログカードは他のサービスでは手軽に使えないと思ったら

他のブログサービスでは手軽に使えないのか…残念!と思っていたら、こんなブログ記事が!

このページを読むと、iframeのsrcに「http://hatenablog.com/embed?url=《表示したいアドレス》」と書けばOKとのことだそうです。動作原理は簡単でしたね。




それも、ブログ記事には、わざわざGoogle Chromeの機能拡張「Create Link」、Firefoxの機能拡張「Make Link」用のブログカードのHTMLを作るためのテンプレートまで書いてあって、とても親切です。

私はFirefoxの機能拡張「Fire Link」ですけど、同じテンプレートで行けました。


これを使うと、ブログ記事のリンクがすごく簡単!

先程の記事もブログカード形式で表示してみました。はてなブログではないライブドアブログでもきちんと表示されていますよね。



●私が使ったブログカードのHTMLを作るテンプレート

先程のページに書いてある「Create Link」「Make Link」用HTML作成テンプレートのママでも良いのですが、横幅が「width:100%;」となっていて、ブログをPCで見た時にブログカードが横に伸びすぎてあまり格好が良くなかったので、「width:480px;」とピクセル指定にしました。


また、私が使ったHTMLを作成するテンプレートでは、iframeタグの中に、aタグでリンク先を記述してあります。aタグで普通にリンクを書いておくと後々便利なのかなと思っています(主にブログカードのサービスが終わった時やメンテナンスの時など)。

ということで、ちょっと修正した「Create Link」「Make Link」「Fire Link」用HTML作成テンプレートのコードはこれ。

<iframe style="width:480px;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" title="%title%" src="http://hatenablog.com/embed?url=%url%" frameborder="0" scrolling="no"><a href="%url%">%title%</a></iframe>


「Create Link」「Make Link」「Fire Link」などの機能拡張を使って、スマートに記事へのリンクを貼っていきましょう。

それでは、よいはてなライフを。



●関連ページ

ブックマークレットを作っている方も。



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索