コピペで使えるブログカード15選（HTML・CSSで作る関連記事リンクのデザイン）

記事の中で、別の記事を紹介するときに使う「ブログカード」。タイトルや画像、短い説明文をカードの形にまとめたリンクのことで、文字だけのリンクよりも「どんな記事なのか」がひと目で伝わります。

この記事では、コピペするだけで使えるブログカードのデザインを15個まとめました。定番の画像付き、画像なしのシンプルなもの、背景に画像を敷いたもの、付箋風、ダークモード風、和風まで、記事の雰囲気に合わせて選べる種類を用意しています。

これまでのコピペシリーズと同じく、HTMLとCSSを分けて掲載しています。なお、商品紹介やプロフィールなどに使う一般的なカードは、コピペで使えるカードデザイン20個まとめで紹介しています。

ブログを読んでいると、ときどき出てくる「あわせて読みたい」の四角いリンクのことだね！

そうなんだ。文字だけのリンクより目に入りやすいから、関連する記事も読んでもらうきっかけになるんだよ。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します（WordPressなら「追加CSS」など。場所はテーマによって異なります）。続いて、HTMLのコードを、カードを表示したい場所に貼り付けます。WordPressのブロックエディタでは「カスタムHTML」ブロックを使うと貼り付けやすいです。

リンク先は href=”〜” の部分、画像は src=”〜” の部分、タイトルや説明文はそれぞれのdivタグの中を書き換えてください。見本では、このマガジンの記事「WordPressとは」を例にしています。
なお、WordPressには、記事のURLを1行で貼るだけでカードのように表示される「埋め込み」機能もあります。ただ、見た目はテーマ次第で細かく変えられないため、デザインを自分で決めたいときに今回のHTML・CSSが役立ちます。

01. 画像が左の定番カード

画像を左、タイトルと説明文を右に並べた、いちばん定番のブログカードです。

実際の見た目

WordPressとは？できることと始め方を初心者向けにやさしく解説
ブログやホームページを作れるWordPressの特徴、できること、始めるまでの流れを、専門用語を使わずに紹介します。
Webマガジン-カツヨウ！

HTMLコード

<a class="kts-blog01" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog01-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-300x169.jpg" alt="" width="300" height="169"></div>
  <div class="kts-blog01-body">
    <div class="kts-blog01-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
    <div class="kts-blog01-text">ブログやホームページを作れるWordPressの特徴、できること、始めるまでの流れを、専門用語を使わずに紹介します。</div>
    <div class="kts-blog01-site">Webマガジン-カツヨウ！</div>
  </div>
</a>

CSSコード

