小さい頃の夢は花屋さん
になること
でした。
花によって形も色も違い
花の組み合わせによっても
演出できる雰囲気がガラッと変わる！
Web制作をしながら
配色選びで
花束の写真を参考にする
こともあるんですよ
好きなことを仕事にし
価値あるサービスを届けて
人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す
Webデザイナー
後藤美和子です♪
CSSでカスタマイズする
ボックス背景デザイン
今回は、大好きな牡丹の花をバックに
アメブロの投稿記事に使えるデザイン
をご用意
お好みの背景があれば
ぜひ活用してみてくださいね
これからご紹介する
HTMLコード欄をコピーし
アメブロの投稿ページ編集画面で
［HTML編集］に切り替え
必要箇所に貼り付けると
ご自身の投稿ページに活かせます
▼---- 
Design Sample１----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240603/20/migomigo7/92/ab/j/o1000140015447087206.jpg') repeat-y center top/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.9);border-radius: 5px;border:1px 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/20240603/20/migomigo7/3e/51/j/o1000140015447087208.jpg') repeat-y center top/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.9);border-radius: 5px;border:1px 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/20240603/20/migomigo7/9b/d8/j/o1000140015447087212.jpg') repeat-y center top/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.9);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/20240603/20/migomigo7/5e/5a/j/o1000140015447087215.jpg') repeat-y center top/100% auto;"><div style="padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:20px;background-color:rgba(255,255,255,0.9);border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
▼---- Design Sample5----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240603/20/migomigo7/fd/23/j/o1000140015447087217.jpg') repeat-y center top/100% auto;"><div style="padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:20px;background-color:rgba(255,255,255,0.9);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/20240603/20/migomigo7/b3/7e/j/o1000140015447087218.jpg') repeat-y center top/100% auto;"><div style="padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:20px;background-color:rgba(255,255,255,0.9);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/20240603/20/migomigo7/81/85/j/o1000140015447087220.jpg') repeat-y center top/100% auto;"><div style="padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:20px;background-color:rgba(255,255,255,0.9);border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
以上の7点、
ご利用いただけると嬉しいです
ご覧いただき、ありがとうございました♪
〜
〜
公園シリーズ［1］
公園シリーズ［2］
爽やか編［1］
花柄シリーズ［1］
デザインで伝える・伝わる画像作り
気軽にLINEメッセージを送ってください！
( ID: @238peydi )
☆・‥…☆・‥…☆・‥…☆
今のステージをワンランク高めて
集客をもっと加速していきたい方！
個別サポートだから安心
商品作りのためのブランディングコンサル
集客WEBページ（ランディングページ）制作
アメブロやFBヘッダー画像のデザイン作成
提案書作りの添削
CANVAデザイン制作マスター
〜・〜・〜・〜
あなたの思考のモヤモヤを
一緒に解消していきませんか？！
〜・〜・〜・〜
後藤美和子の
LINE公式アカウントはこちら
↓ ↓ ↓
気軽にLINEメッセージを送ってください！
( ID: @238peydi )