対馬 俊彦
フォーラムへの返信
-
投稿
-
.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色の設定を使っていたとしても、サイト全体として色が統一されるので、いいことはあっても困ることはないと思います。
横からすみません。
当初の通り Outer ブロックに背景画像を設定する前提で、この問題の対策の一例として、画面幅が一定以上になったら Outer ブロックをコンテナの幅に合わせる(全幅→標準にする)やり方が有効かもしれません。
具体的手順としては該当ページの カスタム CSS に以下の行を追加します。
@media (min-width: 1800px) { .vk_outer-width-full { margin-left: 0; margin-right: 0; } .vk_outer-width-full.vk_outer-paddingLR-none { padding-left: 0; padding-right: 0; } }※ 1800px の部分は現物合わせで調整
上記の例では画面幅が 1800px 以上になったら全幅の Outer ブロックを標準幅に切り替えています。
ベクトルさんが修正してくれると思いますが、
いますぐこの問題を回避したい場合は、以下の CSS を追加しておけばよいです。.vk_faq .vk_faq_content-accordion-close { overflow: hidden; }アップデートによる修正後は不要になるので、削除しておいてください。
CSS 追加に関する参考ページ ↓
とりあえず、PC の方だけ参考情報をお知らせします。
いま該当 URL を拝見しました。
私の Windows 10 パソコンではフェード動作しています。以前に同じような現象があり、Windows 10 の設定で
簡単操作 → Windows にアニメーションを表示する
がオフになっているとスライドショーの効果が反映されないことがありました。そのときは DRILL LANCER さんがこの原因を見つけてくれたんですけど…
今回もそれと同じかもしれませんので、パソコンの設定を確認してみてください。
1158まで狭めたところうまく表示されました
攻めますねぇ～。
いま試してみたところ、1158 にすると画面幅 992px ではくずれてしまいます。
原則的には 992 が上限ですが、自己責任でやる場合でも 1100 くらいにしておいた方がよさそうです。全幅でスムーズで理想的だと思って、広げたく思いました
そうなんですか… 意外な動機でしたが、そんなふうに言われるとうれしいです (^^♪
私の G3 勉強用サイトではコンテナサイズを指定していません。(デフォルトのままです)
たぶん https://lightning-g3.hp1.work/ のことですよね。設定値をご教示願えればうれしいです
以下のように設定して使っています。
【トップページ・固定ページ】
Lighting レイアウト設定 → カラム設定 で 1カラム にしてあります。
サイドバーを表示していません。【投稿】
Lighting レイアウト設定 → カラム設定 を 2カラム にして、
個々の投稿で全幅にしたいときに 1カラム (サイドバー要素あり) を指定しています。とりあえず回答としてはこれだけなんですが、他にご質問があればどうぞ。
コンテナ設定はコンテナの最大幅 (max-width) を設定していますが、
lg は画面幅 992px～1199px のことですので、
表示くずれの対策としては、1199px992px を超えない数値を指定するとよいです。【追記・訂正】
DRILL LANCER さんが書かれている通りですので、上記の通り訂正いたします。それぞれの画面幅は以下の通りです。()内はデフォルトのコンテナ設定です。
xs : ～575px (なし)
sm : 576px～767px (540px)
md : 768px～991px (720px)
lg : 992px～1199px (960px)
xl : 1200px～ (1140px)たしかに、Lightning に限らず、最近の WordPress テーマで作ったサイトを 4K ディスプレイのような特に大きな画面で見るとページヘッダーが大きすぎてアンバランスですよね。
私も気になっていましたが、たいていどこのサイトもそうだし、お客様から要望されたこともないので、まぁそんなものか…と思っていました。
とりあえず、以下の CSS を追加すればページヘッダーがコンテナと同じ幅になります。
.siteHeader, .page-header, .breadSection { max-width: 1140px; margin: 0 auto; }ただし、「ひと昔前」感が出てしまいます。(個人的意見？)
以下のようにメディアクエリを使って、フルHD(1920px)くらいまでは全幅で表示するのがよさそうです。
@media (min-width: 2500px) { .siteHeader, .page-header, .breadSection { max-width: 1140px; margin: 0 auto; } }横からすみません。
functions.php に以下のコードを追加すれば、
標準の投稿でページヘッダーとパンくずリストを非表示にする(出力しない)ことができます。// 投稿にページヘッダーを表示しない add_filter( 'lightning_is_page_header', function(){ if ( 'post' === get_post_type() ){ return false; } else { return true; } } ); // 投稿の前のパンくずリストを表示しない add_filter( 'lightning_is_breadcrumb', function(){ if ( 'post' === get_post_type() ){ return false; } else { return true; } } );SEO の観点からパンくずリストはあった方がよさそうですが、
以下のコードを追加して投稿の後にパンくずリストを表示できます。// 投稿の後にパンくずリストを表示する function my_show_breadcrumb(){ if ( 'post' === get_post_type() ){ VK_Breadcrumb::the_breadcrumb(); } }; add_action ( 'lightning_main_section_append', 'my_show_breadcrumb');'post'の部分を書き換えればカスタム投稿タイプでも使えます。ページヘッダーを非表示にすると、投稿のタイトルまで非表示になってしまうので
Lightning ページヘッダー設定 → 投稿 で、表示要素を 投稿タイプ名 にすれば、
ページヘッダーを非表示にしても投稿のタイトルを表示できます。Lightning Pro はカスタマイズ画面でスライドショーを繰り返さないように設定することができませんが、以下のどちらかの方法でご希望の動きにすることはできます。
1. テンプレートファイルに手を加える方法
2. VK Blocks Pro のスライダーに置き換える方法 (こちらがおすすめ)■ ■ ■ 1. テンプレートファイルに手を加える方法 ■ ■ ■
デザインスキン Origin II をお使いの前提で書きます。
このやり方はテーマのアップデートにより問題が起きる可能性があります。
問題が起きた場合は同様の作業をまた行えばよいですが、この将来的なリスクに対応できるか不安であればやめておくのが無難です。親テーマの /wp-content/themes/lightning-pro/template-parts/slide-bs4.php を子テーマの template-parts フォルダーにコピーして、このファイルの23行目を以下のように書き換えます。
子テーマを使っていなければ、直接親テーマのファイルを書き換えればよいですが、バックアップはとっておいた方がいいです。
【変更前】
<div id="top__fullcarousel" data-interval="<?php echo $interval; ?>" class="carousel slide slide-main<?php echo $effect; ?>" data-ride="carousel">【変更後】
<div id="top__fullcarousel" data-interval="<?php echo $interval; ?>" class="carousel slide slide-main<?php echo $effect; ?>" data-ride="carousel" data-wrap="false">【変更点】
オプション data-wrap=”false” を追加している。■ ■ ■ 2. VK Blocks Pro のスライダーに置き換える方法 ■ ■ ■
スライドショーを非表示にして、代わりに VK Blocks Pro のスライダーを置きます。
VK Blocks Pro のスライダーは繰り返しを する・しない の指定ができます。
添付画像をご参照ください。VK Blocks Pro のスライダーの使い方はこちら。
私のサイトでも同じ現象が起きますので、不具合だと思います。
ベクトルさんがアップデートで修正してくれると思いますが、
とりあえず以下の手順で不具合を回避できます。- 標準色の中から文字の色を選ぶ。
- カスタムカラーを指定する。
ご回答、ありがとうございます。
無料版を削除しておきます。
Pale がアップデートされて、ヘッダーの電話番号とお問い合わせボタンの部分のスタイルが以下のように変わっています。
.siteHeader_sub { float: right; display: flex; width: 70%; ※ justify-content: flex-end; ※ }アップデートにより ※ の部分が追加されています。(Pale 7.0.8 のサイトにはこの2行がありません)
以下のどれかひとつを行えば、元通りに横に並んで表示されると思います。
- CSS に
.siteHeader_sub { width: unset; }を追加する。 - CSS に
.siteHeader_sub { width: **%; }を追加する。(** の部分を調整) - ヘッダーロゴ画像を縦横比を変えて作り直す。(幅を小さくする方向で)
ご質問者のサイトの状況が以下の URL に書かれている内容とよく似ています。
【WordPress】ある日突然、ダッシュボードが「403 Forbidden」の対処法⇒.htaccessが改ざんされた可能性あるので修正する
サイトが改ざんされている可能性があるので、上記の URL を参考に確認されるとよいと思います。
下記のトピックを参考にして子テーマを作ってみてください。
スクロールしても、body タグに scrolled header_scrolled というクラスが付与されていません。
この原因を突き止めれば、解決に近づくと思います。
とりあえず、プラグインをひとつずつ無効化して確認してみたらよさそうです。
