［CSS装飾］花柄シリーズ｜柄が違えば印象も変わる♪コピペで使える背景デザイン！

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

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

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

今回は

花柄のデザイン画像
を配置してみました

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

ぜひ、ご覧ください。

    

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

 

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


必要箇所に貼り付けると

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

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

     ↓ ↓ ↓

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background:  url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/0b/0f/j/o0150015015447929778.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>&nbsp;</p>

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

     ↓ ↓ ↓

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/38/34/j/o0150015015447929769.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>&nbsp;</p>

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

     ↓ ↓ ↓

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/ba/19/j/o0150015015447929770.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>&nbsp;</p>

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

     ↓ ↓ ↓

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

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/e5/8e/j/o0150015015447929757.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>&nbsp;</p>

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

     ↓ ↓ ↓

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

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border:1px solid #daded4;border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/cf/da/j/o0150015015447929760.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>&nbsp;</p>

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

     ↓ ↓ ↓

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

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/f3/a4/j/o0150015015447929765.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>&nbsp;</p>

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

     ↓ ↓ ↓

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/37/62/j/o0150015015447929772.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>&nbsp;</p>

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

     ↓ ↓ ↓

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

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

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

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240605/23/migomigo7/1c/b8/j/o0150015015447929774.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>&nbsp;</p>

以上の8点、
花柄のデザインを
背景にしたボックスデザイン

いかがでしたでしょうか

最後まで、ご覧いただき
ありがとうございました♪

＼ 過去の投稿デザイン／

『［CSS装飾］コピペで使える木目の背景デザインはこちら！』

『［CSS装飾］大好きなマカロンの画像で大人可愛い投稿を♪コピペで使える背景デザイン』

『［CSS装飾］水玉模様の画像でアレンジ♪コピペで使える背景デザイン』

『［CSS装飾］あなたのメッセージを勢いある集中線で伝えてみよう！コピペで使える背景デザイン』

『［CSS装飾］花の女王と呼ばれるバラの画像で投稿をエレガント に♪コピペで使える背景デザイン』

デザインで伝える・伝わる画像作り

【過去の連載記事】

1. 理想のお客様に出会えるヘッダー画像♪
2. 【Web制作】ご依頼者さまの想いを形に
3. 集客のために！ヘッダー画像はリニューアが必要
4. 【ヘッダー画像に想いを込めて】起業家さんをサポートできる喜び！！
5. 理想のお客様に出逢うためにLPのヘッダー画像は必須なのか？！
6. ファーストビューであなたのお客様を惹きつける！
7. 名刺はあなたの分身！ブログヘッダーは？
8. あなたのミッションを聞かせてください！
9. Zoomインタビュー！編みもの作家をデザインしたらこうなった？！

■■■■■■

集客WEBページ（ランディングページ）制作

アメブロやFBヘッダー画像のデザイン作成

Excel集計／PowerPoint販促資料

パソコン苦手でも大丈夫！

Officeソフトの操作サポート

もし気になることや疑問など下記のLINEに
ご質問メッセージをくだされば、
無料相談でお答えいたします！

( ID: @238peydi )