Embedly cardを使ってステキなカード型の記事リンクを貼る方法

この度、カテゴリ「Webアプリケーション開発のこと」を追加しました!
ここではWebアプリに関することを載せていこうと思っています。

ただ山田の記事の時はアプリ開発というより、WordPressやcssなどWebページを制作する際に役立つことの備忘録かなと思いますが…

では、まずはじめに「Embedly card」についての備忘録です。

Embedly cardとは?

この下↓にWordPressのページのリンクを貼ってみましたが、このように表示されるリンク方法が、「カード型の記事リンク」「ブログカード」「ブログリンク」と言われています。最近のリンクの貼り方の主流ですね。はてなブログのブログカードが有名でしょうか。

Embedly cardを使うとこんな感じでリンクを貼ることができます↓↓

日本語

WordPress 4.4の正式リリースからoembedでの埋め込み機能が追加されたようなのですが、
httpsだと埋め込む方もhttpsでないといけなかったり、思ったような表示にならなかったりで使いこなせていません。。

そんなこともあり、使いやすいものを調べてみました。
このサイトで使っているWordPressでもプラグインがいろいろあります。でも、アップデートの際の互換性などの心配があるのでプラグインの多用はなるべく避けたいですし。。。
調べた中で今のところは「Embedly card」が一番手軽かなと思いました。
 
方法はとっても簡単です。
 

 

まずはEmbedly cardを使う準備

こちらhttp://embed.ly/bookmarkletにアクセスして、[+Embed]をブックマークバーへドラッグ&ドロップします。これで準備は完了。

embedly

 

 

リンクをつくりたいページを表示してボタンをポチっと押す

記事リンクを作りたいページをブラウザで表示します。ブックマークした[+Embed]を押します。

embedly
 

 

HTMLソースをコピー&ペースト

ボタンを押すとこのような画面になるので、
「下のHTMLをコピーしてサイトのソースに貼り付けてください」の下の部分のソースをコピーして、表示したいページにペーストします。

embedly

 

 

こんな感じで表示されます!

サムネイルが大きいブログカード。

日本語

サムネイルを小さくもできます。

日本語

サムネイルを小さくする方法は、[+Embed]ボタンを押した後に、画像に表示される拡大縮小ボタンを押すだけです。
embedly

 

 

このAXIS BLOGではここで使っています

AXIS BLOGでは、渡邉の記事の「データベースに保存していなくても情報漏えいは発生する」で使用しています♪
Embedly Sample
 

 

ちなみに、確認した環境はこちらです。

■Windows10
・Firefox 48
・Edge 25
・Google Chrome 51
・Internet Exploler 11
■Mac OSX 10
・Safari 9.1.1
・Firefox 35
・Google Chrome 51
■iOS 9.3.3
・Safari 9.0
・Google Chrome 52

 
 

とても手軽で気に入りました♪
WordPressのoembedも、もう少し調査してみようと思います~。

 

 

(記事担当:山田)