[ 解決済 ] スライダーブロックの左右送りボタンを任意の画像に差し替えたい

[カク]

■ 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スライダーブロックではどのようにしてボタンの画像を差し替えたら良いのかわかりませんでした。

■ その他特記事項
今後のためにもできればスライダー下部のページネーションのデザインカスタム（長方形を点に変えるなど）もご教授いただきたいです。

[石川＠Vektor,Inc.]

スライダーブロックの標準機能としては変更する機能はありませんので、該当箇所について、CSSで該当の中身の要素を非表示にして、そのエリアの背景画像として指定するのが一番手軽ではないかとは思います。

CSSでのカスタマイズ方法については下記をもとに、非表示にしたい対象セレクタに対して display:none; 指定して、.swiper-button-prev に対して background-image などを指定する感じになるとは思います。

できる！CSSカスタマイズ

ノーコードで概ねウェブサイトが構築出来る時代になったとは言え、私としては業務でウェブサイト制作を請け負う制作者はワンポイントのCSSのカスタマイズあたりまではできるようになるべきだと考えておりますので、まずはご自身でCSSを書いてみてください。
ただ、最初は意図したように表示できない事も多いと思います。その時は自分で書いた内容をこちらに貼り付けていただければ、どこが問題なのかアドバイスなどさせていただきたいと思っていますので、ぜひトライしてみてください。

あるいは、他の人が回答してくれるのを待つか、お急ぎの場合は弊社 テクニカルパートナー への有償依頼などもご検討くださいませ。

[カク]

厳しいお言葉をありがとうございます。
swiper-button-centerのbackgroundをnoneにしてから、swiper-button-prevとswiper-button-nextに画像を指定することで解決しました。
(swiper-button-centerのbackgroundはimportantにしないとうまく消えないようです)

[石川＠Vektor,Inc.]

お世話になっております。ベクトルの石川でございます。

無事出来たようでなによりです！

弊社としても個別のカスタマイズのCSSを毎回提示できると良いのですが、
弊社にしかできない VK Blocks の機能改善などにリソースを回した方が、質問者様含めてユーザー全員に恩恵があるのと、軽微なCSSのカスタマイズはできるだけ多くの制作者様が対応できるようになると、そういった制作者様が制作者じゃないエンドユーザー様のフォーラムサポートも出来るようになり、そうなると弊社スタッフを更に弊社製品の改善にリソースが回せて、その結果制作者ユーザーの方にも恩恵があるといういい流れにできたらいいなと考えております。

また、今まで回答をサポートいただいている制作者ユーザーの方にはテクニカルパートナーという形でより仕事が入るようになればとも考えています。

先に記載の通り、試してみてうまく行かない場合などは該当コードなど記載いただければ出来るだけサポートさせていただきますので、今後とも弊社製品をよろしくお願いいたします。

[投稿者]

投稿