賢威8の装飾ボックスの色や形を独自にカスタマイズしてみよう!【簡易エディター付き】

賢威8は、独自の装飾ボックスが用意されていますが、少し色が少ない気がします。

そこで今回は、賢威8の装飾ボックスで好きな色に変更する方法をお伝えします。

準備

最初に、賢威8の装飾ボックスをカスタマイズするために必要な操作を、お伝えします。

必要ないという方は、単色ボックスのカスタマイズから見てください。

htmlの入力方法

今回のカスタマイズは、投稿画面にHTMLを入力します。

GutenbergはカスタムHTMLで。

WordPress Gutenberg HTML切り替え

クラシックエディターは、テキストで入力してください。

WordPress  クラッシックエディター

詳しくは、こちらの記事をご覧ください。

賢威8で用意されているスタイルを実際に適用してWebサイトに表示する方法

賢威8で用意されているスタイルを実際に適用してWebサイトに表示する方法

賢威8にはWebサイトを装飾するスタイルが用意されています。 「スタイルガイド」の記事一覧|賢威8サポートページ (ログインが必要です) 基本的にはコピペをすれば使用できるのですが… Wordpressの初心者は、やり方 […]

続きを読む

余白の指定方法

賢威8で用意されている装飾ボックスは、ボックス内外の余白が設定されていないので個別に指定します。

余白指定例

<div class="bdr p10">p10:内側の余白を10pxにする</div>

詳しくは、こちらの記事をご覧ください。

賢威8の余白(マージン・パディング)指定 PCとスマホで設定を変える

賢威8の余白(マージン・パディング)指定 PCとスマホで設定を変える

賢威8は装飾ボックスがいくつか用意されていますが、枠内や枠外の隙間の広さを変更したいときがあります。 賢威8は、その調整を非常に細かく行えるようなので、ここで紹介しておきます。 枠の外側の余白(マージン)を変更する 賢威 […]

続きを読む

独自スタイルの追加方法

また、独自スタイルの追加を行うことで、色や線種などのカスタマイズをおこないます。
独自スタイルは投稿画面の『この投稿のみに表示するCSS/JS欄』に入力します。

賢威8 この投稿のみに表示するCSS/JS欄

全てのページで適用したい場合は、次の記事を参考にしてください。

賢威8で独自CSS(スタイル)を追加する方法

賢威8で独自CSS(スタイル)を追加する方法

賢威8は専用のスタイルが用意されていて、それを使えことでクオリティの高いサイトを構築できる。 しかしオリジナリティを出したいなら、スタイルを追加する必要があります。 そこで今回は、賢威8に独自にスタイルを追加する方法をお […]

続きを読む

色の指定について

色を指定するのは、ちょっとした知識が必要です。
CSSの色指定がよくわからない方は、こちらをご覧ください。

cssの色指定は難しくない!ざっくり解説します

cssの色指定は難しくない!ざっくり解説します

Webサイトの色は、CSS(スタイル)で指定します。 しかし色の指定方法が独特で、はじめはよくわからないですね。 そこで今回は、CSSでの色指定についてざっくり解説します。 CSSをカラーコードで指定する CSSで色を表 […]

続きを読む

枠線の指定について

枠線は、borderで指定します。

border: 5px(幅) dotted(線種) #DDA0DD(色コード) !important;

幅:単位がpxで、1から増えるごとに太くなります。

線種:線のタイプを指定します。

線種タイプ線種タイプ
none線なしsolid実線
dashed破線dotted点線

線種はもっとあります。

詳しくは、こちらの記事をみてください。

CSSのborderプロパティの使い方 基本から上下左右の見た目を変更まで

CSSのborderプロパティの使い方 基本から上下左右の見た目を変更まで

borderプロパティの基本 borderプロパティは、次のように指定します。 border: 幅 線種 線色; 幅・線種・線色は順不同です。 幅 単位をpxやthin(細い)、medium(普通)、thick(太い)で […]

続きを読む

単色ボックスのカスタマイズ

単色ボックスとは、次のような枠のみのボックスです。

灰色枠
html

<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

これだけあれば十分な気がします…

色だけでなく、幅や線種も変更してみましょう。

枠の色・幅・線種を変更する

まずは枠の色変更です。

次のように色を変えてみましょう。

変更した枠色
html

