【Word Press】囲み枠テンプレ【青色系】入門

どうもあすぼーです。
今日はwordpressで使える囲み枠をマトメたので紹介いたします。
入門編と思いますので是非色々と試してみてください。

シンプル囲み枠（モノトーン系）

・モノトーンシンプル

<div style=”background: #F7F7F7; border: 1px solid #A1A1A1; padding: 10px; “>※ここに文章を入力</div>

・モノトーン背景のみ

<div style=”background: #F7F7F7; padding: 10px; “>※ここに文章を入力</div>

・モノトーン二重線

<div style=”background: #F7F7F7; border: 7px double #A1A1A1; padding: 10px;”>※ここに文章を入力</div>

・モノトーン影付き

<div style=”background: #F7F7F7; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;”>※ここに文章を入力</div>

・モノトーン浮き出し

<div style=”background: #F7F7F7; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;”>※ここに文章を入力</div>

・モノトーン枠付二重線

<div style=”background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;”>※ここに文章を入力</div>

・モノトーン枠付二重線（白枠）

<div style=”background: #DCDCDC; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #DCDCDC; padding: 10px;”>※ここに文章を入力</div>

シンプル囲み枠（青系）

<div style=”background: #F0F8FF; border: 1px solid #6091D3; padding: 10px;”>※ここに文章を入力</div>

青系二重線

<div style=”background: #F0F8FF; border: 7px double #6091D3; padding: 10px;”>※ここに文章を入力</div>

・青系影付き

<div style=”background: #F0F8FF; border: 1px solid transparent; border-radius: 5px; box-shadow: 3px 3px 5px 1px #778899; padding: 10px;”>※ここに文章を入力</div>

・青系浮き出し

<div style=”background: #F0F8FF; border: 1px solid #6091D3; box-shadow: 5px 5px 0 0 #778899; padding: 10px;”>※ここに文章を入力</div>

・青系枠付二重線

<div style=”background: #F0F8FF; border: 4px double #6091D3; box-shadow: 0 0 0 10px #F0F8FF; padding: 10px;”>※ここに文章を入力</div>

・青系枠付二重線（白枠）

まとめ