［CSS装飾］かわいい柄をみーつけた♪コピペで使えるボックスデザイン

好きなことを仕事にし
価値あるサービスを届けて

人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す

Webデザイナー
後藤美和子です♪

こんにちは！

ご訪問くださり
ありがとうございます

CSSでカスタマイズする
ボックス背景デザイン

今回は

かわいい柄を背景に
配置してみました

これからご紹介する
HTMLコード欄をコピーし

アメブロの投稿ページ編集画面で
［HTML編集］に切り替え

必要箇所に貼り付けると

ご自身の投稿ページに活かせます

ぜひ、よろしければご覧ください

▼---- Design Sample１----▼

↓ ↓ ↓

ここに文章を入力してください！

ここに文章を入力してください！
ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/f7/eb/g/o0100008615261890525.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

▼---- Design Sample2----▼

↓ ↓ ↓

ここに文章を入力してください！

ここに文章を入力してください！
ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/dd/84/g/o0100010415261890526.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

▼---- Design Sample3----▼

↓ ↓ ↓

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/b8/c6/g/o0100010815261890529.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

▼---- Design Sample4----▼

↓ ↓ ↓

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/c8/09/g/o0100016115261890532.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

▼---- Design Sample5----▼

↓ ↓ ↓

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/bf/22/g/o0100010015261890534.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

▼---- Design Sample6----▼

↓ ↓ ↓

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/2c/87/g/o0100014515261890536.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

▼---- Design Sample7----▼

↓ ↓ ↓

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/55/c8/g/o0100010715261890537.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

▼---- Design Sample8----▼

↓ ↓ ↓

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230328/19/migomigo7/b3/54/g/o0100012215261890538.gif') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:12px; background-color:rgba(255,255,255,0.8); border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>