［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/20230414/22/migomigo7/27/9b/j/o1000070715270329593.jpg') repeat-y center top;background-size: 100% auto;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:20px;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/20230414/22/migomigo7/6b/a3/j/o1000070715270329600.jpg') repeat-y center center;background-size: 100% auto;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:20px;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/20230414/22/migomigo7/b9/50/j/o1000070715270329602.jpg'') repeat-y center center;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;border-radius: 5px;"><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/20230414/22/migomigo7/4e/32/j/o1000070715270329597.jpg'') repeat-y center center;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;border-radius: 5px;"><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/20230414/22/migomigo7/08/ed/j/o1000070715270329595.jpg'') repeat-y center center;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;border-radius: 5px;"><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/20230414/22/migomigo7/af/b4/j/o1000066715270329586.jpg'') repeat-y center center;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;border-radius: 5px;"><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/20230414/22/migomigo7/23/ff/j/o1000075015270329589.jpg'') repeat-y center center;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;border-radius: 5px;"><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/20230414/22/migomigo7/08/f8/j/o1000075015270329591.jpg'') repeat-y center center;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>