[ 解決済 ] Lightning Pro のスライドショーの左右矢印の色・大きさを変える方法

[松尾陽一]

■ WordPress のバージョン
6.0.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.17.3

■ スキンの種類
Origin

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
『lightning トップページスライドショー』を使って自社Webサイトのトップページにスライドショーを実装しています。
現在、特に異状が有るというわけではありません。

しかしながら、何人かの閲覧者の方から
「スライドショーを手動でスライドしようとする時、
左右矢印(あるいは左右の楔形)が見えづらい」という指摘が有りました。

テーマのカスタマイズ項目には、左右矢印(あるいは左右の楔形)の色や大きさを変える項目は見当たりません。

どうにかして、左右矢印(あるいは左右の楔形)をもっと見えやすくしたいです。

■ 自分で試した事
フォーラムで十数分ほど時間をかけて検索してみたかぎりでは、該当する先行事例は見つかりませんでした。

また、ページのソースを見た限りでは、
下記の２要素がそれぞれ左右矢印(あるいは左右の楔形)を表すようですが、
これらを望む形にカスタマイズする方法は、当方にとっては未発見です。

<i class=”icon-prev fa fa-angle-left”></i>

<i class=”icon-next fa fa-angle-right”></i>

■ 症状が発生するブラウザ
Edge, Google Chrome, FireFox, Sagari

■ 実際の症状
「期待する動作」欄で書いた通り、左右矢印(あるいは左右の楔形)をもっと見えやすくする方法が見つからない状態です。

[うなこ]

現在、機能としてはありませんのでCSSでカスタマイズする形になります。
Lightning pro で スキンがOrigin（非推奨）の場合、以下のCSSで矢印が変わると思います。
このCSSを追加CSS、もしくは子テーマのstyle.cssに貼り付けますと、矢印の色が黒になると思います。
文字のサイズも変えれますので、お好みで追記してください。

.carousel-control .icon-next,
.carousel-control .icon-prev{
color:#000;
}

ーーー
CSSのカスタマイズに関しましては、こちらがわかりやすいと思います。
https://training.vektor-inc.co.jp/courses/wordpress-customize/lessons/css-customize/

• この返信は2年、 2ヶ月前にうなこが編集しました。

[松尾陽一]

うなこ 様

お世話になっております。
松尾です。

お教えいただいた方法で、少なくとも色と大きさは変更可能である事を確認できました。
ありがとうございます。

欲を言えば手動スライドのアイコンを楔形から矢印に変えたいのですが、それは必須ではないので、
しばらく自力で試行錯誤してみようと思います。

もしかしたらモデレーターの方以外からの回答をいただけるかもしれないので、
あと１ヶ月ほど回答欄を受付状態にしようと思います。

それ以降になっても、うなこ 様以外の回答が無い場合、本問答を『解決済み』にしようと思います。

[うなこ]

欲を言えば手動スライドのアイコンを楔形から矢印に変えたいのですが、それは必須ではないので、
しばらく自力で試行錯誤してみようと思います。

矢印は一番簡単な方法だと、こんな感じで画像で変更できるかなと思います。

/*スライドショーの矢印 */
.carousel-control-prev-icon {
background-image: url(画像のURL);
}
.carousel-control-next-icon{
background-image: url(画像のURL);
}

もしかしたらモデレーターの方以外からの回答をいただけるかもしれないので、
あと１ヶ月ほど回答欄を受付状態にしようと思います。

ありがとうございます！
ぜひユーザーの方で回答できる方がいましたらよろしくお願いいたします。
ベストアンサーに選ばれますと500ポイント付与されます！

[松尾陽一]

うなこ 様

追加の情報、ありがとうございます。

当方の環境ではこのトピックの問題は解消しており、令和4年10月31日の私の投稿から1ヶ月以上経っている事もあるので、
本トピックを『解決済み』扱いといたします。

[投稿者]

投稿