外部リンクカードを実装したい！

公開 : 2022.12.01

#css

#tailwind

#web

ふと、ブックマークレットから動作して簡単に挿入できるリンクカードを作りたいと思ったので探してみました。基本的にはこのサイトの記事はマークダウンで書いているため、ブックマークレットでコピペできると楽です。

良さそうなデザインを発見

コチラのサイトの方がブックマークレット式で動作するリンクカードを作成していたので、これを流用する形で作業を進めます。以下のリンクカードが今回の完成形となります。

CSSを加工する

私のサイトは、Tailwind を採用していますので極力 Tailwind に置き換えてCSSを加工。環境によってスタイルが干渉する場合があるので、あくまで参考程度で見てください。時間があったらもう少し丁寧に書き直します。

/***            ***/
/***  LinkCard　***/
/***            ***/

/* カード全体像 */
.blogcard {
    @apply bg-slate-700 border border-gray-500 rounded-lg p-3 my-5
}
.blogcard p {
    @apply !m-0
}
/* float親要素 */
.blogcard-content {
    overflow: hidden;
}
/* 画像 */
.blogcard-image {
    @apply ml-4 float-right inline-block
}
.blogcard-image-wrapper {
    @apply inline-block flex justify-end w-full
}
.blogcard-image-wrapper img {
    object-fit: cover;
    object-position: center center;
}
.blogcard-image-wrapper img {
    @apply w-24 h-24 max-sm:w-16 max-sm:h-16
}
.blogcard-image-wrapper img {
    @apply flex !m-2
}
/* タイトル */
.blogcard-title {
    @apply !mt-0 font-bold text-base max-sm:w-8/12
}
/* 引用 */
.blogcard blockquote {
    @apply static p-0
}
/* 記事概要 */
.blogcard-description {
    @apply !mt-5 !mb-2 text-xs !leading-5 max-sm:w-8/12
}
/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
    @apply flex justify-start italic text-xs text-white
}
.blogcard-footer img {
    @apply !m-0 !mr-2
}
/* カードマウスホバー */
.blogcard:hover {
    @apply transform duration-300 scale-105;
}