Bloggerでブログカード？
ブログカードとは、以下のようなカード型のリンクです。
Google のレンタルブログサービス Bloggerには、はてなブログのように標準でブログカードを作成できる機能はないため、外部サービスを利用するのが手軽です。今回は、Bloggerで使えそうなブログカード作成サービスについてみていきます。
はてなブログのブログカードを(裏技的に)はてな以外でも使う
はてなブログ以外でもなんと、表示できてしまうようです。
こちらのサイトで紹介されていました。
以下のコードは、はてなブログのブログカードを表示させる場合の記述の一例です。
下の入力欄にURLを入れると、「ここにブログカードを作成したいページのURL」の部分が置き換わります。コピーする際にご利用ください。
上の黒いボックスに表示されているコードを、Bloggerなどの記事HTMLに貼り付けることで、ブログカードが読み込まれるはずです。
ただし、外部サービスを使うときの欠点として、仕様変更が為された場合には表示されなくなるリスクがありますので、その点には注意が必要です。
embed.ly を使う
以下のようなリンクが作成できます。
Official Blogger Blogembed.lyでリンクを無料で作成するには、Embed Code Generator と ブックマークレット の二種類の方法があります。両者の違いは以下の通りです。
Embed Code Generator
・Embed Code Generator のページにURLを入力して、コードを生成する
・Embed Code Generator で作成したブログカードは、シェアボタンの有無などは設定できるが、画像のサイズは設定できない
ブックマークレット版
・ブックマークに登録後、ブログカードを作成したいページをブラウザで開いているときに、登録したブックマークを押してブログカードを生成する
・ブックマークレットで作成したブログカードは、画像のサイズを変更できるが、シェアボタンの有無などは設定できないほか、ブックマークレットが上手く作動しないページがある
ブックマークレット版の使い方やカスタマイズについては、こちらのサイトが詳しく解説されていました。
ブログカードのHTMLを生成するツールいろいろ
以下のツールはどれも、HTMLを生成するだけで、外部のAPIに依存はしません。ですからCSSによるデザインのカスタマイズもほぼ自由に行うことができます。
ブログカードのブックマークレット
こちらのサイトで公開されているブックマークレットを使うと、ちょうどこのようなブログカードが作成できます。
SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。 かといって はてなブログカード はSSLに対応できてないですし。 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑) そしてEmbedlyは非常にカスタマイズし辛いんですね。 ほとんどできないと言っ...
公開されているブックマークレットには「通常版」と「引用版」の二種類があり、「引用版」の方では、サイトの説明文が<blockquote>タグで囲まれます。リンク先の説明文と自分のページのコンテンツとを区別したい場合は引用版が便利です。
ブログカードを作成したいページを開いているときに、ブックマークに登録したブックマークレットをクリックすることで、以下のようなダイアログとブログカードのHTMLが表示されます。
ブックマークへの登録の仕方ですが、Chromeの場合は以下のように、ブックマークバーを設定から表示させて、ドラッグ&ドロップするのが手軽です。Firefoxの場合はテキストを右クリックして、"このリンクをブックマーク" から登録するのが早いです。
 |
| Chromeでのブックマークへの登録 |
ブログカードジェネレーター
こちらのツールを使うと以下のようなブログカードが作成できます。
このツールではどのようにブログカードが表示されるかの確認や、アイキャッチ画像を取得するかどうかの選択が可能です。
ShareHtmlを、もっと綺麗にしたメーカー
こちらのツールを使うと以下のようなブログカードが作成できます。より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
これらのブログカードのデザインはデフォルトのCSSを適用したときのものです。カスタマイズ次第で色々なブログカードを作ることが可能ですので、是非自分だけのブログカードを作ってみては！
