■ WordPress のバージョン
6.7.2
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
X-T9
■ テーマのバージョン
1.30.0
■ プラグインの種類・バージョン
Advanced Custom Fields バージョン 6.3.12
All In One WP Security バージョン 5.3.8
All-in-One WP Migration バージョン 7.89
All-in-One WP Migration Unlimited Extension バージョン 2.65
Category Order and Taxonomy Terms Order バージョン 1.8.7
Contact Form 7 バージョン 6.0.4
Duplicate Page バージョン 4.5.4
Simple Lightbox バージョン 2.9.3
Simple Page Ordering バージョン 2.7.2
VK All in One Expansion Unit バージョン 9.104.0.1
VK Block Patterns バージョン 1.33.0.1
VK Blocks Pro バージョン 1.96.2.0
VK Dynamic If Block バージョン 0.8.1
VK Link Target Controller バージョン 1.7.7.0
WP Multibyte Patch バージョン 2.9
メンテナンス バージョン 4.17
■ 期待する動作
トップ画面をスマホで参照した場合、スライドショー画像の全体が縮小されて表示されること。
※Lightningではデフォルトでこのような仕様になっていました。
■ 自分で試した事
・マニュアル(いちばんやさしいWordPressの教本)や、ベクトレ、フォーラム内を検索して該当する内容を探したがみつからなかった。
■ 症状が発生するブラウザ
Chrome
■ 実際の症状
トップ画面をスマホで参照した場合、スライドショー画像の中央のみがトリミングされて表示されてしまう。
※Lightningと同じ設定にする方法を知りたい。
(T 様(お名前を出してよいのかわからないのでイニシャルで失礼致します。))
大変ありがとうございます。その部分にはついては改善しました。大変ありがとうございます。
T様も含めておわかりになる方がいらっしゃったら、もう少し、質問をおお願いできませんでしょうか?
画像1のようにheaderについては、メニューの前面に白い「site.header」
があり、これを管理画面から出ないようにするにはどうしたらよいでしょうか?
画像2のようにfooterの裏側でフェイドするようなスライダー画像がfooterの高さを合わずに表示されてしまいます。
これを出さないようにするなど、サンプルと同じようにするにはどうしたら良いでしょうか?
よろしくお願いいたします。
Attachments:
You must be
logged in to view attached files.
「スライダー」ブロック (一番外側=親ブロック) を選択した状態で右側の「設定」に表示される「カスタムCSS」に
transition: transform 6.7s ease-in-out; /* スムーズなアニメーションのためのトランジション */
とあります。
この「6.7s」の数字で調整してみてください。
Attachments:
You must be
logged in to view attached files.
■ WordPress のバージョン
6.7.1
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
15.29.0
■ Pro Unit のバージョン
1.32.4.0
■ スキンの種類
Evergreen
■ スキンのバージョン
0.2.6
■ 期待する動作
VK Patternsの「背景画像がズームインするスライダー」のズームインする時間(秒数)を遅くしたい。
■ 自分で試した事
スライダーの表示時間および切り替え時間の数値を変更してみましたが、変わらない様に思います。
■ 症状が発生するブラウザ
chrome
■ 実際の症状
変わらない
■ その他特記事項
スライダーのカスタムCSSはそのまま利用して修正はしていません。
スライダーブロックの標準機能としては変更する機能はありませんので、該当箇所について、CSSで該当の中身の要素を非表示にして、そのエリアの背景画像として指定するのが一番手軽ではないかとは思います。
CSSでのカスタマイズ方法については下記をもとに、非表示にしたい対象セレクタに対して display:none; 指定して、.swiper-button-prev に対して background-image などを指定する感じになるとは思います。
できる!CSSカスタマイズ
ノーコードで概ねウェブサイトが構築出来る時代になったとは言え、私としては業務でウェブサイト制作を請け負う制作者はワンポイントのCSSのカスタマイズあたりまではできるようになるべきだと考えておりますので、まずはご自身でCSSを書いてみてください。
ただ、最初は意図したように表示できない事も多いと思います。その時は自分で書いた内容をこちらに貼り付けていただければ、どこが問題なのかアドバイスなどさせていただきたいと思っていますので、ぜひトライしてみてください。
あるいは、他の人が回答してくれるのを待つか、お急ぎの場合は弊社 テクニカルパートナー への有償依頼などもご検討くださいませ。
■ WordPress のバージョン
WordPress 6.7.1
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
15.28.2
■ Pro Unit のバージョン
0.28.0
■ スキンの種類
Origin III
■ プラグインの種類・バージョン
VK Blocks Pro バージョン 1.92.1.0
■ 期待する動作
スライダーブロックの左右送りのボタン「<」「>」を自分で用意した画像に差し替えたいです。

