［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/20230720/06/migomigo7/23/b9/p/o0300030015314516757.png') repeat center top; 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/20230720/06/migomigo7/3c/95/p/o0300030015314516756.png') repeat center top; 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/20230720/06/migomigo7/83/c6/p/o0300030015314516760.png') repeat center top; 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/20230720/06/migomigo7/c7/43/p/o0300030015314516758.png') repeat center top;"><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.8);border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

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

被写体が、Sample4より少し大きく表示されるよ！

↓ ↓ ↓

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border:1px solid #daded4;border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230720/06/migomigo7/ee/0b/p/o0300030015314516763.png') repeat center top; 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:2px 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/20230720/06/migomigo7/f1/2d/p/o0300030015314516761.png') repeat center top; 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 Sample7----▼

↓ ↓ ↓

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230720/07/migomigo7/e7/b3/p/o0300030015314529515.png') repeat center top; 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 Sample8----▼

↓ ↓ ↓

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

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230720/07/migomigo7/76/a0/j/o0300030015314529516.jpg') repeat center top; 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>