賢威8ではコンテンツを区切るための装飾ボックスをあらかじめ15種類ほど用意しております。
賢威8WordPress版をお使いの方はビジュアルエディターにある「ボックス」からその一部を利用することができます。
ただし一部のみですので、ビジュアルエディターから選択できないボックスについては、下記サンプルコードをテキストエディターに貼り付けてご使用ください。
テキストが入ります。
|
1 2 3 4 5 |
<div class="box_style box_style01"> <div class="box_inner"> <p>テキストが入ります。</p> </div> </div> |
テキストが入ります。
|
1 2 3 4 5 |
<div class="box_style box_style02"> <div class="box_inner"> <p>テキストが入ります。</p> </div> </div> |
テキストが入ります。
|
1 2 3 |
<div class="box_style box_style03"> <p>テキストが入ります。</p> </div> |
テキストが入ります。
|
1 2 3 |
<div class="box_style box_style04"> <p>テキストが入ります。</p> </div> |
テキストが入ります。
|
1 2 3 |
<div class="box_style box_style05"> <p>テキストが入ります。</p> </div> |
テキストが入ります。
|
1 2 3 |
<div class="box_style box_style06"> <p>テキストが入ります。</p> </div> |
テキストが入ります。
|
1 2 3 4 5 |
<div class="box_style box_style07"> <div class="box_inner"> <p>テキストが入ります。</p> </div> </div> |
背景に画像を敷いた7つ目のボックスは、画像を変更するのにCSSの編集が必要です。
または、直接「style=”background-image: url(画像のパス)”」としても大丈夫です。
テキストが入ります。
|
1 2 3 4 5 |
<div class="box_style box_style07" style="background-image: url(http://demo.keni.jp/wp-content/uploads/2018/09/bg-sample.jpg)"> <div class="box_inner"> <p>テキストが入ります。</p> </div> </div> |
タイトルが入ります。
テキストが入ります。
|
1 2 3 4 5 6 |
<div class="box_style box_style_blue"> <div class="box_inner"> <div class="box_style_title"><span>タイトルが入ります。</span></div> <p>テキストが入ります。</p> </div> </div> |
タイトルが入ります。
テキストが入ります。
|
1 2 3 4 5 6 |
<div class="box_style box_style_green"> <div class="box_inner"> <div class="box_style_title"><span>タイトルが入ります。</span></div> <p>テキストが入ります。</p> </div> </div> |
タイトルが入ります。
テキストが入ります。
|
1 2 3 4 5 6 |
<div class="box_style box_style_orange"> <div class="box_inner"> <div class="box_style_title"><span>タイトルが入ります。</span></div> <p>テキストが入ります。</p> </div> </div> |
タイトルが入ります。
テキストが入ります。
|
1 2 3 4 5 6 |
<div class="box_style box_style_red"> <div class="box_inner"> <div class="box_style_title"><span>タイトルが入ります。</span></div> <p>テキストが入ります。</p> </div> </div> |
タイトルが入ります。
テキストが入ります。
|
1 2 3 4 5 6 |
<div class="box_style box_style_pink"> <div class="box_inner"> <div class="box_style_title"><span>タイトルが入ります。</span></div> <p>テキストが入ります。</p> </div> </div> |
タイトルが入ります。
テキストが入ります。
|
1 2 3 4 5 6 |
<div class="box_style box_style_yellow"> <div class="box_inner"> <div class="box_style_title"><span>タイトルが入ります。</span></div> <p>テキストが入ります。</p> </div> </div> |
タイトルが入ります。
テキストが入ります。
|
1 2 3 4 5 6 |
<div class="box_style box_style_gray"> <div class="box_inner"> <div class="box_style_title"><span>タイトルが入ります。</span></div> <p>テキストが入ります。</p> </div> </div> |
シンプルに枠の色を変えたい場合は以下を利用できます。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="p10 bdr">テキストが入ります。</div> <div class="p10 bdr_red">テキストが入ります。</div> <div class="p10 bdr_blue">テキストが入ります。</div> <div class="p10 bdr_green">テキストが入ります。</div> <div class="p10 bdr_yellow">テキストが入ります。</div> <div class="p10 bdr_navy">テキストが入ります。</div> <div class="p10 bdr_orange">テキストが入ります。</div> <div class="p10 bdr_pink">テキストが入ります。</div> <div class="p10 bdr_lime">テキストが入ります。</div> <div class="p10 bdr_aqua">テキストが入ります。</div> <div class="p10 bdr_black">テキストが入ります。</div> <div class="p10 bdr_gray">テキストが入ります。</div> |
なお「noborder」とすることで、枠線を消すこともできます。
テキストが入ります。
|
1 |
<div class="p10 bdr noborder">テキストが入ります。</div> |