画像は自分で所有するサイトの画像です。
■ 自分で試した事
ネットやフォーラムを検索して差し替えの方法を調べましたが出てきませんでした。
■ 症状が発生するブラウザ
Safari(iPad),Google Chrome(Windows)
■ 実際の症状
静的HTMLサイトをWordPressに移行するにあたり、スライダーの左右のボタンに使われていたボタンの画像を渡されたのですが、VKスライダーブロックではどのようにしてボタンの画像を差し替えたら良いのかわかりませんでした。
■ その他特記事項
今後のためにもできればスライダー下部のページネーションのデザインカスタム(長方形を点に変えるなど)もご教授いただきたいです。
お世話になっております。対馬さんの方法で解決したようでなによりです。
もしよろしければ対馬さんのコメントにベストアンサーをつけていただけますと幸いです。
また、貴重なご意見ありがとうございます。今回の頂戴致しましたご意見は社内で検討させていただきます。
※可能な限り検討させていただきたく思いますが、検討し実装して初めて分かることもあるため、実装することが難しい場合もございます。
なお、ご存知でしたら申し訳ありませんが、現在スライダーブロックでは縦積みだけでなくフロントエンドでの表示のようにプレビューできるモードもございます。こちら、今後のご参考にしていただけたら幸いです。
VK Blocks 1.69.0 でスライダーブロックに編集モードを追加しました
よろしくお願いいたします。
対馬 様
ご指導いただいたCSSで無事、全画面表示が出来ました。
有難うございました。
松田 様
ご指導有難うございます。
スライダーブロックの存在は知っております。
これは好みの問題になってしまうかと思うのですが、現在のスライダーブロックは、設定した画像が枚数分、縦に並んで表示されるのですが、これがどうにも馴染めずにおります。
特にトップページに表示するスライダーに関しては、カスタマイズから管理できる既存のトップページスライドショーの方が使い勝手が良く感じます。PCとスマホで異なった画像を設定する場合も楽ですし。全画面表示がボタン一発で可能になったらかなり使い勝手が良くなると思いました。
御意見まで。
日頃よりLightningのご利用ありがとうございます。
ベクトルスタッフの松田です。
トップページスライドショーでは、スライドの高さは画像の高さに依存する仕様となっております。
そのため、柔軟なレイアウトをご希望の場合はトップページスライドショーではなく、スライダーブロックを使用されることをおすすめいたします。
Lightning のトップページスライドショーを VK Blocks のスライダーブロックでカスタマイズする
例えば https://patterns.vektor-inc.co.jp/vk-patterns/hero-area-default-slider/
をコピペし、スライダーをクリックすると右パネルに「高さ」という項目がありますので、それぞれのデバイスの高さ設定を100vhなどにしてみてください。フロントエンド上でご希望の状態になるかと思われます。
なお、トップページ用にスライダーブロックを使用する場合は、外観 > カスタマイズ > Lightning トップページスライドショー では「スライドを非表示にする」の設定にしてください。
また、上記の他にも様々なスライダーのパターンブロックがありますのでよろしければ見ていただけたらもっとご希望のものに近いものがあるかもしれません。
https://patterns.vektor-inc.co.jp/?post_type=vk-patterns&pattern-category=slider&s=&supported-themes_operator=or&license-classification_operator=or&pattern-type_operator=or&pattern-industry_operator=or&pattern-category_operator=and&pattern-product_operator=or&demo-site_operator=or&vkfs_form_id=11755
どうぞよろしくお願いいたします。
Attachments:
You must be
logged in to view attached files.
日頃よりご利用いただきありがとうございます。
現象を確認できました。本件について調査しますので今しばらくお待ちくださいませ。
https://github.com/vektor-inc/vk-blocks-pro/issues/2279
なお、スライダーブロックのカスタムCSSで以下を入力すると本件の現象は直ると思われますのでお試しくださいませ。
selector {
width: 100%;
}
よろしくお願いいたします。
■ WordPress のバージョン
6.6.2
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
15.27.0
■ Pro Unit のバージョン
0.28.0
■ スキンの種類
Origin III
■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。
■ プラグインの種類・バージョン
ここ最近までは、問題なく表示されていたのですが、気がついたら、スライダーの表示がされなくなりました。
1、編集モードでプレビュー(スライド)この状態だと真っ黒になる。
ちなみに、いつも編集縦配置です。それで編集画面上では、なんの問題もなくいつも通りの表示です。
ページの表示状態では、このプレビュー(スライド)のように真っ黒になる。
2、スクショを添付させていただきましたが、複数のスライダーアイテムで今まで問題なかったのですが、表示がされません。それで、二つ目、3つ目、表示を非表示に設定したところ、画面上では、一つ目が表示され、表示崩れとかはありません。もちろん、一つなので、スライドはされませんけど。
■ 期待する動作
以前のようにきちんと表示させたい。
■ 自分で試した事
表示、非表示設定の切り替え。
■ 症状が発生するブラウザ
safari、クローム
■ 実際の症状
スライダーが複数表示されると、表示されない。
Attachments:
You must be
logged in to view attached files.
chromeの開発者ツールで確認すると追加したCSSは取り消し線になっていて、元のCSSが有効になっています。
該当URLは確認できませんでしたが、CSSの指定を強くすると反映されると思います。
例えば以下のような形です
.lightning_swiper .mini-content-container-1 .btn {
border-color: #ffffff;
background-color: #060c2d;
}
CSSにつきましてはこちらに詳しく載っていますので、ご確認ください。
できる!CSSカスタマイズ
もしくは、Lightning トップページスライドショーは非表示にして、VK Blocks のスライダーを使用すると自由にボタンの色などを変更しやすいです。
※【外観】>【カスタマイズ】> Lightning トップページスライドショー の 表示設定:スライドを非表示にする で非表示にできます。
スライダー
この度はVKパターンライブラリをご利用いただきありがとうございます。
おそらくですが、スライダーアイテムブロックの中のグループブロックを複製してしまっているかもしれません。
リストビューで スライダーアイテム を選択しているかご確認いただけたらと思います。
リストビューの確認方法について、以下をご参照くださいませ。
リストビューでまるわかり -WordPressのブロックエディター
■ WordPress のバージョン
6.6.2
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
バージョン: 15.26.4
■ Pro Unit のバージョン
0.27.1
■ スキンの種類
Origin
■ 期待する動作
ピックアップ導入事例 スライダーのスライダーをデフォルトの3枚から4枚に増やしたいと思います。
■ 自分で試した事
スライド1のブロックをコピペしてもうまく機能しない
■ 症状が発生するブラウザ
safari
■ 実際の症状
スライド1のブロックをコピペしてもスライドは4枚にならない
■ その他特記事項
特になし
お世話になっております、VKパターンライブラリのご利用ありがとうございます。
VK スライダーブロックの カスタムCSS に以下を追加していただけますと、投稿リストの日付が白色になります。
/*投稿リストの日付*/
selector .vk_posts-layout-postListText .postListText_date{
color:#fff;
}
もしくは、
VK パターンライブラリの「LP_求人_建築_カスタムCSSあり」のお知らせスライダー部分を、WordPressコア側のブロックのクエリーブロックで組み直しましたので(こちらの方が色など個別で指定できるため)、再度コピーしてご利用ください。
※ 元々は VK 投稿リストブロックを使用しておりましたが、テキストのカラーなどの個別の設定がCSSを追記しないとできないため、コア側のブロックで組み直しました。
よろしくお願いいたします。