［CSS装飾］木目調につる植物を添えると爽やかさが増すね！投稿デザインボックス

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

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

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

こんにちは！

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

フリー画像を探していて

今日の私の気分で

ピンときた！というか、
今日はこのテーマにしよう！
と直感で「好き」になったものを
選んでみましたよ

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

今回は

木目調につる植物が映える
爽やかな素材を配置してみました

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

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

必要箇所に貼り付けると

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230218/20/migomigo7/a0/65/j/o0640036015244829517.jpg');background-repeat:no-repeat;background-position: center top;background-size:100% auto;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35); margin:20px auto;padding:6px;"><div style="background-color:rgba(255,255,255,0.6); padding:16px;border-radius:5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div><p>&nbsp;</p>

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

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

◇　HTMLコード ◇

<div style="background-color:rgba(255,255,255,0.6); padding:16px;border-radius:5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div><p> </p>

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

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230218/20/migomigo7/f0/22/j/o0640036015244829519.jpg');background-size:100% auto;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;padding:6px;"><div style="background-color:rgba(255,255,255,0.6); padding:16px;border-radius:5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div>
<p>&nbsp;</p>

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

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230218/20/migomigo7/a1/41/j/o0640042715244829523.jpg');background-repeat:no-repeat;background-size:100% auto;background-position:center top; border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;padding:6px"><div style="background-color:rgba(255,255,255,0.6); padding:16px;border-radius:5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div><p>&nbsp;</p>

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

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230218/20/migomigo7/5b/57/j/o0640042715244829526.jpg');background-size:100% auto;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;padding:6px;"><div style="background-color:rgba(255,255,255,0.6); padding:16px; border-radius:5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div>
<p>&nbsp;</p>

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

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230218/20/migomigo7/3e/bb/j/o0640042715244829524.jpg');background-repeat:no-repeat;background-position: center top;background-size:100% auto;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;padding:6px;"><div style="background-color:rgba(255,255,255,0.6); padding:16px;border-radius:5px;"><p style="background: none;">ここに文章を入力してください！</p></div></div>
<p>&nbsp;</p>

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

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230218/20/migomigo7/a0/55/j/o0640036015244829529.jpg');background-repeat:no-repeat;background-position: center bottom;background-size:100% auto;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;padding:6px;"><div style="background-color:rgba(255,255,255,0.6); padding:16px;border-radius:5px;"><p style="background: none;">ここに文章を入力してください！</p></div></div>
<p>&nbsp;</p>

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

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230218/20/migomigo7/9f/0c/j/o0640042715244829532.jpg');background-repeat:no-repeat;background-position: center bottom;background-size:100% auto;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;padding:6px;"><div style="background-color:rgba(255,255,255,0.8); padding:16px;border-radius:5px;"><p style="background: none;">ここに文章を入力してください！</p></div></div>
<p>&nbsp;</p>