2018-06-29

[Hexo] リンクをブログカード風にしてみる

Embedly delivers the ultra-fast, easy to use products and tools for richer sites and apps.

embed.ly の cards というサービスを使って、リンクをブログカード風に変えました。

発端

今までマークダウンのリンクをこんな感じでそのまま貼っていたので、はてなブログカードの見た目がイケててうらやましかった。

Embedly Card

hexo のプラグインで色々探していたけどとても丁度いいのがなかったが、そんな折り Embedly を見つけた。

デフォルトだとちょっと使い辛い

Embedly のサイトから Card を生成できるが、デフォルトだと以下の点が気になった。

アイキャッチがやたらでかい
description がサイトによってはやたら長い
中央寄せしかできない

サイトのジェネレータからは一部の属性しか付与できないが、以下のドキュメントを見るに手動で追加できる属性がいくつかありそうだ

そこで以下のようにタグに属性を追加してやることで、上記の気になる点はいくつか解消できそうだ

<a href="<url>" class="embedly-card" data-card-image="0" data-card-controls="0" data-card-align="left"></a>

これでアイキャッチは非表示にし、左寄せのカードになっている。場合によっては data-card-description="0" で description を消してしまってもいい

CDN を読みこませる

上記の a タグは class を指定しているだけなので、当然あれだけではブログカードっぽくならない。以下のスクリプトもセットだ

<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

こちらはページロード時に一度読みこめばいい。

ただヘッダに追加してしまうと、明らかにページのロードが遅くなるので、Body の末尾に追加する。landscape テーマだと以下の場所だ

<!-- themes/landscape/layout/layout.ejs -->
<%- partial('_partial/head') %>
<body>
  <div id="container">
    <!-- 省略 -->
  </div>
  <script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
</body>
</html>

タグの自動生成

これで表示は問題ないが、あの a タグを毎回打ちたくはないので自動生成しよう

ボクが普段使ってるのはFirefoxなので、Firefoxアドオンでやります

Format Link というアドオンを Firefox に追加する。そして FormatLink settings に以下のフォーマットを追加してあげる

<a href="{{url}}" class="embedly-card" data-card-image="0" data-card-controls="0" data-card-align="left"></a>

そしてリンクを作りたいサイトでコンテキストメニューを開き、Format Link を選ぶと上記のフォーマット形式で対象のリンクがクリップボードにコピーされる。あとはそれを貼り付けるだけだ。

おわりに

はてなブログカードには及ばないと思うけど、結構見た目はいいし、マークダウンデフォルトのリンクよりかはかなりマシになったのではないかな！

7/4 追記

ブログカードの背景色が無しだとブログの文章とブログカードの内容の判別がつきにくいので、ブログカードに背景色をつけた。

/themes/landscape/source/css/_embedly.styl というファイルを作り以下の内容にして

.embedly-card
    padding: 5px
.embedly-card-hug
    padding: 5px !important
    border-radius: 10px
    background: #EEE

/themes/landscape/source/css/style.stylに import する。これで見やすくなった。