Bloggerにはブログカードを設置する機能がないので生成ツールを作りました。必要であれば自由にお使い下さい。ユーザの利用するブラウザ上で完結しているスクリプトなので生成した情報取得などは行いません。またBlogger上で利用することを想定していますが、基本的には他のブログ環境でも制約などがなければ同様に利用可能であると思われます。


ブログカードとは


リンクアドレスURLを視覚的にわかりやすく表示するためのものです。
ブログカードは、リンクURLへアクセスして設定されているOGP情報（タイトル、説明、サムネイル画像）を取得する自動生成タイプと自分で全てを設定する自己完結タイプがあります。

ブログカード例１（はてなブログカードで生成）

ブログカード例２（独自ブログカードで生成）

【記事のタイトルを入力】
【記事の説明文を入力】（省略可）
favicon www.enoanoarts.com

ブログカードタイプ

    ブログカードは2種類を利用できます。変換を行うことでプレビュー表示されます。

    1. はてなブログカード・・・iframeを利用してブログカードを間借りするタイプ。URL入力だけで利用可能。処理自体ははてなに頼っているのでサービスの変更などで利用できなくなる可能性があります。
    2. 独自ブログカード・・・自分のサイトのスタイルシートに以下にある「独自カスタムブログカードのスタイル」に表示されたCSSをコピー追加して使用する自己完結カスタムタイプ。CSS＋URL入力だけでも利用可能ですが簡易的なカードになります。追加でタイトル、説明、サムネイル画像URLを設定可能。サムネイルは省略すると画像サイトURLを利用します。

    参考資料：

    ブログカード情報入力






    プレビュー

    はてなブログカードの場合、はてなのリンク取得やキャッシュの状況により最初は画像が表示されない更新されない可能性があります。

    ここにプレビューが表示されます。

    生成結果（Blogger の HTML モードに貼り付け）




    Blogger用スタイルシート（独自カスタム版利用CSS）

    「独自カスタムブログカード」を利用する場合、ブログ側に以下のデザイン設定が必要です。はてなブログカードのみ利用する場合には必要ありません。

    設定方法：Blogger管理画面の「テーマ」＞「カスタマイズ」＞「HTMLを編集」＞「CSSを追加」の欄（挿入場所は各テンプレートのCSS定義による）に、以下のコードを貼り付けて保存してください。




    Blogger OGP設定用コード(X/Twitter Card設定付き)

    Bloggerの基本テーマにはOGPは設定されていないので、設定を追加することを推奨します。マイテーマの <head> 直後に以下のOGP設定コードを設置してください（任意）自分のブログのはてなブログカードを設置したけど説明文が乏しい、画像が出ないなどはOGP設定がない可能性があります。

    以下のコード上の【デフォルト画像URL】にはサムネ画像が記事にない場合(No-image)に表示されるものなので、自分のページのバナーやアイコンなどの画像を指定してください。

    ご自身のブログテーマのバックアップを行ってください。

    既存のテンプレートに古いOGPタグが残っている場合には競合するので、古いタグを削除してからこの新しいコードを追加してください。