おしゃれな囲み枠　その５　ステッチ風カラフル - はてなブログカスタマイズを０から学ぶ

今回はステッチ風の囲み枠をカラフルに作ってみたいと思います。

参考にした記事はこちら！

ステッチ風のカラフルな囲み枠

ピンク系

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #333333; background: #ff69b4; box-shadow: 0 0 0 5px #ff69b4; border: dashed 2px #d8bfd8;">ここに本文</div>

ここに本文

青系

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #ffffff; background: #4169e1; box-shadow: 0 0 0 5px #4169e1; border: dashed 2px #00008b;">ここに本文</div>

ここに本文

緑系

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #ffffff; background: #008080; box-shadow: 0 0 0 5px #008080; border: dashed 2px #7fffd4;">ここに本文</div>

ここに本文

紫系

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #ffffff; background: #9932cc; box-shadow: 0 0 0 5px #9932cc; border: dashed 2px #4b0082;">ここに本文</div>

ここに本文

くっきり目立つけどたくさん使うと目が疲れそうですね！

色のバリエーションを作りたいときはこちらを参考に。