デジタルだけど、どこか温かい。
ブログのちょっとした隙間に、手書き風のメモを置けたらいいな…と思ったことはありませんか？
今回は、コピペだけで簡単に設置できる「マスキングテープ付きデジタルメモ帳」を5種類ご用意しました。
日記、告知、大事なポイントのまとめなど、あなたのブログを素敵に彩るデザインをぜひ見つけてみてください。
1. 四隅マステの欲張りデコ
四隅をしっかり押さえた王道デザイン。これ一つでページがパッと華やかになります！
▼ 素材1のコード（タップでコピー）
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet"><div class="multi-tape-wrapper"><div class="multi-tape-memo"><div class="tape type-dot pos-tl"></div><div class="tape type-stripe pos-tr"></div><div class="tape type-washi pos-bl"></div><div class="tape type-check pos-br"></div><textarea class="memo-input" placeholder="ここに書き込めます..."></textarea></div></div><style>.multi-tape-wrapper{padding:60px 20px;display:flex;justify-content:center}.multi-tape-memo{position:relative;width:100%;max-width:360px;padding:40px 25px;background-color:#fffef9;box-shadow:0 4px 15px rgba(0,0,0,0.05);border-radius:2px}.memo-input{width:100%;height:300px;border:none;outline:none;resize:none;background-color:transparent;background-image:linear-gradient(rgba(180,160,140,0.15) 1px,transparent 1px);background-size:100% 1.8em;line-height:1.8em;font-family:'Zen Kurenaido',sans-serif;font-size:18px;color:#444}.tape{position:absolute;z-index:10;opacity:0.7;pointer-events:none;clip-path:polygon(0% 12%,3% 2%,2% 20%,5% 45%,1% 65%,4% 88%,0% 100%,100% 100%,97% 92%,100% 70%,96% 50%,99% 25%,96% 8%,100% 0%,0% 0%)}.type-dot{width:70px;height:26px;background-color:rgba(255,100,100,0.4);background-image:radial-gradient(#cc4444 20%,transparent 20%);background-size:8px 8px}.type-stripe{width:85px;height:24px;background-color:rgba(100,180,100,0.4);background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(50,100,50,0.2) 5px,rgba(50,100,50,0.2) 10px)}.type-washi{width:75px;height:28px;background-color:rgba(255,182,193,0.5);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E")}.type-check{width:90px;height:25px;background-color:rgba(100,150,220,0.4);background-image:linear-gradient(90deg,rgba(255,255,255,0.3) 1px,transparent 1px),linear-gradient(rgba(255,255,255,0.3) 1px,transparent 1px);background-size:6px 6px}.pos-tl{top:-10px;left:-25px;transform:rotate(-30deg)}.pos-tr{top:-5px;right:-20px;transform:rotate(40deg)}.pos-bl{bottom:-12px;left:-15px;transform:rotate(35deg);width:100px}.pos-br{bottom:-8px;right:-25px;transform:rotate(-25deg)}</style>2. 透け感こだわりコラージュ
マステをランダムに重ねたような、手作り感あふれるコラージュデザイン。絶妙な透け感がオシャレのポイントです。
▼ 素材2のコード（タップでコピー）
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet"><div class="collage-memo-wrapper"><div class="collage-memo-card"><div class="m-tape t-dot"></div><div class="m-tape t-stripe"></div><div class="m-tape t-washi"></div><div class="m-tape t-check"></div><textarea class="collage-memo-input" placeholder="自由にコラージュを楽しんで..."></textarea></div></div><style>.collage-memo-wrapper{padding:60px 20px;display:flex;justify-content:center}.collage-memo-card{position:relative;width:100%;max-width:360px;padding:40px 25px;background-color:#fffdf9;box-shadow:0 4px 15px rgba(0,0,0,0.06);border-radius:2px}.collage-memo-input{width:100%;height:300px;border:none;outline:none;resize:none;background-color:transparent;background-image:linear-gradient(rgba(180,160,140,0.15) 1px,transparent 1px);background-size:100% 1.8em;line-height:1.8em;font-family:'Zen Kurenaido',sans-serif;font-size:19px;color:#444}.m-tape{position:absolute;z-index:10;opacity:0.6;pointer-events:none;filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.05));clip-path:polygon(0% 10%,4% 0%,2% 25%,5% 50%,1% 75%,3% 90%,0% 100%,100% 100%,97% 85%,100% 65%,96% 45%,99% 25%,97% 10%,100% 0%,0% 0%)}.t-dot{top:15px;left:-25px;width:90px;height:28px;transform:rotate(-15deg);background-color:#ffb7b7;background-image:radial-gradient(#d35d5d 15%,transparent 15%);background-size:8px 8px}.t-stripe{top:-15px;right:10%;width:95px;height:24px;transform:rotate(5deg);background-color:#c9e4c9;background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(76,126,76,0.2) 5px,rgba(76,126,76,0.2) 10px)}.t-washi{bottom:20px;left:-30px;width:110px;height:32px;transform:rotate(45deg);background-color:#ffc0cb;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0.1) 0px,rgba(255,255,255,0.1) 1px,transparent 1px,transparent 4px),linear-gradient(rgba(255,255,255,0.1),transparent)}.t-check{bottom:-15px;right:5%;width:100px;height:26px;transform:rotate(-8deg);background-color:#c5d7ed;background-image:linear-gradient(90deg,rgba(255,255,255,0.4) 1px,transparent 1px),linear-gradient(rgba(255,255,255,0.4) 1px,transparent 1px);background-size:6px 6px}</style>3. 縦貼りマステのノート風
マステを縦に貼ることで、リアリティのあるノート感を演出。スッキリした印象です。
▼ 素材3のコード（タップでコピー）
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet"><div class="vertical-tape-wrapper"><div class="vertical-tape-memo"><div class="v-tape v-type-dot v-pos-1"></div><div class="v-tape v-type-stripe v-pos-2"></div><div class="v-tape v-type-washi v-pos-3"></div><div class="v-tape v-type-check v-pos-4"></div><textarea class="v-memo-input" placeholder="ここに入力してください..."></textarea></div></div><style>.vertical-tape-wrapper{padding:60px 20px;display:flex;justify-content:center}.vertical-tape-memo{position:relative;width:100%;max-width:360px;padding:45px 25px;background-color:#fffdf5;box-shadow:0 5px 15px rgba(0,0,0,0.05)}.v-memo-input{width:100%;height:300px;border:none;outline:none;resize:none;background-color:transparent;background-image:linear-gradient(rgba(180,160,140,0.15) 1px,transparent 1px);background-size:100% 1.8em;line-height:1.8em;font-family:'Zen Kurenaido',sans-serif;font-size:19px;color:#444}.v-tape{position:absolute;z-index:10;width:26px;height:70px;opacity:0.55;pointer-events:none;clip-path:polygon(10% 0%,25% 4%,50% 1%,75% 5%,90% 0%,100% 0%,100% 100%,85% 97%,65% 100%,45% 96%,25% 99%,10% 96%,0% 100%,0% 0%)}.v-type-dot{background-color:#ffb7b7;background-image:radial-gradient(#d35d5d 15%,transparent 15%);background-size:8px 8px}.v-type-stripe{background-color:#c9e4c9;background-image:repeating-linear-gradient(0deg,transparent,transparent 5px,rgba(76,126,76,0.2) 5px,rgba(76,126,76,0.2) 10px)}.v-type-washi{background-color:#ffc0cb;background-image:linear-gradient(rgba(255,255,255,0.2),transparent)}.v-type-check{background-color:#c5d7ed;background-image:linear-gradient(90deg,rgba(255,255,255,0.4) 1px,transparent 1px),linear-gradient(rgba(255,255,255,0.4) 1px,transparent 1px);background-size:6px 6px}.v-pos-1{top:-25px;left:40px;transform:rotate(-3deg)}.v-pos-2{top:-20px;right:60px;transform:rotate(5deg)}.v-pos-3{bottom:-30px;left:80px;transform:rotate(2deg);height:85px}.v-pos-4{bottom:-20px;right:30px;transform:rotate(-4deg)}</style>4. 重ね貼りの「×」印デコ
角にバッテン（×）の形でマステを重ねた遊び心のあるデザイン。ちょっとした一言メモに！
▼ 素材4のコード（タップでコピー）
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet"><div class="x-tape-wrapper"><div class="x-tape-memo"><div class="tape-x-group pos-x-tl"><div class="tape-piece tp-1 type-dot"></div><div class="tape-piece tp-2 type-washi"></div></div><div class="tape-x-group pos-x-br"><div class="tape-piece tp-1 type-stripe"></div><div class="tape-piece tp-2 type-check"></div></div><textarea class="x-memo-input" placeholder="メモを入力してください..."></textarea></div></div><style>.x-tape-wrapper{padding:60px 20px;display:flex;justify-content:center}.x-tape-memo{position:relative;width:100%;max-width:360px;padding:40px 25px;background-color:#fffef9;box-shadow:0 4px 20px rgba(0,0,0,0.06)}.x-memo-input{width:100%;height:300px;border:none;outline:none;resize:none;background-color:transparent;background-image:linear-gradient(rgba(180,160,140,0.15) 1px,transparent 1px);background-size:100% 1.8em;line-height:1.8em;font-family:'Zen Kurenaido',sans-serif;font-size:19px;color:#444}.tape-piece{position:absolute;width:80px;height:24px;opacity:0.5;pointer-events:none;clip-path:polygon(0% 10%,4% 0%,2% 25%,5% 50%,1% 75%,4% 90%,0% 100%,100% 100%,96% 85%,100% 65%,96% 45%,99% 25%,96% 10%,100% 0%,0% 0%)}.type-dot{background-color:#ffb7b7;background-image:radial-gradient(#d35d5d 15%,transparent 15%);background-size:8px 8px}.type-stripe{background-color:#c9e4c9;background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(76,126,76,0.2) 5px,rgba(76,126,76,0.2) 10px)}.type-washi{background-color:#ffc0cb;background-image:linear-gradient(rgba(255,255,255,0.2),transparent)}.type-check{background-color:#c5d7ed;background-image:linear-gradient(90deg,rgba(255,255,255,0.4) 1px,transparent 1px),linear-gradient(rgba(255,255,255,0.4) 1px,transparent 1px);background-size:6px 6px}.tape-x-group{position:absolute;z-index:10;width:80px;height:80px}.pos-x-tl{top:-20px;left:-20px}.pos-x-br{bottom:-20px;right:-20px}.tp-1{transform:rotate(-15deg)}.tp-2{transform:rotate(45deg);top:5px}</style>5. ドット方眼の日記風メモ
背景にドット方眼を入れた、整理しやすいデザイン。長めの文章もしっかり書けます。
▼ 素材5のコード（タップでコピー）
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet"><div class="deco-memo-wrapper"><div class="deco-memo-card"><div class="deco-tape t-pink t-pos-1"></div><div class="deco-tape t-green t-pos-2"></div><div class="deco-tape t-purple t-pos-3"></div><div class="deco-tape t-beige t-pos-4"></div><textarea class="deco-memo-input" placeholder="今日のこと、やりたいこと..."></textarea></div></div><style>.deco-memo-wrapper{padding:60px 20px;display:flex;justify-content:center;background-color:transparent}.deco-memo-card{position:relative;width:100%;max-width:380px;padding:45px 30px;background:#fffdf9;background-image:radial-gradient(#eceae4 1px,transparent 1px);background-size:20px 20px;box-shadow:0 10px 25px rgba(0,0,0,0.05);border-radius:3px}.deco-memo-input{width:100%;height:350px;border:none;outline:none;resize:none;background:transparent;background-image:linear-gradient(rgba(180,160,140,0.1) 1px,transparent 1px);background-size:100% 2em;line-height:2em;font-family:'Zen Kurenaido',sans-serif;font-size:19px;color:#555;padding:0}.deco-tape{position:absolute;z-index:10;pointer-events:none;opacity:0.65;filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.03));clip-path:polygon(0% 15%,2% 0%,1% 25%,4% 50%,1% 75%,3% 90%,0% 100%,100% 100%,98% 85%,100% 60%,97% 40%,99% 20%,97% 5%,100% 0%,0% 0%)}.t-pink{width:85px;height:28px;background-color:#f2d7d9;background-image:radial-gradient(#d3a2a2 15%,transparent 15%);background-size:7px 7px}.t-green{width:95px;height:24px;background-color:#d3e4cd;background-image:repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(255,255,255,0.4) 4px,rgba(255,255,255,0.4) 5px)}.t-purple{width:110px;height:30px;background-color:#d7d1e4;background-image:linear-gradient(rgba(255,255,255,0.2),transparent)}.t-beige{width:90px;height:26px;background-color:#e2d5c3;background-image:linear-gradient(90deg,rgba(255,255,255,0.3) 1px,transparent 1px),linear-gradient(rgba(255,255,255,0.3) 1px,transparent 1px);background-size:8px 8px}.t-pos-1{top:-15px;left:-20px;transform:rotate(-35deg)}.t-pos-2{top:-8px;right:-25px;transform:rotate(38deg)}.t-pos-3{bottom:-18px;left:10%;transform:rotate(-2deg)}.t-pos-4{bottom:10px;right:-30px;transform:rotate(-45deg)}</style>お気に入りのデザインは見つかりましたか？
カスタマイズなども自由に行っていただけます。ぜひブログ運営にお役立てください！
ご利用規約（免責事項）
- 本素材（コード）は、個人・商用を問わず無料でご利用いただけます。
- 著作権は放棄しておりません。コードの再配布、販売、自作発言はご遠慮ください。
- 動作確認はしておりますが、お使いの環境によりデザインが崩れる場合があります。本素材の使用によって生じたトラブルや不具合について、当ブログは一切の責任を負いかねます。
- 個別のカスタマイズ方法や不具合に関するサポートは行っておりません。
コメント