好きなことを仕事にし
価値あるサービスを届けて
人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す
Webデザイナー
後藤美和子です♪
こんにちは！
ご訪問くださり
ありがとうございます
楽しいイベントが終わると
気持ちは年末へと。。。
気が忙しくなるところですね。
2022年も残すところ５日！
5日間でやりたいことを
リストに書き上げて
手を動かして、
頭を働かせて、
動いて動いて、
1年を終えたいなと思います。
（ちょっと自分にスパルタ
）
さて、今回は
CSSでカスタマイズした
ボックス背景に
水玉模様の画像
を配置してみました
これからご紹介する
HTMLコード欄をコピーし
アメブロの投稿ページ編集画面で
［HTML編集］に切り替え
必要箇所に貼り付けると
ご自身の投稿ページに活かせます
ぜひ、よろしければご覧ください
▼---- 
Design Sample１----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20221227/20/migomigo7/3c/29/j/o1600120015221881779.jpg') no-repeat center center;background-size: cover;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;">
<div style="background-color: rgba(255,255,255,0.6);padding:10px;">
<div style="padding:20px;background-color:rgba(255,255,255,0.6);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/20221227/20/migomigo7/f6/70/j/o1600120015221881654.jpg') no-repeat center center;background-size: cover;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;">
<div style="background-color: rgba(255,255,255,0.6);padding:10px;">
<div style="padding:20px;background-color:rgba(255,255,255,0.4);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/20221227/06/migomigo7/29/cf/j/o0800080015221606155.jpg') no-repeat center center;background-size: cover;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;">
<div style="background-color: rgba(255,255,255,0.7);padding:10px;">
<div style="padding:20px;background-color:rgba(255,255,255,0.6);border:2px dotted #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/20221227/06/migomigo7/e7/63/j/o0800080015221606148.jpg') no-repeat center center;background-size: cover;"><div style="background-color: rgba(255,255,255,0.35);padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);margin:20px auto;">
<div style="padding:20px;background-color:rgba(255,255,255,0.6);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/20221227/06/migomigo7/80/51/j/o0800080015221606152.jpg') no-repeat center center;background-size: cover;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;">
<div style="background-color: rgba(255,255,255,0.7);padding:10px;">
<div style="padding:20px;background-color:rgba(255,255,255,0.6);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/20221227/06/migomigo7/9d/a5/j/o0800080015221606145.jpg') no-repeat center center;background-size: cover;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="background-color: rgba(255,255,255,0.6);padding:10px;">
<div style="padding:20px;background-color:rgba(255,255,255,0.6);border-radius: 5px;border:1px 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/20221227/06/migomigo7/39/93/j/o0800080015221606150.jpg') no-repeat center bottom;background-size: cover;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="background-color: rgba(255,255,255,0.4);padding:10px;">
<div style="padding:20px;background-color:rgba(255,255,255,0.2);border-radius: 5px;border:1px 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/20221227/06/migomigo7/fa/1f/j/o0800080015221606149.jpg') no-repeat center bottom;background-size: cover;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="background-color: rgba(255,255,255,0.4);padding:10px;">
<div style="padding:20px;background-color:rgba(255,255,255,0.2);border-radius: 5px;border:1px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
以上の8点、
水玉模様の画像を背景にした
ボックスデザイン
ご覧いただき
ありがとうございました♪
＼人数限定／
2023年のお仕事に向けて準備は大丈夫？！
詳細はこちらをクリックしてね♪
↓ ↓ ↓ ↓ ↓ ↓
↑ ↑ ↑ ↑ ↑ ↑
その他の水玉模様の背景
はこちら
デザインで伝える・伝わる画像作り
【過去の連載記事】
■■■■■■
集客WEBページ（ランディングページ）制作
アメブロやFBヘッダー画像のデザイン作成
Excel集計／PowerPoint販促資料
パソコン苦手でも大丈夫！
Officeソフトの操作サポート
時間を生み出し本業に専念したいあなたに！
アメブロやFacebookヘッダーの魅せるデザイン画像
Excel、PowerPoint、Word等で時短資料作成
Officeソフトの便利機能を最短で活用できる集客事務処理
最短で真似するだけでOK！
どうすればもっとアメブロの記事が見やすくなるか知りたい！
有名ブロガーさんの装飾を真似てPVを上げたい！
お客様が見やすくて自然と読まれるようなブロブにしたい！
もし気になることや疑問など下記のLINEに
ご質問メッセージをくだされば、
無料相談でお答えいたします！
( ID: @238peydi )