お店や会社のホームページで、営業日の変更やイベント情報、新商品のお知らせを並べる「新着情報」の一覧。トップページの中でもよく見られる場所です。

この記事では、コピペするだけで使える新着情報・お知らせ一覧のデザインを20個まとめました。
シンプルな線区切りから、カテゴリー別の色ラベル、NEWマーク付き、サムネイル付き、カード型、流れるテロップまで、場面ごとに使い分けられる種類を用意しています。

これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

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

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、一覧を表示したい場所に貼り付けます。

日付・カテゴリー・タイトルは、それぞれのspanタグの中を書き換えます。
お知らせを増やしたい時は、<li>〜</li>をまるごとコピーして一番上に追加し、リンク先はhref=”#”の部分を書き換えてください。

01. シンプルな線区切り

日付・カテゴリー・タイトルを1行に並べて、線で区切った定番の一覧です。

実際の見た目

HTMLコード

<div class="kts-news01">
  <ul>
    <li><a href="#"><span class="kts-news01-date">2026.10.05</span><span class="kts-news01-cat">お知らせ</span><span class="kts-news01-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news01-date">2026.09.28</span><span class="kts-news01-cat">イベント</span><span class="kts-news01-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news01-date">2026.09.15</span><span class="kts-news01-cat">新商品</span><span class="kts-news01-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news01 { font-family: sans-serif; }
