対馬 俊彦
フォーラムへの返信
-
投稿
-
CSS に以下の行を追加すると、PC で表示したときのサイドメニューの階層構造における子ページが表示されているときに、子ページが含まれるサブメニューを開いたままにすることができます。
@media (min-width:1200px) { /* サブメニューを開く */ .vk-menu-acc .current_page_ancestor ul.acc-child-close { max-height: 1000px; opacity: 1; } /* × ボタンを非表示に */ .vk-menu-acc .current_page_ancestor .acc-btn { background: none; } }この場合、開いているサブメニューを閉じる必要はないでしょうから、× ボタンを非表示にして手抜きをしています。
この CSS は 親→子 の階層構造しか考えていません。
親→子→孫 の階層構造の場合、やりたいことによってはもっと複雑な処理が必要かもしれませんので、この CSS をベースに考えてみてください。(そうなったら大変そう…)
参考ページ ↓
Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？
おすすめできるようなものではありませんが、どうしてもやりたい!! という場合の方法を紹介します。
この方法には以下の注意点があります。(やるなら自己責任で)
- 操作に失敗すると、最悪の場合サイトが表示されなくなります。
必ず変更するファイルのバックアップをとってから作業を行ってください。 - テーマがアップデートされるたびに書き換えた部分が上書きされてしまう(たぶん)。
- 違うサイズ(縦横比)のスライド画像に差し替えるときに、また作業を行う必要があります。
■ ■ ■ 作業手順 ■ ■ ■
/wp-content/themes/lightning/_g3/inc/ltg-g3-slider/package/class-ltg-g3-slider.php
の 742行目 あたりを以下のように書き換えます。【変更前】
$slide_html .= '<picture>'; // If Mobile Image exist. if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) { $slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '">'; } $slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img">'; $slide_html .= '</picture>';【変更後】
$slide_html .= '<picture>'; // If Mobile Image exist. if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) { $slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '" width="△" height="△">'; } $slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img" width="○" height="○">'; $slide_html .= '</picture>';○ がスライド画像のサイズ、△ がモバイル用スライド画像のサイズの指定です。
たしかに、SEO会社が言う Core Web Vitals のスコア改善は期待できますが、手間とリスクを考えるとあまりおすすめできるやり方ではありません。その労力を他の部分でサイト改善に回した方がよいと私は思います。
それなら回答しなくていいのに…というご意見もあるかもしれませんが、「この方法しかなさそう」という参考情報として書かせていただきました。ご容赦ください。
5枚に増やすやり方がありましたら教えてください。
子テーマを作って、functions.php に以下の行を追加すれば5枚になります。
function my_lightning_top_slide_count_max() { return 5; } add_filter( 'lightning_top_slide_count_max', 'my_lightning_top_slide_count_max' );【参考 1.】
フィルターフックの名前 lightning_top_slide_count_max が G2 と同じですので、G2 でもこれと同じコードでスライド枚数を設定することができます。【参考 2.】
Lightning でフックを使うやり方について以下のページに書かれていて、カスタマイズにとても役に立ちます。興味があればどうぞ。ご質問者様へ
このフォーラムには以下のルールがあります。
一つの投稿内に複数の質問をしない
どこまで解決済みかわからなくなったり、他の人が検索するときにも探しにくいです。質問の内容毎に別途投稿してください。②また、SEO会社からCore Web Vitals の改善施策として…
を別トピックで投稿していただくのがよいと思います。Outer ブロックに入っている以下のブロックも下余白 margin-bottom を持っています。
- カラム
- 画像
- 段落
それぞれのブロックを margin-bottom :0; にすれば、おそらくご希望のレイアウトに近づくとと思いますが、それだけだとスマホで見たときに残念な結果になってしまう気がしますので、メディアクエリを使う必要がありそうです。
段落はいじらなくてよさそうなので、以下の CSS をベースにやってみてください。
.wp-block-columns { margin-bottom: 0; } .wp-block-image { margin-bottom: 0; }参考ページ ↓
メディアクエリについて書かれている部分は上記ページの「3.7. 画面サイズ毎での指定」です。
添付画像から推測すると、その部分は Outer ブロック内の余白ではなく、段落ブロックの margin-bottom が原因のような気がします。
これがご期待通りの回答でないとすると、可能であれば実際の URL を提示していただければ的確な回答が得られるかもしれません。
.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 のスライダーの使い方はこちら。
- 操作に失敗すると、最悪の場合サイトが表示されなくなります。
