賢威8は、独自の装飾ボックスが用意されていますが、少し色が少ない気がします。
そこで今回は、賢威8の装飾ボックスで好きな色に変更する方法をお伝えします。
準備
最初に、賢威8の装飾ボックスをカスタマイズするために必要な操作を、お伝えします。
必要ないという方は、単色ボックスのカスタマイズから見てください。
htmlの入力方法
今回のカスタマイズは、投稿画面にHTMLを入力します。
GutenbergはカスタムHTMLで。
クラシックエディターは、テキストで入力してください。
詳しくは、こちらの記事をご覧ください。
余白の指定方法
賢威8で用意されている装飾ボックスは、ボックス内外の余白が設定されていないので個別に指定します。
<div class="bdr p10">p10：内側の余白を10pxにする</div>
詳しくは、こちらの記事をご覧ください。
独自スタイルの追加方法
また、独自スタイルの追加を行うことで、色や線種などのカスタマイズをおこないます。
独自スタイルは投稿画面の『この投稿のみに表示するCSS/JS欄』に入力します。
全てのページで適用したい場合は、次の記事を参考にしてください。
色の指定について
色を指定するのは、ちょっとした知識が必要です。
CSSの色指定がよくわからない方は、こちらをご覧ください。
枠線の指定について
枠線は、borderで指定します。
幅：単位がpxで、1から増えるごとに太くなります。
線種：線のタイプを指定します。
| 線種 | タイプ | 線種 | タイプ |
|---|---|---|---|
| none | 線なし | solid | 実線 |
| dashed | 破線 | dotted | 点線 |
線種はもっとあります。
詳しくは、こちらの記事をみてください。
単色ボックスのカスタマイズ
単色ボックスとは、次のような枠のみのボックスです。
<div class="bdr_gray p10">灰色枠</div>
賢威8では、12種類用意されています。
| 色 | クラス | 色 | クラス | 色 | クラス |
|---|---|---|---|---|---|
|
赤
|
bdr_red |
青
|
bdr_blue |
緑
|
bdr_green |
|
黄色
|
bdr_yellow |
ネイビー
|
bdr_navy |
オレンジ
|
bdr_orange |
|
ピンク
|
bdr_pink |
ライム
|
bdr_lime |
水色
|
bdr_aqua |
|
黒
|
bdr_black |
灰色
|
bdr_gray |
これだけあれば十分な気がします…
色だけでなく、幅や線種も変更してみましょう。
枠の色・幅・線種を変更する
まずは枠の色変更です。
次のように色を変えてみましょう。
<div class="bdr mybdr p10">変更した枠色</div>
<style>
.mybdr{
border: 5px(幅) dotted（線種) #DDA0DD(色コード) !important;
}
</style>
赤文字のmybdrは、好きな文字に変更してください。
色ごとに名前を変えることで、複数の色を指定できます。
ただし、スタイルは前方に『.（ピリオド）』が付いていることに注意しましょう。
幅は単位がpxで、1から増えるごとに太くなります。
線種は、次の表の文字を使用できます。
色コードは、変更したい色を指定します。
背景色を変更する
次は背景色を変更してみます。
次のように色を変えてみましょう。
背景色を黒にしたことで、文字が見えなくなったため白色に変更しました。
<div class="bdr mybdr p10">変更した枠色</div>
<style>
.mybdr{
border: 5px(幅) dotted（線種) #DDA0DD(色コード) !important;
background-color: #333333(色コード) !important; ←背景色を変更
color: #ffffff(色コード) !important; ←文字色を変更
}
</style>
背景画像を表示する
次は背景に画像を表示してみます。
次のように色を変えてみましょう。
に設定
●背景を透過させた
png画像を
指定して
背景色と
背景画像を合成しています
背景画像を表示するには、background-imageを使用します。
<div class="bdr mybdr p10">変更した枠色</div>
<style>
.mybdr{
border: 5px(幅) dotted（線種) #DDA0DD(色コード) !important;
background-color: #333333(色コード) !important; ←背景色を変更
color: #ffffff(色コード) !important; ←文字色を変更
background-image:url(/wp-content/uploads/over512mb.png); ←背景画像のURLを指定
}
</style>
角を丸くする
次は枠の角を丸くしてみます。
次のように色を変えてみましょう。
●背景を透過させたpng画像を
指定して
背景色と
背景画像を合成しています
●さらに角を丸く！
枠の角を丸くするには、border-radiusを使用します。
<div class="bdr mybdr p10">変更した枠色</div>
<style>
.mybdr{
border: 5px(幅) dotted（線種) #DDA0DD(色コード) !important;
background-color: #333333(色コード) !important; ←背景色を変更
color: #ffffff(色コード) !important; ←文字色を変更
background-image:url(/wp-content/uploads/over512mb.png); ←背景画像のURLを指定
border-radius: 20px(半径) !important; ←角丸を指定
}
</style>
影を付ける
次はボックス枠に影を付けてみましょう。
次のように色を変えてみましょう。
●背景を透過させたpng画像を指定して
背景色と背景画像を合成しています
●さらに角を丸く！
●最後に影を付ける
影を付けるには、box-shadowを使用します。
<div class="bdr mybdr p10">変更した枠色</div>
<style>
.mybdr{
border: 5px(幅) dotted（線種) #DDA0DD(色コード) !important;
background-color: #333333(色コード) !important; ←背景色を変更
color: #ffffff(色コード) !important; ←文字色を変更
background-image:url(/wp-content/uploads/over512mb.png); ←背景画像のURLを指定
border-radius: 20px(半径) !important; ←角丸を指定
box-shadow:10px（横のズレ） 10px（縦のズレ） 5px（ぼかし距離） 0px（拡大） rgba(0,0,0,0.5);←影を指定
}
</style>
単色ボックスエディター
今までに紹介した単色ボックスのカスタマイズをおこなえるエディターを作成しました。
各値を変更すると、どのような変化があるか確かめてみてください。
斜線枠ボックスのカスタマイズ
斜線枠ボックスとは、次のように枠が斜線になっているボックスです。
青枠
<div class="box_style box_style_blue">
<div class="box_inner">
<p>青枠</p>
</div>
</div>
| 色 | クラス | 色 | クラス | 色 | クラス |
|---|---|---|---|---|---|
|
青 |
box_style_blue |
緑 |
box_style_green |
オレンジ |
box_style_orange |
|
赤 |
box_style_red |
ピンク |
box_style_pink |
黄色 |
box_style_yellow |
|
灰色 |
box_style_gray |
賢威8では、7種類用意されています。
もう少し増やしたいですね。
斜線枠ボックスも、単色ボックスと同じように変更してみましょう。
斜め枠線の色を変更する
賢威8では、次のようなグラデーションを書くCSSを使用して、斜めの枠線を作成しています。
(1) background-size: 4px 4px;
(2) background-image: linear-gradient( -45deg, #fff（白） 25%, #0baedd（青） 25%, #0baedd（青） 50%, #fff（白） 50%, #fff（白） 75%, #0baedd（青） 75%, #0baedd（青） );
(3) background-repeat: repeat;
(1) のbackground-sizeは、画像のサイズを指定しています。ここでは縦4px横4pxというとても小さい図形です。
(2) は、背景画像にグラデーションを描画しています。
linear-gradientの最初の-45degは、角度を45度にしてくださいという指示。
ついで、画像の最初から25%までは白で描画。
画像の25%から50%までは青で描画。
画像の50%から75%までは白。
画像の75%から最後までは青でしてくださいという指示です。
つまり斜めの縞模様を書いているわけです。
最後の(3)は、図形を繰り返し表示してくださいという指示です。
その結果、次のような縞模様で塗りつぶしたボックスが描画されます。
このボックスの内側に、白く塗りつぶしたボックスを書くことで、斜め縞模様の枠が完成します。
色の変更は簡単ですね。
linear-gradientの中の、色コードを変更するだけです。
<div class="box_style box_style_blue mybdr2">
<div class="box_inner">
<p>青枠</p>
</div>
</div>
.mybdr2{
background-image: linear-gradient( -90deg, #0000FF(青) 25%, #ff0000(赤) 25%, #ff0000(赤) 50%, #0000FF(青) 50%, #0000FF(青) 75%, #ff0000(赤) 75%, #ff0000(赤) );
}
背景色・背景画像を変更する
背景色と背景画像は、内側のdiv要素に対して設定してあげます。
.mybdr2{
background-image: linear-gradient( -90deg, #0000FF(青) 25%, #ff0000(赤) 25%, #ff0000(赤) 50%, #0000FF(青) 50%, #0000FF(青) 75%, #ff0000(赤) 75%, #ff0000(赤) );
}
.mybdr2 .box_inner{ ←内側のdiv要素
background-color: #333;
color:#ffffff;
}
角丸・影をつける
角丸と影は、単色ボックスと同じです。
斜線枠ボックスエディター
タイトル付き斜線枠ボックスのカスタマイズ
タイトル付き斜線枠ボックスとは、次のように枠が斜線になっているボックスです。
青枠
<div class="box_style box_style_blue">
<div class="box_inner">
<div class="box_style_title"><span>タイトル</span></div>
<p>青枠</p>
</div>
</div>
斜線枠ボックスのHTMLに上のオレンジの部分を追加することで、タイトルをつけることができます。
| 色 | クラス | 色 | クラス | 色 | クラス |
|---|---|---|---|---|---|
|
タイトル
青 |
box_style_blue |
タイトル
緑 |
box_style_green |
タイトル
オレンジ |
box_style_orange |
|
タイトル
赤 |
box_style_red |
タイトル
ピンク |
box_style_pink |
タイトル
黄色 |
box_style_yellow |
|
タイトル
灰色 |
box_style_gray |
タイトル付き斜線枠ボックスは、斜線枠ボックスにタイトルを付加したものなので、前部で7種類です。
カスタマイズは斜線枠ボックスと同じです。
ここでは新たに追加したタイトル部分について、カスタマイズしてみます。
タイトルの表示位置のカスタマイズ
賢威8には文字の表示位置を変更するクラスが用意されています。
| 位置 | クラス | 位置 | クラス | 位置 | クラス |
|---|---|---|---|---|---|
| 左寄せ← | al-l | →中央寄せ← | al-c | →右寄せ | al-c |
<div class="box_style box_style_blue">
<div class="box_inner">
<div class="box_style_title al-r"><span>タイトル</span></div>
<p>青枠</p>
</div>
</div>
タイトル部分にal-rを指定すると、次のように右寄せにできます。
青枠
装飾ボックス全体の文字を右寄せした場合は、一番外側のdiv要素にal-rを指定します。
<div class="box_style box_style_blue al-r">
<div class="box_inner">
<div class="box_style_title "><span>タイトル</span></div>
<p>青枠</p>
</div>
</div>
青枠
自由に位置指定する
次に、タイトルの位置を自由にカスタマイズしてみます。
次のように、装飾枠の外側にタイトルを表示してみましょう。
青枠
<div class="box_style box_style_blue mybdr3">
<div class="box_inner">
<div class="box_style_title"><span>タイトル</span></div>
<p>青枠</p>
</div>
</div>
.mybdr3{
position:relative !important; (1)
}
.mybdr3 .box_style_title{
position:absolute !important; (2)
left:0 !important; (3)
top:-25px !important; (4)
margin:0 !important; (5)
}
.mybdr3 .box_style_title span:before{
display:none; (6)
}
(1) 一番外側のdiv要素にposition:relativeを設定することで、この後position指定した要素が、このdivを基準として配置されます。
(2) タイトルにposition:absoluteを設定することで、(1)を基準として自由に移動できるようになります。
(3) (1)の上端から、上に25px移動します。
(4) (1)の左端から、左に0px移動します。
(5) タイトルに元から設定されていたマージンを打ち消しています。
(6) タイトル下の装飾（ボックスの裏側に折り込んだように見えるもの）を非表示にしています。
タイトルの色を変える
タイトルの文字色や背景色・背景画像をカスタマイズしてみましょう。
青枠
基本は単色ボックスのカスタマイズと同じことを、タイトル内のspan要素に対しておこないます。
<div class="box_style box_style_blue mybdr3">
<div class="box_inner">
※左側の余白をあけるために、p50-lクラスを使用しています。
.mybdr3{
position:relative !important;
}
.mybdr3 .box_style_title{
position:absolute !important;
left:0 !important;
top:-25px !important;
margin:0 !important;
}
.mybdr3 .box_style_title span{
color:#ff80c0; ←タイトルの文字色
background-color:#FFE3E3; ←タイトルの背景色
background-image:url(/wp-content/uploads/harts.png); ←タイトルの文字画像
}
タイトル付き斜線枠ボックスエディター
■Googleで他サイト検索
■僕がおススメするアフィリエイト教材
■マーケティング施策ツール
こんにちは。