Embedlyを使ったブログカードの導入とカスタマイズテンプレート

こんにちは、トッド（Todd）です。

ブログカードを表示するのにWordpressプラグインで実装可能な「Pz-LinkCard」をこれまで使用していたんですが、プラグインが重いので消去しました。ブログカードを実装しようとすると、どうしてもJavascriptが出てきます。コレは厄介だ・・・

そんな時に見つけた「Embedly」

今回はその使用方法とコピペで使えるEmbedlyカスタムコードの紹介です。

[adchord]

使い方

まずは、Embedlyのサイトに飛びまして以下に表示されている画像のようにドラッグ&ドロップでブックマークバーに追加します。

これだけで準備は完了になります。ブログカードを作成したいときは、カードを作成したいページ内で先ほどブックマークバーに追加した+Embedをクリックすると以下のような画面に移行するのでそこで「画像の大きさ」「抜粋文の有無」等の変更が可能です。

最後に一番下にあるHTMLコードを記事編集画面にコピペするだけでブログカードが表示されます。そして、Embedlyで作成したブログカードが以下のような感じになります。以下のリンクから上記の準備が可能です。

デフォルトの状態でも良いかと思いますが、自サイトの雰囲気に合わせたカスタマイズを施しても良いかと思います。簡単にですが、背景と枠線、影をつけてみました。コピペで使えるので良ければ参考にしてください。

.embedly-card{
	border: 3px solid gray;
	background: #ffffff;
	box-shadow: 0px 2px 3px 0px #9dc0e9;
}

Fin.