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

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

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

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

こんにちは！

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

前回の投稿は
アメブロのヘッダーを自分で
カスタマイズしたい方向けに
ご紹介した内容でしたが
ご覧いただけましたでしょうか？！

『またいつか・・で終わらせない私になる！アメブロのヘッダー画像を自分でカスタマイズしたい人へ♪』好きなことを仕事にし価値あるサービスを届けて人に喜ばれながら売り上げを3倍に増やしていく起業家さんの時間を生み出すWebデザイナー後藤美和子です♪ こ…

ameblo.jp

今回は

木目調の画像
を配置してみました

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

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

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

必要箇所に貼り付けると

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

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

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

↓ ↓ ↓

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230106/16/migomigo7/e8/cb/j/o0640038015226286948.jpg') repeat-y center top;background-size: cover;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.6);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/20230106/16/migomigo7/16/8c/j/o0640038015226286946.jpg') repeat-y center top;background-size: 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,238,212,0.6);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/20230106/16/migomigo7/ba/25/j/o0640038015226286951.jpg') repeat-y center top;background-size: 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(132,80,50,0.6);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/20230106/16/migomigo7/75/9e/j/o0640042515226286953.jpg') repeat-y center top;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.6);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/20230106/16/migomigo7/b4/a0/j/o0640048015226286957.jpg') repeat-y center center;background-size: 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.4);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/20230106/16/migomigo7/bc/fd/j/o0640048015226286958.jpg') repeat-y center bottom;background-size: 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.6);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/20230106/16/migomigo7/d8/db/j/o0640036215226286959.jpg') repeat-y center top;background-size: 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(132,80,50,0.6);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/20230106/16/migomigo7/bc/fd/j/o0640048015226286958.jpg') repeat-y center top;background-size: 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,223,210,0.5);border-radius: 5px;border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p>&nbsp;</p>