[ 解決済 ] 枠線ボックスの背景と枠線の色指定につきまして

[avusblue]

WordPress 5.4.2
Lightning Pro バージョン: 5.2.1

添付画像のように、
枠線ボックスをOuterの上に乗せたいのですが、
枠線ボックスの背景が透明なため、コンテンツ部分が抜けてしまいます。
枠線ボックスの背景の色指定機能を、ご検討頂けないでしょうか。

また、
枠線の色をプルダウン以外の任意の色に指定したい部分がございます。
枠線の色の任意指定機能を、ご検討頂けないでしょうか。

よろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[うなこ]

枠線ブロックは最初、背景を白でリリースしていましたが、デザインスキンのJPNSTYLEをデモサイトのように使用した時に背景白ですと、白い部分が浮いてしまうため、透明にしたという背景があります。
デザイン要素サンプル（VK Blocks Pro）

しかし添付していただいた画像のような使われ方も、たしかにありますね。。。

以下のcssを追加で「直線 ピン角 タブ」「直線 角丸 タブ」「直線 ピン角 バナー」の
枠線ブロックの背景は白になりますので、よろしければご利用ください。

.vk_borderBox .vk_borderBox_body {
    background-color: #fff;
}

[avusblue]

unakoさん、返信ありがとうございます。

枠線ブロックは最初、背景を白でリリースしていましたが、デザインスキンのJPNSTYLEをデモサイトのように使用した時に背景白ですと、白い部分が浮いてしまうため、透明にしたという背景があります。

↑こういった経緯があったのですね。

cssの例もありがとうございます。
こちらのcssにて、個別に白背景をつけられることは理解できているのですが、
デザイナーではないクライアントさんが編集を行うときに、都度の対応が難しいと思い、
プラグインの機能追加の要望とさせて頂きました。

• この返信は4年、 4ヶ月前にavusblueが編集しました。

[avusblue]

枠線ボックスの背景色指定（白・透過）につきまして、
VK Blocks 0.38.0にて、ご対応頂きました。

VK Blocks 0.38.0で枠線ボックスブロックに背景塗り機能が追加されました

ありがとうございます。

[gundam]

解決済みにはなっていますが、
枠線の色をプルダウン以外の任意の色に指定したい部分がございます。
枠線の色の任意指定機能を、ご検討頂けないでしょうか。

こちらの枠線色に関しては、カスタマイズで好きな色に変えられないでしょうか？
また、色を変える場合は
どうすれば良いのでしょうか？

[gundam]

.vk_borderBox .vk_borderBox_body {

}

.vk_borderBox_title_container{

}

こちらで、!important;をつけることで無事希望通りできました。
ありがとうございます。

[対馬 俊彦]

.vk_borderBox .vk_borderBox_body {

}

.vk_borderBox_title_container{

}

私もこの方法をやってみましたが、枠線ボックスのすべてのスタイルでOKなようにするのは手間がかかりますね。

代わりに、確実でかんたんなやり方を見つけましたので、紹介します。

プラグイン側でこの5色の設定は以下のように CSS 変数で定義されています。

:root {
--vk-color-border-red: #dc3545;
--vk-color-background-red: #dc3545;
--vk-color-border-orange: #ffa536;
--vk-color-background-orange: #ffa536;
--vk-color-border-blue: #4267b2;
--vk-color-background-blue: #4267b2;
--vk-color-border-green: #28a745;
--vk-color-background-green: #28a745;
--vk-color-border-black: #222;
--vk-color-background-black: #222;
}

名前でわかる通り、ひとつの色について設定が2行あります。

上記の行を自分の CSS に追加して、カラーコードを書き換えるだけなので、かんたんでした。

紫色や茶色など、5色以外の色を使いたいときは、違和感がありますが、便宜的に以下のように運用するのが楽だと思います。

• 赤 を 紫 として使う
• 緑 を 茶 として使う

ベクトルさんのテーマやプラグインって、勉強すればするほど「カスタマイズしやすいなぁ…」とありがたく思います。

　

ちょっと気になったのが…

Q. この5色って、枠線ボックス以外のブロックとかでも使っているの？

CSS 変数の名前からすると、そうかもしれません。確認していません。

もしかしたら、これから追加されるブロックで使われるかもしれません。

もし他の VK ブロックでこの5色の設定を使っていたとしても、サイト全体として色が統一されるので、いいことはあっても困ることはないと思います。

[投稿者]

投稿