［CSS装飾］ちょっと変わった模様柄♪コピペで使える背景デザイン！

一人で頑張っている
忙しい起業家さんの
＼ビジネスをサポート／

売上アップのために
ITツールを活用し集客導線を整える
Web集客コンサルタント
後藤美和子です

パソコン講師歴20年以上
マンツーマン対応がご好評

こんにちは！

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

まずは

ご案内です

アメブロのヘッダー画像を
自分で設置したい方に
オススメ♪

難しいと感じさせる
CSS編集画面で簡単！

カスタマイズ編集が学べます。
画像はCANVAでサクッと編集

さて、今回は

タイルのように敷き詰めて使える模様
を使ってブログ投稿記事を装飾できる
背景デザインをご用意しました

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

ぜひ、ご覧ください。

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

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

必要箇所に貼り付けると

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

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

↓ ↓ ↓

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background:  url('https://stat.ameba.jp/user_images/20240213/20/migomigo7/0f/84/j/o0100010015401133605.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 Sample2----▼

↓ ↓ ↓

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

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240213/20/migomigo7/18/4b/j/o0100010015401133610.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 Sample3----▼

↓ ↓ ↓

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

◇　HTMLコード ◇

<p>&nbsp;</p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240213/20/migomigo7/2e/89/j/o0100010015401133608.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: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/20240213/20/migomigo7/54/7c/j/o0100010015401133612.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.9);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/20240213/20/migomigo7/3a/c9/j/o0100010015401133618.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/20240213/20/migomigo7/b4/83/j/o0100010015401133616.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>

以上の6点、
タイル張りに使える柄を
背景画像にしたボックスデザイン