aタグにclassを1つ追加するだけでリンクをブログカード風に変身させる

最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。

よく見るブログカードは、サムネイルや投稿日時などのメタデータが盛り込まれていて、自前で実装しようとすると、リンク先の情報をどのように取得するか、など考えることがたくさんあって面倒です。

ブックマークレットでHTMLを作成するという手法も紹介されていたりしますが、OGP画像が直リンになってしまうのがどうも気になる…。(OGP画像は直リンしてもOKな風潮なのか…?)

正直そこまでの情報はいらない、という場合も多いかと思いますので、CSSだけでブログカード風のものを作ってみたいと思います。

デモ

aタグにclassを1つ追加するだけでリンクをブログカード風に変身させる

リンク先タイトルとURLだけ、という至極シンプルなデザインです。(これをブログカードと呼ぶと怒られるかもしれませんが…)記事のサムネイル画像は表示されませんが、リンクをクリックする決め手となるには必要十分だと思います。

使い方

CSS

ブログに以下のCSSを予め読み込んでおきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.card-link {
display: block;
margin: 1.5em 0;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #3884ff;
border: 1px solid #e3e3e3;
border-radius: 4px;
transition: .15s border ease;
}
.card-link:hover {
border-color: #bbb;
}
.card-link::after {
display: block;
margin: 0.7em 0 0 0;
content: attr(href);
font-size: 0.75em;
color: #767676;
font-weight: normal;
}

Stylusを使っています!という僕のような奇特な方は下のコードをどうぞ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.card-link
display block
margin 1.5em 0
padding 1em
font-weight bold
text-decoration none
color #3884ff
border 1px solid #e3e3e3
border-radius 4px
transition .2s border ease

&:hover
border-color #bbb

&::after
display block
margin .7em 0 0 0
content attr(href)
font-size .75em
color #767676
font-weight normal

リンクの貼り方

ブログカードの貼り方はとても簡単です。普通のテキストリンクにcard-linkというclassを追加するだけで、あっという間にブログカード型に変身します。

1
<a class="card-link" href="https://www.google.co.jp/">Google</a>

応用

WordPressをお使いの場合は、正規表現でサイト内リンクの全てに自動でcard-linkを追加するよう、function.phpへ書いておくと保守性も上がって便利ですね。

当ブログで使っているHexoの場合は、下のようなスクリプトを書いて自動でclassを追加しています。

1
2
3
4
hexo.extend.filter.register('after_post_render', function(data){
data.content = data.content.replace(/<a href="\/post\//g, '<a class="card-link" href="\/post\/');
return data;
});

やってみようとしたこと

Googleが提供しているAPIに、サイトのファビコンを簡単に取得できるものがあります。

1
https://www.google.com/s2/favicons?domain=ここにURL

ブログカードのURLの前にファビコンを表示したくて、「ここにURL」の場所にCSS変数を駆使してhrefを代入し、疑似要素へ突っ込もうと試行錯誤したのですが、現状では無理だということが判明しました。残念…