<div class="bdr mybdr p10">変更した枠色</div>

スタイル

<style>
.mybdr{
border: 5px(幅) dotted(線種) #DDA0DD(色コード) !important;
}
</style>

赤文字のmybdrは、好きな文字に変更してください。
色ごとに名前を変えることで、複数の色を指定できます。
ただし、スタイルは前方に『.(ピリオド)』が付いていることに注意しましょう。

幅は単位がpxで、1から増えるごとに太くなります。
線種は、次の表の文字を使用できます。

色コードは、変更したい色を指定します。

背景色を変更する

次は背景色を変更してみます。

次のように色を変えてみましょう。

変更した枠色

背景色を黒にしたことで、文字が見えなくなったため白色に変更しました。

html

<div class="bdr mybdr p10">変更した枠色</div>

スタイル

<style>
.mybdr{
border: 5px(幅) dotted(線種) #DDA0DD(色コード) !important;
background-color: #333333(色コード) !important; ←背景色を変更
color: #ffffff(色コード) !important; ←文字色を変更
}
</style>

背景画像を表示する

次は背景に画像を表示してみます。

次のように色を変えてみましょう。

●背景色を黒
に設定
●背景を透過させた
png画像を
指定して
背景色と
背景画像を合成
しています

背景画像を表示するには、background-imageを使用します。

html

<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を使用します。

html

<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を使用します。

html

<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>

単色ボックスエディター

今までに紹介した単色ボックスのカスタマイズをおこなえるエディターを作成しました。
各値を変更すると、どのような変化があるか確かめてみてください。

  • 装飾枠
  • テキスト


  • 影の指定 


html
CSS

斜線枠ボックスのカスタマイズ

斜線枠ボックスとは、次のように枠が斜線になっているボックスです。

青枠

html

<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を使用して、斜めの枠線を作成しています。

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の中の、色コードを変更するだけです。

html

<div class="box_style box_style_blue mybdr2">
<div class="box_inner">
<p>青枠</p>
</div>
</div>

CSS

.mybdr2{
background-image: linear-gradient( -90deg, #0000FF(青) 25%, #ff0000(赤) 25%, #ff0000(赤) 50%, #0000FF(青) 50%, #0000FF(青) 75%, #ff0000(赤) 75%, #ff0000(赤) );
}

角度90度。赤と青の縞模様に変更

背景色・背景画像を変更する

背景色と背景画像は、内側のdiv要素に対して設定してあげます。

CSS

.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;
}

角度90度。赤と青の縞模様に変更。内側の背景色を黒に変更。

角丸・影をつける

角丸と影は、単色ボックスと同じです。

斜線枠ボックスエディター

  • 装飾枠
  • テキスト


  • 影の指定 


html
CSS

タイトル付き斜線枠ボックスのカスタマイズ

タイトル付き斜線枠ボックスとは、次のように枠が斜線になっているボックスです。

タイトル

青枠

html

<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
html

<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を指定します。

html

<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>

タイトル

青枠

自由に位置指定する

次に、タイトルの位置を自由にカスタマイズしてみます。

次のように、装飾枠の外側にタイトルを表示してみましょう。

タイトル

青枠

html

<div class="box_style box_style_blue mybdr3">
<div class="box_inner">
<div class="box_style_title"><span>タイトル</span></div>
<p>青枠</p>
</div>
</div>

CSS

.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)を基準として自由に移動できるようになります。

positionとtop,left

(3) (1)の上端から、上に25px移動します。

(4) (1)の左端から、左に0px移動します。

(5) タイトルに元から設定されていたマージンを打ち消しています。

(6) タイトル下の装飾(ボックスの裏側に折り込んだように見えるもの)を非表示にしています。

タイトルの色を変える

タイトルの文字色や背景色・背景画像をカスタマイズしてみましょう。

タイトル

青枠

基本は単色ボックスのカスタマイズと同じことを、タイトル内のspan要素に対しておこないます。

html

<div class="box_style box_style_blue mybdr3">
<div class="box_inner">

※左側の余白をあけるために、p50-lクラスを使用しています。

CSS

.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); ←タイトルの文字画像
}

タイトル付き斜線枠ボックスエディター

  • 装飾ボックス
  • タイトル枠
  • テキスト
  • タイトル


  • 影の指定 




  • 影の指定 


html
CSS