リンクをシンプルに装飾できる「Embedly」

ブログなどでWebコンテンツのお知らせをしたい時に、長方形のカード風の見た目でリンクを作成できるのがEmbedlyです。

embed.ly

このブログ「Kokage Memo」で使用しているのははてなブログカードなのですが、Embedlyも公式サイトにあるコードジェネレーターにURLを入力するだけで生成できるので、お手軽なところが魅力ですね。

設定されているサムネイル画像や記事の冒頭(はてなブログの場合、記事の概要にて任意設定したテキストなど)を自動的に取得し、記事本文と見分けがつきやすいカード風のリンクで装飾できます。


今回は備忘録を兼ねて、Embedlyのカスタマイズの仕方について(試してみたことを忘れないうちに)残しておきたいなと思っています。


こちらがカードのカスタマイズが書かれてある公式ページです。

docs.embed.ly

では属性や属性値の表記方法など、整理したことを綴っていきますね。

 

ブログカードを生成するには

まずEmbedlyのブログカードを利用するには、公式のカードジェネレーターを使うのが便利です。
ブックマークレットhttps://embed.ly/bookmarklet)を使う方法もありますが、お好きな方で。

・カードジェネレーター(https://embed.ly/code)の場合

カードにしたいページのURLを入力し【EMBED(埋め込む)】をクリックすると、コードが生成され、同時にプレビューでどんなスタイルになるのかチェックできます。

ここでサムネイルや概要のテキストがどう掲載されているか分かりますね。
実際に記事にコードを貼り付けなくても、イメージできちゃいます。

またプレビューの右側にあるCustomizeを利用すると、ちょっとした見た目の変更も可能なようです。

 

シンプルなコードになっている

Embedlyでのブログカードのコードを見てみると、このように。
(今回は例として、コードに自動挿入される箇所を、サイトアドレス、タイトル、概要のテキストと表記しています)


<blockquote class="embedly-card"><h4><a href="サイトアドレス">タイトル</a></h4><p>概要のテキスト</p></blockquote>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

カードジェネレーターを使用することで、自動でサイトアドレスとタイトル部分が挿入されました。
大部分はシンプルな記述になっているんですね。

ちなみにSEO Embedにチェックをつけたままだと概要のテキストもpタグ内に含まれていますが、チェックを外したりブックマークレット版だとblockquart classではなくa classで始まり、概要のテキストはコード内に文字としては入っていません。

ただ、コードに含まれていなくても、埋め込みタイプなので記事に貼り付けると表示されています。

 

カスタマイズを実践するには

"embedly-card"の後ろに半角スペースを入れて、カスタマイズ用のコードを追加する必要があります。
複数を合わせたカスタマイズもできるので、コードを追加していくことでデフォルト状態とは異なる見た目にできます。

 

サムネイルを小さくするには

デフォルトのコードでは、カードに対してサムネイルが大きく表示される場合がありますが、この画像を小さくするには


data-card-type="article"

サムネイルが小さくなり、画像とテキストが上下から左右の配置になります。
(サイトによっては画像が最初から小さかったり、未設定で表示されない場合も)

 

概要のテキストを省略するには

デフォルト状態では記事に設定された概要のテキストが表示されていますが、カスタマイズ用の属性と属性値を入れることでオフにできます。
主にサムネイルとタイトル、embedlyの広告表記のみに。


data-card-description="0"

(カードジェネレーターから生成した場合、デフォルトのコードのままだと概要のテキストのpタグが含まれているため、<p>概要のテキスト</p>の部分を手動で削除するか、生成時にSEO Embedのチェックを外しておかないと省略バージョンにならないので注意!)

 

カードの全体サイズを変えるには

指定がないデフォルト状態だと、レイアウトによっては記事本文の幅に対してカードが目立ちすぎることもあるかと思います。

こちらもカスタマイズ属性を使用すれば、サイズを好きに調整可能です。
(例として、サイズ部分は数字と表記しています)

・px指定


data-card-width="数字px"

・%指定


data-card-width="数字%"

と追加することで、ブログカードを縦長っぽくしたり記事内のリンクの見せ方をより工夫できますね。

 

複数のシェアボタンがまとまったボタンをなしにするには

縦にFacebookTwitterPinterest、LinkedIn、Embedlyのシェア用ボタンが用意されていますが、必要のない場合は、


data-card-controls="0"

カード内にシェア機能がないすっきりしたデザインになります。

 

サムネイルやテキストの横幅内での位置を変えるには

記事や文章のスタイルに合わせて、ブログカードを左右に寄せることができます。

・左寄せ


data-card-align="left"

・右寄せ


data-card-align="right"

中央寄せにしたい場合は、"center"と追加しなくてもデフォルトで採用されています。

 

ブログカードの文字色を白に変えるには

デフォルトは黒文字なので"light"と書かなくても大丈夫ですが、白文字タイプにするには、


data-card-theme="dark"

記事の背景が黒やグレー系など濃いめの場合、"dark"を使用すると読みやすくなり相性がいいのではないでしょうか。

 

 

リンクを記す方法には、テキストリンクにしたりはてなブログカードを使用したり色々ありますが、Embedlyを使ってみるのも一手かもしれませんね。

はてなブログのユーザーの場合、ブログエディタ内から生成できるはてなブログカードを利用するのが一番簡単ですし、ブログカードが作れなくて困ったという経験はないかもしれません。

ただホームページやその他のブログサービスを使っていて、埋め込みタイプを採用したいのであれば、Embedlyもじゅうぶん候補になり得るのではないでしょうか。

好きなアニメやゲームの公式サイトなどを紹介する時に、ただのテキストリンクではなく、サムネイルやテキストの入ったきれいなブログカードがあれば、それだけで作品のイメージを伝えやすくなりますよね。