好きなことを仕事にし
価値あるサービスを届けて
人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す
Webデザイナー
後藤美和子です♪
今回は
色違いの花柄模様
を配置してみました
HTML＆CSSでカスタマイズした
ボックスデザイン
ぜひ、ご覧ください。
これからご紹介する
HTMLコード欄をコピーし
アメブロの投稿ページ編集画面で
［HTML編集］に切り替え
必要箇所に貼り付けると
ご自身の投稿ページに活かせます
▼---- 
Design Sample１----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/7e/2d/j/o0150015015449341953.jpg') 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:16px; background-color:rgba(255,255,255,0.9);border-radius: 5px;border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
▼---- Design Sample2----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/97/d2/j/o0150015015449341956.jpg') 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:16px; background-color:rgba(255,255,255,0.8);border-radius: 5px;border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
▼---- Design Sample3----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/ac/17/j/o0150015015449341958.jpg') 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:16px; background-color:rgba(255,255,255,0.8);border:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div>
<p> </p>
▼---- Design Sample4----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/f0/45/j/o0150015015449341959.jpg') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);margin:20px auto;"><div style="padding:10px;"><div style="padding:16px; background-color:rgba(255,255,255,0.8);border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p></div></div></div>
<p> </p>
▼---- Design Sample5----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border:1px solid #daded4;border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/ee/7a/j/o0150015015449341961.jpg') 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:16px; background-color:rgba(255,255,255,0.9);border-radius: 5px;border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
▼---- Design Sample6----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/eb/fc/j/o0150015015449341963.jpg') 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:16px;background-color:rgba(255,255,255,0.9);border-radius: 5px;border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
▼---- Design Sample7----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/9c/c1/j/o0150015015449341969.jpg') 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:16px;background-color:rgba(255,255,255,0.9);border-radius: 5px;border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
▼---- Design Sample8----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/90/1f/j/o0150015015449341970.jpg') 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:16px;background-color:rgba(255,255,255,0.9);border-radius: 5px;border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
▼---- Design Sample9----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240609/14/migomigo7/12/27/j/o0150015015449341965.jpg') 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:16px;background-color:rgba(255,255,255,0.9);border-radius: 5px;border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
以上の9点、
色違いの花柄模様を
背景にしたボックスデザイン
いかがでしたでしょうか
最後まで、ご覧いただき
ありがとうございました♪
他にも背景デザイン画像を
多数ご用意
↓ ↓ ↓
デザインで伝える・伝わる画像作り
【過去の連載記事】
■■■■■■
集客WEBページ（ランディングページ）制作
アメブロやFBヘッダー画像のデザイン作成
Excel集計／PowerPoint販促資料
パソコン苦手でも大丈夫！
Officeソフトの操作サポート
もし気になることや疑問など下記のLINEに
ご質問メッセージをくだされば、
無料相談でお答えいたします！
( ID: @238peydi )