.kts-news01 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news01 li { list-style: none; margin: 0; }
.kts-news01 li::marker { content: none; }
.kts-news01 a { text-decoration: none; }
.kts-news01 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 4px; color: #1F2937; }
.kts-news01-date { font-size: 13px; color: #6B7280; }
.kts-news01-title { font-size: 15px; }
.kts-news01 li { border-bottom: 1px solid #E5E7EB; }
.kts-news01-cat { padding: 2px 10px; border: 1px solid #9CA3AF; border-radius: 3px; font-size: 11px; color: #4B5563; }

02. カテゴリー別の色ラベル

カテゴリーごとにラベルの色を変えた、種類がひと目でわかる一覧です。

実際の見た目

HTMLコード

<div class="kts-news02">
  <ul>
    <li><a href="#"><span class="kts-news02-date">2026.10.05</span><span class="kts-news02-cat c1">お知らせ</span><span class="kts-news02-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news02-date">2026.09.28</span><span class="kts-news02-cat c2">イベント</span><span class="kts-news02-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news02-date">2026.09.15</span><span class="kts-news02-cat c3">新商品</span><span class="kts-news02-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news02 { font-family: sans-serif; }
.kts-news02 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news02 li { list-style: none; margin: 0; }
.kts-news02 li::marker { content: none; }
.kts-news02 a { text-decoration: none; }
.kts-news02 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 4px; color: #1F2937; }
.kts-news02-date { font-size: 13px; color: #6B7280; }
.kts-news02-title { font-size: 15px; }
.kts-news02 li { border-bottom: 1px solid #E5E7EB; }
.kts-news02-cat { min-width: 64px; padding: 3px 0; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.kts-news02-cat.c1 { background: #2563EB; }
.kts-news02-cat.c2 { background: #F97316; }
.kts-news02-cat.c3 { background: #10B981; }

03. NEWマーク付き

新しいお知らせに「NEW」のマークを付けた、更新を目立たせる一覧です。

実際の見た目

HTMLコード

<div class="kts-news03">
  <ul>
    <li><a href="#"><span class="kts-news03-date">2026.10.05</span><span class="kts-news03-title">年末年始の営業日について</span><span class="kts-news03-new">NEW</span></a></li>
    <li><a href="#"><span class="kts-news03-date">2026.09.28</span><span class="kts-news03-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news03-date">2026.09.15</span><span class="kts-news03-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news03 { font-family: sans-serif; }
.kts-news03 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news03 li { list-style: none; margin: 0; }
.kts-news03 li::marker { content: none; }
.kts-news03 a { text-decoration: none; }
.kts-news03 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 4px; color: #1F2937; }
.kts-news03-date { font-size: 13px; color: #6B7280; }
.kts-news03-title { font-size: 15px; }
.kts-news03 li { border-bottom: 1px dashed #D1D5DB; }
.kts-news03-new { padding: 1px 8px; background: #EF4444; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; animation: kts-news03-blink 1.6s ease-in-out infinite; }
@keyframes kts-news03-blink { 50% { opacity: .5; } }

04. 矢印付きのリンク一覧

右端に「›」を付けた、クリックできることが伝わる一覧です。

実際の見た目

HTMLコード

<div class="kts-news04">
  <ul>
    <li><a href="#"><span class="kts-news04-date">2026.10.05</span><span class="kts-news04-cat">お知らせ</span><span class="kts-news04-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news04-date">2026.09.28</span><span class="kts-news04-cat">イベント</span><span class="kts-news04-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news04-date">2026.09.15</span><span class="kts-news04-cat">新商品</span><span class="kts-news04-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news04 { font-family: sans-serif; }
.kts-news04 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news04 li { list-style: none; margin: 0; }
.kts-news04 li::marker { content: none; }
.kts-news04 a { text-decoration: none; }
.kts-news04 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 4px; color: #1F2937; }
.kts-news04-date { font-size: 13px; color: #6B7280; }
.kts-news04-title { font-size: 15px; }
.kts-news04 li { border-bottom: 1px solid #E5E7EB; }
.kts-news04 a { position: relative; padding-right: 28px; }
.kts-news04 a::after { content: "›"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #9CA3AF; transition: right .2s; }
.kts-news04 a:hover::after { right: 4px; color: #2563EB; }
.kts-news04-cat { font-size: 12px; color: #2563EB; font-weight: 700; }

05. 大きな日付ブロック

日付を四角いブロックで大きく見せる、イベント告知に向いた一覧です。

実際の見た目

HTMLコード

<div class="kts-news05">
  <ul>
    <li><a href="#"><span class="kts-news05-day"><b>10/5</b><small>2026</small></span><span class="kts-news05-body"><span class="kts-news05-cat">お知らせ</span><span class="kts-news05-title">年末年始の営業日について</span></span></a></li>
    <li><a href="#"><span class="kts-news05-day"><b>9/28</b><small>2026</small></span><span class="kts-news05-body"><span class="kts-news05-cat">イベント</span><span class="kts-news05-title">秋の体験ワークショップを開催します</span></span></a></li>
    <li><a href="#"><span class="kts-news05-day"><b>9/15</b><small>2026</small></span><span class="kts-news05-body"><span class="kts-news05-cat">新商品</span><span class="kts-news05-title">季節限定のブレンド茶を発売しました</span></span></a></li>
  </ul>
</div>

CSSコード

.kts-news05 { font-family: sans-serif; }
.kts-news05 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news05 li { list-style: none; margin: 0; }
.kts-news05 li::marker { content: none; }
.kts-news05 a { text-decoration: none; }
.kts-news05 a { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #F3F4F6; color: #1F2937; }
.kts-news05-day { flex: 0 0 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #1E3A8A; color: #fff; border-radius: 8px; }
.kts-news05-day b { font-size: 18px; line-height: 1.1; }
.kts-news05-day small { font-size: 10px; opacity: .8; }
.kts-news05-body { display: flex; flex-direction: column; gap: 2px; }
.kts-news05-cat { font-size: 12px; color: #2563EB; font-weight: 700; }
.kts-news05-title { font-size: 15px; }

06. サムネイル付き

左に小さな画像を置いた、ブログの新着記事一覧に向いたタイプです。

実際の見た目

HTMLコード

<div class="kts-news06">
  <ul>
    <li><a href="#"><span class="kts-news06-thumb t1"></span><span class="kts-news06-body"><span class="kts-news06-date">2026.10.05</span><span class="kts-news06-title">年末年始の営業日について</span></span></a></li>
    <li><a href="#"><span class="kts-news06-thumb t2"></span><span class="kts-news06-body"><span class="kts-news06-date">2026.09.28</span><span class="kts-news06-title">秋の体験ワークショップを開催します</span></span></a></li>
    <li><a href="#"><span class="kts-news06-thumb t3"></span><span class="kts-news06-body"><span class="kts-news06-date">2026.09.15</span><span class="kts-news06-title">季節限定のブレンド茶を発売しました</span></span></a></li>
  </ul>
</div>

CSSコード

.kts-news06 { font-family: sans-serif; }
.kts-news06 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news06 li { list-style: none; margin: 0; }
.kts-news06 li::marker { content: none; }
.kts-news06 a { text-decoration: none; }
.kts-news06 a { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: #1F2937; }
.kts-news06-thumb { flex: 0 0 88px; height: 60px; border-radius: 6px; background: #E5E7EB; /* 実際は background: url(画像のURL) center / cover; */ }
.kts-news06-thumb.t1 { background: linear-gradient(135deg, #93C5FD, #C4B5FD); }
.kts-news06-thumb.t2 { background: linear-gradient(135deg, #FDBA74, #FCA5A5); }
.kts-news06-thumb.t3 { background: linear-gradient(135deg, #86EFAC, #67E8F9); }
.kts-news06-body { display: flex; flex-direction: column; gap: 4px; }
.kts-news06-date { font-size: 12px; color: #6B7280; }
.kts-news06-title { font-size: 15px; font-weight: 700; line-height: 1.5; }

07. カード型のグリッド

お知らせをカードにして横に並べる、トップページ向けのタイプです。

実際の見た目

HTMLコード

<div class="kts-news07">
  <a href="#"><span class="kts-news07-date">2026.10.05</span><span class="kts-news07-cat">お知らせ</span><span class="kts-news07-title">年末年始の営業日について</span></a>
  <a href="#"><span class="kts-news07-date">2026.09.28</span><span class="kts-news07-cat">イベント</span><span class="kts-news07-title">秋の体験ワークショップを開催します</span></a>
  <a href="#"><span class="kts-news07-date">2026.09.15</span><span class="kts-news07-cat">新商品</span><span class="kts-news07-title">季節限定のブレンド茶を発売しました</span></a>
</div>

CSSコード

.kts-news07 { font-family: sans-serif; }
.kts-news07 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news07 li { list-style: none; margin: 0; }
.kts-news07 li::marker { content: none; }
.kts-news07 a { text-decoration: none; }
.kts-news07 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.kts-news07 a { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.08); color: #1F2937; transition: transform .2s; }
.kts-news07 a:hover { transform: translateY(-3px); }
.kts-news07-date { font-size: 12px; color: #6B7280; }
.kts-news07-cat { align-self: flex-start; padding: 2px 8px; background: #EEF2FF; color: #4338CA; border-radius: 4px; font-size: 11px; font-weight: 700; }
.kts-news07-title { font-size: 14px; font-weight: 700; line-height: 1.6; }

08. 枠で囲んだボックス型

見出し付きの枠で囲んだ、サイドバーやトップページの一角に置けるタイプです。

実際の見た目

HTMLコード

<div class="kts-news08">
  <div class="kts-news08-head">新着情報</div>
  <ul>
    <li><a href="#"><span class="kts-news08-date">2026.10.05</span><span class="kts-news08-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news08-date">2026.09.28</span><span class="kts-news08-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news08-date">2026.09.15</span><span class="kts-news08-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news08 { font-family: sans-serif; }
.kts-news08 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news08 li { list-style: none; margin: 0; }
.kts-news08 li::marker { content: none; }
.kts-news08 a { text-decoration: none; }
.kts-news08 { border: 1px solid #D1D5DB; border-radius: 8px; overflow: hidden; }
.kts-news08-head { padding: 10px 16px; background: #F3F4F6; font-weight: 700; color: #111827; border-bottom: 1px solid #D1D5DB; }
.kts-news08 a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #1F2937; }
.kts-news08 li:last-child a { border-bottom: 0; }
.kts-news08-date { display: block; font-size: 12px; color: #6B7280; }
.kts-news08-title { font-size: 14px; }

09. 左線アクセント

各お知らせの左に色の線を入れた、すっきりとした一覧です。

実際の見た目

HTMLコード

<div class="kts-news09">
  <ul>
    <li><a href="#"><span class="kts-news09-date">2026.10.05</span><span class="kts-news09-cat">お知らせ</span><span class="kts-news09-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news09-date">2026.09.28</span><span class="kts-news09-cat">イベント</span><span class="kts-news09-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news09-date">2026.09.15</span><span class="kts-news09-cat">新商品</span><span class="kts-news09-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news09 { font-family: sans-serif; }
.kts-news09 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news09 li { list-style: none; margin: 0; }
.kts-news09 li::marker { content: none; }
.kts-news09 a { text-decoration: none; }
.kts-news09 li { margin-bottom: 8px !important; }
.kts-news09 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; background: #F9FAFB; border-left: 4px solid #8B5CF6; color: #1F2937; }
.kts-news09-date { font-size: 13px; color: #6B7280; }
.kts-news09-cat { font-size: 12px; font-weight: 700; color: #7C3AED; }
.kts-news09-title { font-size: 15px; }

10. 表（テーブル）風

日付と内容を表のように並べた、きっちりとした印象の一覧です。

実際の見た目

HTMLコード

<div class="kts-news10">
  <ul>
    <li><a href="#"><span class="kts-news10-date">2026.10.05</span><span class="kts-news10-cat">お知らせ</span><span class="kts-news10-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news10-date">2026.09.28</span><span class="kts-news10-cat">イベント</span><span class="kts-news10-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news10-date">2026.09.15</span><span class="kts-news10-cat">新商品</span><span class="kts-news10-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news10 { font-family: sans-serif; }
.kts-news10 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news10 li { list-style: none; margin: 0; }
.kts-news10 li::marker { content: none; }
.kts-news10 a { text-decoration: none; }
.kts-news10 ul { border-top: 2px solid #111827; }
.kts-news10 a { display: grid; grid-template-columns: 110px 80px 1fr; align-items: center; padding: 12px 8px; border-bottom: 1px solid #D1D5DB; color: #1F2937; }
.kts-news10-date { font-size: 13px; color: #4B5563; }
.kts-news10-cat { font-size: 12px; color: #111827; font-weight: 700; }
.kts-news10-title { font-size: 15px; }

11. スクロールできる一覧

高さを決めて中だけスクロールさせる、件数が多い時にすっきり見せるタイプです。

実際の見た目

HTMLコード

<div class="kts-news11">
  <ul>
    <li><a href="#"><span class="kts-news11-date">2026.10.05</span><span class="kts-news11-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news11-date">2026.09.28</span><span class="kts-news11-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news11-date">2026.09.15</span><span class="kts-news11-title">季節限定のブレンド茶を発売しました</span></a></li>
    <li><a href="#"><span class="kts-news11-date">2026.09.01</span><span class="kts-news11-title">ホームページをリニューアルしました</span></a></li>
    <li><a href="#"><span class="kts-news11-date">2026.08.20</span><span class="kts-news11-title">夏季休業のお知らせ</span></a></li>
  </ul>
</div>

CSSコード

.kts-news11 { font-family: sans-serif; }
.kts-news11 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news11 li { list-style: none; margin: 0; }
.kts-news11 li::marker { content: none; }
.kts-news11 a { text-decoration: none; }
.kts-news11 ul { max-height: 170px; overflow-y: auto; border: 1px solid #E5E7EB; border-radius: 8px; }
.kts-news11 a { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #1F2937; }
.kts-news11-date { flex: 0 0 auto; font-size: 13px; color: #6B7280; }
.kts-news11-title { font-size: 14px; }

12. 「一覧を見る」ボタン付き

一覧の下に「すべてのお知らせを見る」ボタンを置いた、トップページ向けのタイプです。

実際の見た目

HTMLコード

<div class="kts-news12">
  <ul>
    <li><a href="#"><span class="kts-news12-date">2026.10.05</span><span class="kts-news12-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news12-date">2026.09.28</span><span class="kts-news12-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news12-date">2026.09.15</span><span class="kts-news12-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
  <a href="#" class="kts-news12-more">すべてのお知らせを見る ›</a>
</div>

CSSコード

.kts-news12 { font-family: sans-serif; }
.kts-news12 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news12 li { list-style: none; margin: 0; }
.kts-news12 li::marker { content: none; }
.kts-news12 a { text-decoration: none; }
.kts-news12 li a { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid #E5E7EB; color: #1F2937; }
.kts-news12-date { flex: 0 0 auto; font-size: 13px; color: #6B7280; }
.kts-news12-title { font-size: 15px; }
.kts-news12 .kts-news12-more { display: table; margin: 18px auto 0; padding: 10px 28px; border: 1px solid #111827; border-radius: 999px; color: #111827; font-size: 14px; font-weight: 700; }

13. ダークカラーのタイプ

黒系の背景で、引き締まった印象にしたい時の一覧です。

実際の見た目

HTMLコード

<div class="kts-news13">
  <ul>
    <li><a href="#"><span class="kts-news13-date">2026.10.05</span><span class="kts-news13-cat">お知らせ</span><span class="kts-news13-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news13-date">2026.09.28</span><span class="kts-news13-cat">イベント</span><span class="kts-news13-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news13-date">2026.09.15</span><span class="kts-news13-cat">新商品</span><span class="kts-news13-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news13 { font-family: sans-serif; }
.kts-news13 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news13 li { list-style: none; margin: 0; }
.kts-news13 li::marker { content: none; }
.kts-news13 a { text-decoration: none; }
.kts-news13 { padding: 8px 20px; background: #111827; border-radius: 10px; }
.kts-news13 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid #374151; color: #F9FAFB; }
.kts-news13 li:last-child a { border-bottom: 0; }
.kts-news13-date { font-size: 13px; color: #9CA3AF; }
.kts-news13-cat { font-size: 11px; color: #FACC15; border: 1px solid #FACC15; padding: 1px 8px; border-radius: 3px; }
.kts-news13-title { font-size: 15px; }

14. タイムライン風

縦線と点でつないだ、更新履歴を時系列で見せる一覧です。

実際の見た目

HTMLコード

<div class="kts-news14">
  <ul>
    <li><a href="#"><span class="kts-news14-date">2026.10.05</span><span class="kts-news14-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news14-date">2026.09.28</span><span class="kts-news14-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news14-date">2026.09.15</span><span class="kts-news14-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news14 { font-family: sans-serif; }
.kts-news14 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news14 li { list-style: none; margin: 0; }
.kts-news14 li::marker { content: none; }
.kts-news14 a { text-decoration: none; }
.kts-news14 li { position: relative; padding-left: 22px; border-left: 2px solid #BFDBFE; }
.kts-news14 li:last-child { border-left-color: transparent; }
.kts-news14 li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #3B82F6; }
.kts-news14 a { display: block; padding-bottom: 18px; color: #1F2937; }
.kts-news14-date { display: block; font-size: 12px; font-weight: 700; color: #3B82F6; }
.kts-news14-title { font-size: 15px; }

15. 重要なお知らせを固定表示

一番上に「重要」のお知らせを目立たせて置くタイプです。

実際の見た目

HTMLコード

<div class="kts-news15">
  <a href="#" class="kts-news15-pin"><span class="kts-news15-label">重要</span>台風の影響による臨時休業のお知らせ</a>
  <ul>
    <li><a href="#"><span class="kts-news15-date">2026.10.05</span><span class="kts-news15-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news15-date">2026.09.28</span><span class="kts-news15-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news15-date">2026.09.15</span><span class="kts-news15-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news15 { font-family: sans-serif; }
.kts-news15 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news15 li { list-style: none; margin: 0; }
.kts-news15 li::marker { content: none; }
.kts-news15 a { text-decoration: none; }
.kts-news15 .kts-news15-pin { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 12px 14px; background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 6px; color: #991B1B; font-weight: 700; font-size: 15px; }
.kts-news15-label { padding: 2px 10px; background: #DC2626; color: #fff; border-radius: 3px; font-size: 11px; }
.kts-news15 li a { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid #E5E7EB; color: #1F2937; }
.kts-news15-date { flex: 0 0 auto; font-size: 13px; color: #6B7280; }
.kts-news15-title { font-size: 15px; }

16. 流れるテロップ

お知らせが右から左へ流れる、電光掲示板のようなタイプです。

実際の見た目

HTMLコード

<div class="kts-news16">
  <span class="kts-news16-label">NEWS</span>
  <div class="kts-news16-track"><a href="#">年末年始の営業日について　／　秋の体験ワークショップを開催します　／　季節限定のブレンド茶を発売しました</a></div>
</div>

CSSコード

.kts-news16 { font-family: sans-serif; }
.kts-news16 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news16 li { list-style: none; margin: 0; }
.kts-news16 li::marker { content: none; }
.kts-news16 a { text-decoration: none; }
.kts-news16 { display: flex; align-items: center; overflow: hidden; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 6px; }
.kts-news16-label { flex: 0 0 auto; padding: 10px 14px; background: #F59E0B; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.kts-news16-track { flex: 1; overflow: hidden; white-space: nowrap; }
.kts-news16-track a { display: inline-block; padding: 10px 0 10px 100%; color: #78350F; font-size: 14px; animation: kts-news16-scroll 18s linear infinite; }
@keyframes kts-news16-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

17. 点線区切りのやわらかいタイプ

点線で区切った、手作り感のあるやさしい印象の一覧です。

実際の見た目

HTMLコード

<div class="kts-news17">
  <ul>
    <li><a href="#"><span class="kts-news17-date">2026.10.05</span><span class="kts-news17-cat">お知らせ</span><span class="kts-news17-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news17-date">2026.09.28</span><span class="kts-news17-cat">イベント</span><span class="kts-news17-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news17-date">2026.09.15</span><span class="kts-news17-cat">新商品</span><span class="kts-news17-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news17 { font-family: sans-serif; }
.kts-news17 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news17 li { list-style: none; margin: 0; }
.kts-news17 li::marker { content: none; }
.kts-news17 a { text-decoration: none; }
.kts-news17 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 4px; color: #1F2937; }
.kts-news17-date { font-size: 13px; color: #6B7280; }
.kts-news17-title { font-size: 15px; }
.kts-news17 { padding: 6px 18px; background: #FFF7ED; border-radius: 14px; }
.kts-news17 li { border-bottom: 2px dotted #FDBA74; }
.kts-news17 li:last-child { border-bottom: 0; }
.kts-news17-cat { padding: 1px 10px; background: #FB923C; color: #fff; border-radius: 999px; font-size: 11px; }
.kts-news17 a { color: #7C2D12; }

18. マウスを乗せると背景が変わる

お知らせにマウスを乗せると背景色が変わる、押しやすさが伝わる一覧です。

実際の見た目

HTMLコード

<div class="kts-news18">
  <ul>
    <li><a href="#"><span class="kts-news18-date">2026.10.05</span><span class="kts-news18-cat">お知らせ</span><span class="kts-news18-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news18-date">2026.09.28</span><span class="kts-news18-cat">イベント</span><span class="kts-news18-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news18-date">2026.09.15</span><span class="kts-news18-cat">新商品</span><span class="kts-news18-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news18 { font-family: sans-serif; }
.kts-news18 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news18 li { list-style: none; margin: 0; }
.kts-news18 li::marker { content: none; }
.kts-news18 a { text-decoration: none; }
.kts-news18 a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 4px; color: #1F2937; }
.kts-news18-date { font-size: 13px; color: #6B7280; }
.kts-news18-title { font-size: 15px; }
.kts-news18 a { padding: 14px 12px; border-radius: 6px; transition: background .2s; }
.kts-news18 a:hover { background: #EFF6FF; }
.kts-news18 a:hover .kts-news18-title { color: #1D4ED8; }
.kts-news18-cat { font-size: 12px; color: #6B7280; }

19. 小さめのサイドバー用

文字を小さくまとめた、サイドバーなど狭い場所で使える一覧です。

実際の見た目

HTMLコード

<div class="kts-news19">
  <ul>
    <li><a href="#"><span class="kts-news19-date">2026.10.05</span><span class="kts-news19-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news19-date">2026.09.28</span><span class="kts-news19-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news19-date">2026.09.15</span><span class="kts-news19-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news19 { font-family: sans-serif; }
.kts-news19 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news19 li { list-style: none; margin: 0; }
.kts-news19 li::marker { content: none; }
.kts-news19 a { text-decoration: none; }
.kts-news19 { max-width: 280px; }
.kts-news19 a { display: block; padding: 8px 0; border-bottom: 1px solid #F3F4F6; color: #374151; }
.kts-news19-date { display: block; font-size: 11px; color: #9CA3AF; }
.kts-news19-title { font-size: 13px; line-height: 1.5; }
.kts-news19 a:hover .kts-news19-title { color: #2563EB; }

20. 和風の落ち着いたタイプ

明朝体と落ち着いた色で、和の雰囲気に合わせた一覧です。

実際の見た目

HTMLコード

<div class="kts-news20">
  <div class="kts-news20-head">お知らせ</div>
  <ul>
    <li><a href="#"><span class="kts-news20-date">2026.10.05</span><span class="kts-news20-title">年末年始の営業日について</span></a></li>
    <li><a href="#"><span class="kts-news20-date">2026.09.28</span><span class="kts-news20-title">秋の体験ワークショップを開催します</span></a></li>
    <li><a href="#"><span class="kts-news20-date">2026.09.15</span><span class="kts-news20-title">季節限定のブレンド茶を発売しました</span></a></li>
  </ul>
</div>

CSSコード

.kts-news20 { font-family: sans-serif; }
.kts-news20 ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.kts-news20 li { list-style: none; margin: 0; }
.kts-news20 li::marker { content: none; }
.kts-news20 a { text-decoration: none; }
.kts-news20 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kts-news20-head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 3px double #7C2D12; text-align: center; color: #7C2D12; font-size: 18px; letter-spacing: .3em; }
.kts-news20 a { display: flex; gap: 18px; padding: 12px 4px; border-bottom: 1px solid #E7E5E4; color: #44403C; }
.kts-news20-date { flex: 0 0 auto; font-size: 13px; color: #7C2D12; }
.kts-news20-title { font-size: 15px; }

カスタマイズの小ワザ

• 新しいお知らせは、一番上に追加するのが基本です。<li>〜</li>をコピーして、ulタグのすぐ下に貼り付けてください。
• WordPressの投稿一覧を自動で表示している場合は、テーマが出力するclass名に合わせてCSSのセレクタを書き換えると、見た目だけを変えられます。
• 03番のNEWマークは、古くなったら手動で消してください。付けっぱなしにすると、かえって更新されていない印象になります。
• 16番の流れるテロップは、動きが気になる方もいるため、大事な情報はほかの場所にも書いておきましょう。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面	該当する一覧
シンプルに使いたい	01, 04, 18
カテゴリーで分けたい	02
更新を目立たせたい	03, 15
イベント告知	05
ブログの新着記事	06, 07
サイドバー	08, 19
すっきり見せたい	09, 10
件数が多い	11
トップページ	07, 12
引き締めたい	13
更新履歴	14
電光掲示板風	16
やわらかい雰囲気	17
和風のお店	20

20個の新着情報・お知らせ一覧は、ul・liタグとCSSで作る。新しいお知らせはliタグをコピーして一番上に追加し、NEWマークは古くなったら外す。