【賢威8】カスタマイズ用パーツ（枠、ボックス、画像の装飾）

<p class="bdr_gray">枠の色を灰にします。</p>
<p class="bdr_red">枠の色を赤にします。</p>
<p class="bdr_blue">枠の色を青にします。</p>
<p class="bdr_green">枠の色緑をにします。</p>
<p class="bdr_yellow">枠の色を黄にします。</p>
<p class="bdr_orange">枠の色をオレンジにします。</p>
<p class="bdr_pink">枠の色をピンクにします。</p>
<p class="bdr_lime">枠の色を黄緑にします。</p>
<p class="bdr_aqua">枠の色を水色にします。</p>
<p class="bdr_black">枠の色を黒にします。</p>

<p class="bdr_black shadow">枠の下方向と右方向に影をつけます。</p>
<p class="bdr_black shadow02">枠の四方全体に影をつけます。</p>

<p class="bdr_black rc12">四隅の角すべてを半径12pxで丸くします。</p>
<p class="bdr_black rc12-tl">上左の角を半径12pxで丸くします。</p>
<p class="bdr_black rc12-tr">上右の角を半径12pxで丸くします。</p>
<p class="bdr_black rc12-bl">下左の角を半径12pxで丸くします。</p>
<p class="bdr_black rc12-br">下右の角を半径12pxで丸くします。</p>

<p class="bdr_black rc12-tl rc12-br">上左の角と下右の角を半径12pxで丸くします。</p>
<p class="bdr_black rc12-tl rc12-tr">上左の角と上右の角を半径12pxで丸くします。</p>

<p class="bdr_black rc50" style="height: 50px;">高さ50pxの角丸長方形をつくります。</p>

<p class="bdr_black circle" style="width: 250px;height: 250px;padding: 80px;">縦横250pxの正円にします。</p>

<div class="box_style box_style01">
<div class="box_inner">
<p>斜線枠の装飾ボックスです。※設定しているカラーパターンが反映されます。</p>
</div>
</div>

<div class="box_style box_style02">
<div class="box_inner">
<p>黒斜線枠、白背景の装飾ボックスです。</p>
</div>
</div>

<div class="box_style box_style03">
<p>枠無し、色背景の装飾ボックスです。※設定しているカラーパターンが反映されます。</p>
</div>

<div class="box_style box_style04">
<p>灰色背景の装飾ボックスです。</p>
</div>

<div class="box_style box_style05">
<p>黒背景の装飾ボックスです。</p>
</div>

<div class="box_style box_style06">
<p>斜線背景の装飾ボックスです。</p>
</div>

<div class="box_style box_style07">
<div class="box_inner">
<p>背景画像の装飾ボックスです。デフォルトの画像が適用されます。</p>
</div>
</div>

<div class="box_style box_style07" style="background-image: url(※ここへURLを入れてください※)">
<div class="box_inner">
<p>背景画像の装飾ボックスです。自分で用意した画像を設定できます。</p>
</div>
</div>

<div class="box_style box_style_blue">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックススタイル：ブルー</p>
</div>
</div>

<div class="box_style box_style_green">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックススタイル：グリーン</p>
</div>
</div>

<div class="box_style box_style_orange">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックススタイル：オレンジ</p>
</div>
</div>

<div class="box_style box_style_red">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックススタイル：レッド</p>
</div>
</div>

<div class="box_style box_style_pink">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックススタイル：ピンク</p>
</div>
</div>

<div class="box_style box_style_yellow">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックススタイル：イエロー</p>
</div>
</div>

<div class="box_style box_style_gray">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックススタイル：グレー</p>
</div>
</div>

<!--下方向と右方向に影をつける-->
<img class="shadow" src="/wp-content/uploads/2020/10/1354172_s.jpg" alt="サンプル画像" width="320" height="240">

<!--四方全体に影をつける-->
<img class="shadow02" src="/wp-content/uploads/2020/10/1354172_s.jpg" alt="サンプル画像" width="320" height="240">

<!--囲み線-->
<img class="outline" src="/wp-content/uploads/2020/10/1354172_s.jpg" alt="サンプル画像" width="320" height="240">

<!--角丸-->
<img class="rc12" src="/wp-content/uploads/2020/10/1354172_s.jpg" alt="サンプル画像" width="320" height="240">

<!--円形-->
<img class="circle" src="/wp-content/uploads/2020/10/1354172_s.jpg" alt="サンプル画像" width="320" height="240">

<!--フレーム（写真風）-->
<img class="frame" src="/wp-content/uploads/2020/10/1354172_s.jpg" alt="サンプル画像" width="320" height="240">