プラグインやwebサービスなどでリンクカードを作ることは可能ですが､HTMLとCSSで充分､対応できます｡まずは完成形を｡

タイトル

テキスト

HTML

<div class="card">
<div class="link-card">
<div class="text-box">
<h4>タイトル</h4>
<p>テキスト</p>
<a href="#"></a>
</div>
<figure><img src="images/cloud.JPG" alt="画像" /></figure>
</div>
</div>

全体をcardで囲い､その中に､link-cardがあり､その中に､テキストと写真があります｡

SCSS

.card {
  container-type: inline-size;
  width: 100%;


.link-card {
  position: relative;
  border: 1px solid #0067bb;
  padding: 10px;
  display: flex;
  gap: 10px;
  justify-content: space-between;

  figure img {
    width: 100px;
  }

  h4 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
  }
  p {
    margin: 0;
    padding: 0;
  }
  a {
    position: absolute;
    inset: 0;
    padding: 10px;
    &:hover{
    border: 10px solid #ff0000;
    }
  }
}
}

@container (min-width:400px) {
  .link-card {
    width: 80%;
    figure img {
      width: 150px;
    }
  }
}

.cardに､container-type: inline-sizeを書き､コンテナクエリを使えるようにします｡link-cardで､文章(text-box)と画像を囲みます｡

そのあと､link-cardに対して､display:flexで､文章と画像を横並びにします｡また､link-cardにposition: relativeを書きます｡

これは､リンクをリンクカード全体に効かす為に書きます｡

それを実現するために､aに対して､position: absoluteとinset: 0を書きます｡これでリンクカード全体にリンクが張られます｡

そのあと､@containerでlink-cardの幅や画像サイズを書きます｡ここはお好みで問題ありません｡

そもそも､画面サイズが変わっても見た目を同じにするのであれば､書く必要はありません｡ここでは､400pxを超えると､リンクカードのサイズ及び画像サイズの調整をしています｡

CSS

.card {
  container-type: inline-size;
  width: 100%;
}
.card .link-card {
  position: relative;
  border: 1px solid #0067bb;
  padding: 10px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.card .link-card figure img {
  width: 100px;
}
.card .link-card h4 {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}
.card .link-card p {
  margin: 0;
  padding: 0;
}
.card .link-card a {
  position: absolute;
  inset: 0;
  padding: 10px;
}
.card .link-card a:hover {
  border: 10px solid #ff0000;
}

@container (min-width:400px) {
  .link-card {
    width: 80%;
  }
  .link-card figure img {
    width: 150px;
  }
}

SCSSとCSSの書き方は違いますが､内容は同じです｡個人的に､SCSSの方が見やすいですね｡お好みで構いません｡

HTMLはともかく

HTMLは簡単ですが､SCSS(CSS)は長い｡ある程度､CSSの知識がないと厳しいか｡素直にオンラインサービスを使えばいいか｡

ただ､自前で作るとデザインを自由にできます｡もし､それを望んでいるのであれば､是非､お試しあれ｡

リンクカード全体にリンクを張った方が

リンクカード全体にリンクを張った方が､押しやすい｡リンクカードのどこかにマウスの矢印が来たら反応する｡ストレスがなくなります｡リンクカードはクリックされてナンボ｡できるだけ､簡単にすることが重要｡当サイトでも自作のリンクカードを使っています｡

問題点

単にデザインしているだけなので､テキストの入力､リンクのURLは手動で書く必要があります｡これが嫌であれば､例えば､ブックマークレットなどを使う必要があります｡

当サイトでは､地道にURLをリンクカードのaタグに貼り付けています｡出来るだけ楽にしています｡

さいごに

リンクカードは細かい対応が必要です｡小さいほど､対応が難しい気がします｡もし､ホームページでリンクカードを作りたいのであれば､是非､参考にして下さい｡

対応はバックアップを取ってからにしましょう｡失敗しても元に戻れます｡

面倒ですが､バックアップ後､対応して下さい｡