背景色のみのシンプルな囲み枠

こんにちは、パソコンインストラクターの川上雄大です。

ブログを書く際、いろんな囲み枠をコピペで作れます。

今回は、そんな凝ったものではなく、背景色のみのシンプルな囲み枠をどうぞ^^!

枠線のない囲み枠のパターンです。

mistyrose

#ffe4e1

<div style="background-color:#ffe4e1;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

lightcyan

#e0ffff

<div style="background-color:#e0ffff;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

lightgreen

#90ee90

<div style="background-color:#90ee90;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

lemonchiffon

#fffacd

<div style="background-color:#fffacd;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

lightsalmon

#ffa07a

<div style="background-color:#ffa07a;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

lightpink

#ffb6c1

<div style="background-color:#ffb6c1;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

lavender

#e6e6fa

<div style="background-color:#e6e6fa;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

violet

#ee82ee

<div style="background-color:#ee82ee;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

gold

#ffd700

<div style="background-color:#ffd700;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

枠内の記事本文

#******の部分を変えると、自分のお好みの背景色の囲み枠が作れます↓

<div style="background-color:#******;margin:2em 0;padding:2em;">枠内の記事本文</div><br>

以上、アメブロ便利ワザでした。

LIDS札幌・ライフデザインスクール
川上雄大