ただいまの人気記事はこれ!TOP15を公開中

【Cocoon】ボックス(白抜き)の枠の色や太さを変えるカスタマイズ

Cocoon

WordPressテーマ「Cocoon」では、ビジュアルエディタの『スタイル』から『ボックス(白抜き)』を選択すると、囲み枠を入れることができます。

Cocoon デフォルトのボックス(白抜き)

・・・が、初期設定のままだと、枠線が太く感じられたり、色が強いと感じたりすることがあります

そこで今回は、Cocoonの「ボックス(白抜き)」の線の色や太さを変えるカスタマイズをお届けします。このカスタマイズをすると、枠を好きな色や太さにできますよ。

ちなみに私はこんな感じにカスタマイズしています。

Cocoon 囲み枠の色を変えるカスタマイズ

どなたでも簡単にできますので、よかったら参考にしてみて下さい。

カスタマイズのやり方

今回紹介するカスタマイズは、どれもコピペでできます。

やり方はかんたん!紹介するコードをコピーして、Cocoonの子テーマの「style.css」に貼りつけるだけです。

貼り付けるのはここ

Cocoonのカスタマイズ用コードを貼る場所

すでに何らかのコードを書いている場合は、その後ろに今回のコードを貼ればOKです。

ボックス(白抜き)の枠線の色を変える

まずは、「ボックス(白抜き)」の枠線の色を変えるカスタマイズです。

『border-color:』の後ろにある『#○○○○○○』を変えると、枠を好きな色に変更できます。色は、WEB色見本を参考にすると便利です。

/*---------------------------------
ボックス(白抜き)の枠の色を変える
--------------------------------*/
.blank-box {border-color: #CCCCCC;} /* 灰色 */

.blank-box.bb-yellow {border-color: #FAB162;} /* 黄色 */

.blank-box.bb-red {border-color: #FD8FA3;} /* 赤色 */

.blank-box.bb-blue {border-color: #5FB3F5;} /* 青色 */

.blank-box.bb-green {border-color: #95CE4B;} /* 緑色 */

上のコードを使うと、次のような色になります。

Cocoon ボックス(白抜き)の囲み枠の色を変える

ご自身のサイトデザインに合わせて、お好きな色に変えてみてください。

ボックス(白抜き)の枠線の太さを変える

つづいて、「ボックス(白抜き)」の枠線の太さを変えるカスタマイズです。

枠線の太さのみを変える

ボックス(白抜き)の枠線の太さは、次のコードをコピペすると変えられます。

/*---------------------------------
ボックス(白抜き)の枠の太さを変える
--------------------------------*/
.blank-box {border-width: 2px;}

これで、すべてのボックス(白抜き)の枠線が細くなります。太くしたい時は、『○px』の部分の数字を大きします。

枠線の色と太さを変える

枠線の太さを変えるコードは、色を変えるコードと組み合わせることもできます。

/*---------------------------------
ボックス(白抜き)の枠の色と太さを変える
--------------------------------*/
.blank-box {border-width: 2px; border-color: #CCCCCC;} /* 枠の太さと灰色の変更 */

.blank-box.bb-yellow {border-color: #FAB162;} /* 黄色 */

.blank-box.bb-red {border-color: #FD8FA3;} /* 赤色 */

.blank-box.bb-blue {border-color: #5FB3F5;} /* 青色 */

.blank-box.bb-green {border-color: #95CE4B;} /* 緑色 */

Cocoonは『灰色』でデフォルトの枠の太さを設定しているので、『灰色』の太さを決めると、他の枠も同じ太さになります

上記コードを使うと、次のようになります。

Cocoon ボックス(白抜き)の囲み枠の色と太さを変える

枠線の太さを個別で変える

枠線の太さを個別で変えることもできます。

/*---------------------------------
ボックス(白抜き)の枠の太さを個別で変える
--------------------------------*/
.blank-box {border-width: 2px; border-color: #CCCCCC;} /* 灰色 */

.blank-box.bb-yellow {border-width: 4px; border-color: #FAB162;} /* 黄色 */

.blank-box.bb-red {border-width: 6px; border-color: #FD8FA3;} /* 赤色 */

.blank-box.bb-blue {border-width: 3px; border-color: #5FB3F5;} /* 青色 */

.blank-box.bb-green {border-width: 2.5px; border-color: #95CE4B;} /* 緑色 */

『border-width: ○px;』を使って、個別で指定するだけですね。

ちなみに、『border-width: ○px;』をつけない場合は、デフォルトの太さ(『灰色』で指定した太さ)になります。

上記コードを使うと、次のようになります。

Cocoon ボックス(白抜き)の囲み枠の太さを個別で変える

まとめ

今回は、Cocoonのボックス(白抜き)の線の色や太さを変えるカスタマイズをお届けしました。

ボックス(白抜き)はとても便利で、私もよく使っています。私の場合はサイトのデザインにあわせて、色を明るめにして線を細めにしたものを使っています。

少しアレンジするだけでも、サイトの雰囲気が大きく変わります。よかったら参考にしてみてくださいね。

スポンサーリンク
Cocoon
ゆずゆをフォローする
この記事を書いた人
ゆずゆ

読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。

ゆずゆをフォローする
ゆずゆろぐ。