【コピペで完成】おしゃれな黒板風メモ帳コード4選！Google Fontsでリアルな質感を再現

manao

サイト管理人

こんにちは！今回は、自分のサイトやブログで手軽に使える「黒板風メモ帳」を4つのスタイルでご用意しました。
Google Fontsを活用して、温かみのある手書き風から、本物のチョークのような質感まで、コピーして貼るだけで再現できます！

Gemini

AIパートナー

各スタイルごとにコピペ用コードを置いています。スマホ表示にも対応しているので、ぜひお気に入りのフォントを見つけてみてくださいね。

1. Yusei Magic（手書き風）

コピペ用コード：

<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
<div style="background:#1e3d2f; border:10px solid #5d4037; border-radius:8px; padding:25px; color:#fff; font-family:'Yusei Magic', sans-serif; text-shadow:1px 1px 2px rgba(255,255,255,0.4); line-height:1.8;">
本日のメモ：<br>
Yusei Magicを使用した、力強い手書き風スタイルです。
</div>

2. Sawarabi Gothic（日付表示）

コピペ用コード：

<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<div id="bb-sawarabi" style="background:#1e3d2f; border:10px solid #5d4037; border-radius:8px; padding:20px; color:#fff; font-family:'Sawarabi Gothic', sans-serif;">
    <div style="border-bottom:1px dashed rgba(255,255,255,0.5); display:inline-block; margin-bottom:10px; font-size:0.9rem;" id="date-area"></div><br>
    Sawarabi Gothicを使用した、読みやすいスタイルです。
</div>
<script>
    const d = new Date();
    document.getElementById('date-area').innerText = `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
</script>

3. Zen Kurenaido（2本のチョーク）

コピペ用コード：

<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">
<div style="position:relative; background:#1e3d2f; border:10px solid #5d4037; border-radius:8px; padding:25px; color:#fff; font-family:'Zen Kurenaido', sans-serif; min-height:150px;">
    繊細でおしゃれなカフェ風スタイルです。
    <div style="position:absolute; right:20px; bottom:10px; display:flex; gap:10px;">
        <div style="width:30px; height:10px; background:#fff; border-radius:2px; transform:rotate(-5deg); box-shadow:1px 1px 2px rgba(0,0,0,0.5);"></div>
        <div style="width:30px; height:10px; background:#ffb3ba; border-radius:2px; transform:rotate(10deg); box-shadow:1px 1px 2px rgba(0,0,0,0.5);"></div>
   </div>
</div>

4. Kaisei Tokumin（消し跡・質感）

コピペ用コード：

<link href="https://fonts.googleapis.com/css2?family=Kaisei+Tokumin&display=swap" rel="stylesheet">
<div style="background-color:#1e3d2f; background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 80%), linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.03) 50%, transparent 55%); border:10px solid #5d4037; border-radius:8px; padding:30px; color:#fff; font-family:'Kaisei Tokumin', serif; text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 1px 1px 4px rgba(255, 255, 255, 0.3);">
    消し跡のテクスチャを加えた、最もリアルな本格スタイルです。
</div>