アメブロの記事で使えるふんわり柔らかい雰囲気の囲み枠(飾り枠)

ふんわり柔らかい雰囲気の囲み枠

アメブロの記事で使える「ふんわり柔らかい雰囲気の囲み枠」です。

色のバリエーションをいくつか作ってみましたので、もしも、気に入ったのがありましたら使ってみて下さい。

何れも、表示例とコードをセットで書いてありますので、コードの方をコピペでどうぞ。

コピペのあとで、「■」の部分を囲み枠の中に表示したい内容に書き換えてください。

ふんわり柔らかい雰囲気の囲み枠(赤)

■ふんわり柔らかい囲み枠(赤)
 
<div style="border:0 none;padding:15px;margin:15px 8px;box-shadow:0 0 5px 3px #ff9999,0 0 5px 2px #ff9999 inset;border-radius:10px;background:#fff7f7;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ふんわり柔らかい雰囲気の囲み枠(緑)

■ふんわり柔らかい囲み枠(緑)
 
<div style="border:0 none;padding:15px;margin:15px 8px;box-shadow:0 0 5px 3px #99ff99,0 0 5px 2px #99ff99 inset;border-radius:10px;background:#f7fff7;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ふんわり柔らかい雰囲気の囲み枠(青)

■ふんわり柔らかい囲み枠(青)
 
<div style="border:0 none;padding:15px;margin:15px 8px;box-shadow:0 0 5px 3px #9999ff,0 0 5px 2px #9999ff inset;border-radius:10px;background:#;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ふんわり柔らかい雰囲気の囲み枠(ピンク)

■ふんわり柔らかい囲み枠(ピンク)
 
<div style="border:0 none;padding:15px;margin:15px 8px;box-shadow:0 0 5px 3px #ff99ff,0 0 5px 2px #ff99ff inset;border-radius:10px;background:#fff7ff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ふんわり柔らかい雰囲気の囲み枠(オレンジ)

■ふんわり柔らかい囲み枠(オレンジ)
 
<div style="border:0 none;padding:15px;margin:15px 8px;box-shadow:0 0 5px 3px #ffcc99,0 0 5px 2px #ffcc99 inset;border-radius:10px;background:#fff7e0;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ふんわり柔らかい雰囲気の囲み枠(グレー)

■ふんわり柔らかい囲み枠(グレー)
 
<div style="border:0 none;padding:15px;margin:15px 8px;box-shadow:0 0 5px 3px #aaaaaa,0 0 5px 2px #aaaaaa inset;border-radius:10px;background:#fbfbfb;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

関連記事

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。