どうもあすぼーです。
今回はwordpressで使える囲み枠【ステッチ風】をマトメたので紹介いたします。
コピペして是非色々と試してみてください。
・ステッチ風①
※ここに文章を入力
<div style=”background: #FFFFEA; border: 2px dashed #FFBF7F; box-shadow: 0 0 0 10px #FFFFEA; padding: 10px;”>※ここに文章を入力</div>
・ステッチ風①角丸
※ここに文章を入力
<div style=”background: #FFFFEA; border: 2px dashed #FFBF7F; border-radius: 5px; box-shadow: 0 0 0 10px #FFFFEA; padding: 10px;”>※ここに文章を入力</div>
・ステッチ風②
※ここに文章を入力
<div style=”background: #E0EFFF; border: 2px dashed #6495ED; box-shadow: 0 0 0 10px #E0EFFF; padding: 10px;”>※ここに文章を入力</div>
・ステッチ風②角丸
※ここに文章を入力
<div style=”background: #E0EFFF; border: 2px dashed #6495ED; border-radius: 5px; box-shadow: 0 0 0 10px #E0EFFF; padding: 10px;”>※ここに文章を入力</div>
・ステッチ風③
※ここに文章を入力
<div style=”background: #FFEAFF; border: 2px dashed #FFFFFF; box-shadow: 0 0 0 10px #FFEAFF; padding: 10px;”>※ここに文章を入力</div>
・ステッチ風③角丸
※ここに文章を入力
<div style=”background: #FFEAFF; border: 2px dashed #FFFFFF; border-radius: 5px; box-shadow: 0 0 0 10px #FFEAFF; padding: 10px;”>※ここに文章を入力</div>
・ステッチ風④
※ここに文章を入力
<div style=”background: #EAEAFF; border: 2px dashed #FFFFFF; box-shadow: 0 0 0 10px #EAEAFF; padding: 10px;”>※ここに文章を入力</div>
・ステッチ風④角丸
※ここに文章を入力
<div style=”background: #EAEAFF; border: 2px dashed #FFFFFF; border-radius: 5px; box-shadow: 0 0 0 10px #EAEAFF; padding: 10px;”>※ここに文章を入力</div>
まとめ
今回はおしゃれなステッチ風な囲み枠を紹介してみました。みなさんもぜひ使ってみてください。
コメント