a.kts-blog01 { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 1.5em 0; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); text-decoration: none !important; font-family: sans-serif; }
.kts-blog01-img { flex: 0 0 160px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
.kts-blog01-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.kts-blog01-body { min-width: 0; }
.kts-blog01-title { font-size: 16px; font-weight: bold; line-height: 1.5; color: #222; }
.kts-blog01-text { margin-top: 4px; font-size: 13px; line-height: 1.6; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kts-blog01-site { margin-top: 6px; font-size: 12px; color: #999; }
@media (max-width: 480px) {
  .kts-blog01-img { flex-basis: 110px; }
  .kts-blog01-text { display: none; }
}

02. 「あわせて読みたい」ラベル付き

画像を使わず、「あわせて読みたい」のラベルを枠線の上に乗せたシンプルな型です。

実際の見た目

あわせて読みたい WordPressとは？できることと始め方を初心者向けにやさしく解説

HTMLコード

<a class="kts-blog02" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <span class="kts-blog02-label">あわせて読みたい</span>
  <span class="kts-blog02-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</span>
</a>

CSSコード

a.kts-blog02 { position: relative; display: block; max-width: 640px; margin: 2em 0 1.5em; padding: 22px 18px 16px; border: 2px solid #4a90d9; border-radius: 6px; background: #fff; text-decoration: none !important; font-family: sans-serif; }
.kts-blog02-label { position: absolute; top: -13px; left: 14px; padding: 2px 10px; background: #4a90d9; color: #fff; font-size: 12px; font-weight: bold; line-height: 1.6; border-radius: 3px; }
.kts-blog02-title { display: block; font-size: 16px; font-weight: bold; line-height: 1.6; color: #1a4f8a; }
.kts-blog02-title::after { content: " ›"; }

03. 画像が上の縦型カード

画像を上に大きく置いた縦長のカードです。記事の下に並べるのにも向いています。

実際の見た目

2026.10.01
WordPressとは？できることと始め方を初心者向けにやさしく解説
ブログやホームページを作れるWordPressの特徴、できること、始めるまでの流れを、専門用語を使わずに紹介します。

HTMLコード

<a class="kts-blog03" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog03-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-300x169.jpg" alt="" width="300" height="169"></div>
  <div class="kts-blog03-body">
    <div class="kts-blog03-date">2026.10.01</div>
    <div class="kts-blog03-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
    <div class="kts-blog03-text">ブログやホームページを作れるWordPressの特徴、できること、始めるまでの流れを、専門用語を使わずに紹介します。</div>
  </div>
</a>

CSSコード

a.kts-blog03 { display: block; max-width: 320px; margin: 1.5em 0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.12); text-decoration: none !important; font-family: sans-serif; }
.kts-blog03-img { aspect-ratio: 16 / 9; overflow: hidden; }
.kts-blog03-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.kts-blog03-body { padding: 14px 16px 16px; }
.kts-blog03-date { font-size: 12px; color: #999; }
.kts-blog03-title { margin-top: 4px; font-size: 16px; font-weight: bold; line-height: 1.5; color: #222; }
.kts-blog03-text { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #666; }

04. 画像が右＋カテゴリー・日付付き

画像を右に置き、カテゴリーと日付を添えたカードです。

実際の見た目

WordPress2026.10.01
WordPressとは？できることと始め方を初心者向けにやさしく解説

HTMLコード

<a class="kts-blog04" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog04-body">
    <div class="kts-blog04-meta"><span class="kts-blog04-cat">WordPress</span><span class="kts-blog04-date">2026.10.01</span></div>
    <div class="kts-blog04-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
  </div>
  <div class="kts-blog04-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-300x169.jpg" alt="" width="300" height="169"></div>
</a>

CSSコード

a.kts-blog04 { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 1.5em 0; padding: 14px 16px; background: #f7f9fb; border-bottom: 3px solid #2a9d8f; border-radius: 6px 6px 0 0; text-decoration: none !important; font-family: sans-serif; }
.kts-blog04-body { flex: 1; min-width: 0; }
.kts-blog04-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.kts-blog04-cat { padding: 1px 8px; background: #2a9d8f; color: #fff; border-radius: 10px; }
.kts-blog04-date { color: #888; }
.kts-blog04-title { margin-top: 6px; font-size: 16px; font-weight: bold; line-height: 1.5; color: #264653; }
.kts-blog04-img { flex: 0 0 140px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
.kts-blog04-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
@media (max-width: 480px) {
  .kts-blog04-img { flex-basis: 96px; }
}

05. 「関連記事」タブ付き

「関連記事」のタブを付けて、関連する記事であることをはっきり伝える型です。

実際の見た目

関連記事
WordPressとは？できることと始め方を初心者向けにやさしく解説

HTMLコード

<div class="kts-blog05">
  <div class="kts-blog05-tab">関連記事</div>
  <a class="kts-blog05-card" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
    <div class="kts-blog05-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-150x150.jpg" alt="" width="150" height="150"></div>
    <div class="kts-blog05-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
  </a>
</div>

CSSコード

.kts-blog05 { max-width: 640px; margin: 1.5em 0; font-family: sans-serif; }
.kts-blog05-tab { display: inline-block; padding: 4px 16px; background: #e76f51; color: #fff; font-size: 13px; font-weight: bold; border-radius: 6px 6px 0 0; }
.kts-blog05 a.kts-blog05-card { display: flex; align-items: center; gap: 14px; padding: 12px; border: 2px solid #e76f51; border-radius: 0 6px 6px 6px; background: #fff; text-decoration: none !important; }
.kts-blog05-img { flex: 0 0 80px; height: 80px; overflow: hidden; border-radius: 6px; }
.kts-blog05-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.kts-blog05-title { font-size: 15px; font-weight: bold; line-height: 1.6; color: #333; }

06. 左ラインのシンプル型

左に太い線を引いた、画像なしの軽いカードです。「続きを読む」で次の行動を促します。

実際の見た目

WordPressとは？できることと始め方を初心者向けにやさしく解説
続きを読む →

HTMLコード

<a class="kts-blog06" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog06-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
  <div class="kts-blog06-more">続きを読む →</div>
</a>

CSSコード

a.kts-blog06 { display: block; max-width: 640px; margin: 1.5em 0; padding: 14px 18px; background: #fff8f0; border-left: 6px solid #f4a261; text-decoration: none !important; font-family: sans-serif; }
.kts-blog06-title { font-size: 16px; font-weight: bold; line-height: 1.6; color: #333; }
.kts-blog06-more { margin-top: 6px; text-align: right; font-size: 13px; color: #d9711c; }

07. 背景画像に文字を重ねる

画像を背景いっぱいに敷き、文字を重ねたインパクトのあるカードです。

実際の見た目

PICK UP
WordPressとは？できることと始め方を初心者向けにやさしく解説

HTMLコード

<a class="kts-blog07" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-768x432.jpg" alt="" width="768" height="432">
  <div class="kts-blog07-body">
    <div class="kts-blog07-label">PICK UP</div>
    <div class="kts-blog07-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
  </div>
</a>

CSSコード

a.kts-blog07 { position: relative; display: block; max-width: 640px; height: 200px; margin: 1.5em 0; border-radius: 10px; overflow: hidden; text-decoration: none !important; font-family: sans-serif; }
a.kts-blog07 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.kts-blog07-body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: linear-gradient(transparent 30%, rgba(0,0,0,.75)); }
.kts-blog07-label { align-self: flex-start; padding: 2px 10px; background: #fff; color: #222; font-size: 11px; font-weight: bold; letter-spacing: .1em; border-radius: 3px; }
.kts-blog07-title { margin-top: 8px; font-size: 18px; font-weight: bold; line-height: 1.5; color: #fff; }

08. 外部サイト風（ドメイン表示）

他のサイトの記事を紹介するときに便利な、ドメイン（サイトの住所）入りの型です。新しいタブで開きます。

実際の見た目

WordPressとは？できることと始め方を初心者向けにやさしく解説
ブログやホームページを作れるWordPressの特徴、できること、始めるまでの流れを、専門用語を使わずに紹介します。
Kkatsuyou-web-magazine.com

HTMLコード

<a class="kts-blog08" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/" target="_blank" rel="noopener">
  <div class="kts-blog08-body">
    <div class="kts-blog08-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
    <div class="kts-blog08-text">ブログやホームページを作れるWordPressの特徴、できること、始めるまでの流れを、専門用語を使わずに紹介します。</div>
    <div class="kts-blog08-domain"><span class="kts-blog08-icon">K</span>katsuyou-web-magazine.com</div>
  </div>
  <div class="kts-blog08-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-150x150.jpg" alt="" width="150" height="150"></div>
</a>

CSSコード

a.kts-blog08 { display: flex; max-width: 640px; margin: 1.5em 0; border: 1px solid #d0d7de; border-radius: 8px; overflow: hidden; background: #fff; text-decoration: none !important; font-family: sans-serif; }
.kts-blog08-body { flex: 1; min-width: 0; padding: 14px 16px; }
.kts-blog08-title { font-size: 15px; font-weight: bold; line-height: 1.5; color: #1f2328; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kts-blog08-text { margin-top: 4px; font-size: 13px; line-height: 1.6; color: #59636e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kts-blog08-domain { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #59636e; }
.kts-blog08-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; background: #f08a24; color: #fff; font-size: 10px; font-weight: bold; }
.kts-blog08-img { flex: 0 0 120px; }
.kts-blog08-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
@media (max-width: 480px) {
  .kts-blog08-img { flex-basis: 90px; }
}

09. 付箋（ふせん）風

付箋を貼ったような、手書きメモ風のカードです。

実際の見た目

こちらもどうぞ
WordPressとは？できることと始め方を初心者向けにやさしく解説

HTMLコード

<a class="kts-blog09" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog09-label">こちらもどうぞ</div>
  <div class="kts-blog09-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
</a>

CSSコード

a.kts-blog09 { position: relative; display: block; max-width: 560px; margin: 2em 0 1.5em 6px; padding: 22px 20px 16px; background: #fff6b3; box-shadow: 2px 3px 6px rgba(0,0,0,.15); transform: rotate(-1deg); text-decoration: none !important; font-family: sans-serif; }
a.kts-blog09::before { content: ""; position: absolute; top: -10px; left: 50%; width: 90px; height: 22px; margin-left: -45px; background: rgba(170,205,240,.8); transform: rotate(2deg); }
.kts-blog09-label { font-size: 12px; font-weight: bold; color: #8a7a2a; }
.kts-blog09-title { margin-top: 4px; font-size: 16px; font-weight: bold; line-height: 1.6; color: #4a4020; }

10. マウスを乗せると浮き上がる

マウスを乗せると、カードがふわっと浮き上がり、画像が少し大きくなります。

実際の見た目

WordPressとは？できることと始め方を初心者向けにやさしく解説
Webマガジン-カツヨウ！

HTMLコード

<a class="kts-blog10" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog10-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-300x169.jpg" alt="" width="300" height="169"></div>
  <div class="kts-blog10-body">
    <div class="kts-blog10-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
    <div class="kts-blog10-site">Webマガジン-カツヨウ！</div>
  </div>
</a>

CSSコード

a.kts-blog10 { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 1.5em 0; padding: 12px; border: 1px solid #e3e6ea; border-radius: 10px; background: #fff; text-decoration: none !important; font-family: sans-serif; transition: transform .25s, box-shadow .25s; }
a.kts-blog10:hover, a.kts-blog10:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.kts-blog10-img { flex: 0 0 150px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; }
.kts-blog10-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.kts-blog10-img img { transition: transform .4s; }
a.kts-blog10:hover .kts-blog10-img img { transform: scale(1.08); }
.kts-blog10-title { font-size: 16px; font-weight: bold; line-height: 1.5; color: #222; }
.kts-blog10-site { margin-top: 6px; font-size: 12px; color: #999; }
@media (max-width: 480px) {
  .kts-blog10-img { flex-basis: 100px; }
}

11. 丸い画像＋ボタンのポップ型

丸い画像とボタンを組み合わせた、やわらかくポップな雰囲気のカードです。

実際の見た目

WordPressとは？できることと始め方を初心者向けにやさしく解説
読んでみる

HTMLコード

<a class="kts-blog11" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog11-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-150x150.jpg" alt="" width="150" height="150"></div>
  <div class="kts-blog11-body">
    <div class="kts-blog11-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
    <span class="kts-blog11-btn">読んでみる</span>
  </div>
</a>

CSSコード

a.kts-blog11 { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 1.5em 0; padding: 16px 18px; background: #ffeef3; border-radius: 20px; text-decoration: none !important; font-family: "Hiragino Maru Gothic ProN", sans-serif; }
.kts-blog11-img { flex: 0 0 84px; height: 84px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; }
.kts-blog11-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.kts-blog11-title { font-size: 15px; font-weight: bold; line-height: 1.6; color: #5a3a46; }
.kts-blog11-btn { display: inline-block; margin-top: 8px; padding: 4px 16px; background: #ff7aa2; color: #fff; font-size: 13px; font-weight: bold; border-radius: 999px; }

12. 「次の記事」へ誘導するバナー型

グラデーションの背景に矢印を付けた、次の記事へ誘導する横長のバナーです。

実際の見た目

NEXT
WordPressとは？できることと始め方を初心者向けにやさしく解説
→

HTMLコード

<a class="kts-blog12" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog12-body">
    <div class="kts-blog12-label">NEXT</div>
    <div class="kts-blog12-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
  </div>
  <div class="kts-blog12-arrow">→</div>
</a>

CSSコード

a.kts-blog12 { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 1.5em 0; padding: 18px 20px; background: linear-gradient(135deg, #4f6df5, #8a5cf6); border-radius: 12px; text-decoration: none !important; font-family: sans-serif; }
.kts-blog12-body { flex: 1; min-width: 0; }
.kts-blog12-label { font-size: 11px; font-weight: bold; letter-spacing: .2em; color: rgba(255,255,255,.85); }
.kts-blog12-title { margin-top: 4px; font-size: 16px; font-weight: bold; line-height: 1.5; color: #fff; }
.kts-blog12-arrow { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #5b62f3; font-size: 18px; font-weight: bold; }

13. 文中に入れる1行ミニカード

文章の途中に入れても目立ちすぎない、1行サイズの小さなカードです。

実際の見た目

関連WordPressとは？できることと始め方を初心者向けにやさしく解説

HTMLコード

<a class="kts-blog13" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/"><span class="kts-blog13-mark">関連</span><span class="kts-blog13-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</span></a>

CSSコード

a.kts-blog13 { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: .5em 0; padding: 6px 12px; background: #f2f4f7; border-radius: 4px; text-decoration: none !important; font-family: sans-serif; font-size: 14px; line-height: 1.5; }
.kts-blog13-mark { flex-shrink: 0; padding: 1px 6px; background: #3a7bd5; color: #fff; font-size: 11px; font-weight: bold; border-radius: 3px; }
.kts-blog13-title { color: #1f5fb4; border-bottom: 1px dotted #1f5fb4; }

14. ダークモード風

黒っぽい背景で引き締めた、ダークモード風のカードです。

実際の見た目

WordPress
WordPressとは？できることと始め方を初心者向けにやさしく解説
2026.10.01

HTMLコード

<a class="kts-blog14" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog14-img"><img src="https://katsuyou-web-magazine.com/wp-content/uploads/2026/08/web-site-samuneiru-300x169.jpg" alt="" width="300" height="169"></div>
  <div class="kts-blog14-body">
    <span class="kts-blog14-cat">WordPress</span>
    <div class="kts-blog14-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
    <div class="kts-blog14-date">2026.10.01</div>
  </div>
</a>

CSSコード

a.kts-blog14 { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 1.5em 0; padding: 14px; background: #1e2330; border: 1px solid #2f3647; border-radius: 8px; text-decoration: none !important; font-family: sans-serif; }
.kts-blog14-img { flex: 0 0 150px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
.kts-blog14-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.kts-blog14-body { min-width: 0; }
.kts-blog14-cat { display: inline-block; padding: 1px 8px; border: 1px solid #4fd1c5; color: #4fd1c5; font-size: 11px; border-radius: 3px; }
.kts-blog14-title { margin-top: 6px; font-size: 16px; font-weight: bold; line-height: 1.5; color: #f1f3f7; }
.kts-blog14-date { margin-top: 6px; font-size: 12px; color: #8a93a6; }
@media (max-width: 480px) {
  .kts-blog14-img { flex-basis: 100px; }
}

15. 和風（明朝体＋朱色ラベル）

明朝体と朱色の縦書きラベルを使った、和風のカードです。

実際の見た目

関連記事
WordPressとは？できることと始め方を初心者向けにやさしく解説
Webマガジン-カツヨウ！

HTMLコード

<a class="kts-blog15" href="https://katsuyou-web-magazine.com/introduce/what-is-wordpress/">
  <div class="kts-blog15-label">関連記事</div>
  <div class="kts-blog15-body">
    <div class="kts-blog15-title">WordPressとは？できることと始め方を初心者向けにやさしく解説</div>
    <div class="kts-blog15-site">Webマガジン-カツヨウ！</div>
  </div>
</a>

CSSコード

a.kts-blog15 { display: flex; align-items: stretch; max-width: 640px; margin: 1.5em 0; background: #faf6ee; border: 1px solid #c9b99a; text-decoration: none !important; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kts-blog15-label { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; padding: 10px 0; writing-mode: vertical-rl; letter-spacing: .15em; white-space: nowrap; background: #b7282e; color: #fff; font-size: 13px; }
.kts-blog15-body { flex: 1; padding: 16px 18px; }
.kts-blog15-title { font-size: 16px; font-weight: bold; line-height: 1.7; color: #3b2e1e; }
.kts-blog15-site { margin-top: 6px; font-size: 12px; color: #8a7a60; }

カスタマイズの小ワザ

  • 画像は「横16：縦9」の比率で用意すると、どの型でもきれいに収まります。比率が違っても、CSSの object-fit: cover で自動的に切り抜かれます。
  • 画像の alt=”” の中に画像の内容を短く書いておくと、読み上げ機能を使う人にも親切です。
  • 他のサイトの記事を紹介するときは、08番のように target=”_blank” rel=”noopener” を付けると、新しいタブで開きます。
  • 説明文の行数は、01番や08番の -webkit-line-clamp の数字で調整できます。2なら2行まで表示され、はみ出した部分は「…」になります。
  • 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
  • 1つの記事にたくさん並べると、かえって読みにくくなります。本当に関連する記事だけにしぼりましょう。
  • 申し込みやお問い合わせに誘導したい場合は、コピペで使えるCTAデザイン20個まとめも参考にしてください。

まとめ｜早見表

使いたい場面該当するカード
定番で迷ったら01, 03
画像なしでシンプルに02, 06
画像を大きく見せたい03, 07
カテゴリーや日付も見せたい04, 14
「関連記事」とはっきり示したい02, 05
他のサイトの記事を紹介08
やわらかい・かわいい雰囲気09, 11
動きをつけたい10
次の記事へ誘導したい12
文章の途中に入れたい13
かっこよく引き締めたい14
和風のお店・旅館15

これなら、前に書いた記事も読んでもらえそう！

そうだね。ただ、カードを置くのは本当に役立つ記事だけにしよう。読んでいる人が「次に知りたいこと」に合う記事を選ぶのがコツなんだ。

15個のブログカードは、aタグの中に画像・タイトル・説明文をdivで並べ、CSSで見た目を整えて作る。
リンク先・画像・文章を書き換えて使い、置くのは関連の深い記事にしぼる。

関連記事

  1. コピペで使えるローディングアニメーション20個まとめ（読み込み中のくるくる表示）

  2. ショートカットキー一覧318選｜Windows・Excel・Word・PowerPoint対応

  3. コピペで使える引用文（blockquote）デザイン20個まとめ

  4. コピペで使えるタイムライン20個まとめ（沿革・スケジュール・手順の流れ）

  5. コピペで使えるバッジ・ラベル20個まとめ（NEW・SALE・残りわずかなど）

  6. レスポンシブデザインとは？スマホ対応で失敗しやすいポイント

  7. PDFの結合・分割を無料でする方法(オンラインツールの注意点も解説)

  8. WordPressで知っておくべきプラグイン5選｜お問い合わせ・SEO・バックアップなど初心者向けに解説

  9. コピペで使えるフリップカード20個まとめ（マウスを乗せると裏返るカード）