[ 解決済 ] スマホ版のトップページスライダー画面のボタンを非表示にする方法
[ 解決済 ] スマホ版のトップページスライダー画面のボタンを非表示にする方法
- このトピックには2件の返信、2人の参加者があり、最後に
により3ヶ月、 2週前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.6.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.26.2■ Pro Unit のバージョン
0.26.8■ スキンの種類
Evergreen■ スキンのバージョン
0.2.5■ 期待する動作
PC版のスライダーだとスマホ表示で見づらいので、別途スマホ版のトップページスライダー画面を作り、スマホ版の画像ではトップスライドページネーションを非表示にしたい。■ 自分で試した事
以下2つを試してみましたが、スマホ版の画面でもトップページスライドべネーションの外枠のみ表示されます（添付の1.pngをご参照ください）1）Lightning トップページスライドショの設定を変更（添付の2.png)
ボタンのテキスト（任意）に以下を入力
<div class=”d-none d-md-block”>お問い合わせはこちら</div>
スライタイトル（任意）とスライドテキスト（任意）にも同じコードを記述しておりますが、
こちらはスマホ版では問題なく非表示になります。2）過去記事を参考にして追加CSSを記述（添付の3.png)
@media (max-width: 576px) {
/* モバイル */
.slide-main .swiper-pagination{
display:none;}
}■参考にした過去記事
スマホ版のみトップスライドべネーションを非表示にする方法を知っている方がおりましたら
ご教示いただければ幸いです。■ 症状が発生するブラウザ
Google Chrome■ 実際の症状
別途作ったスマホ版のトップページスライダー画像にトップスライドべネーションの外枠が表示される（添付の1.pngをご参照ください）。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
お世話になっております、該当サイトを確認いたしました。
d-none d-md-blockのクラス名をつけているので、「お問い合わせはこちら」のテキスト部分だけが非表示になっている状態です。リンクの<a>タグに枠線の装飾用のcssがかかっているので、枠だけ見えている状態です。ですので、
<a>タグから非表示にする場合は以下のCSSでいかがでしょうか。/*Lightning トップページスライダー内のボタンを575.98px以下で非表示*/ @media (max-width: 575.98px){ .lightning_swiper .btn.btn-ghost{ display:none; } }参考にしていただいた記事はスライダーのページネーションを非表示にする方法ですので、クラス名が違っています。
クラス名の調べ方は、Google Chromeブラウザの場合は ［検証］でデベロッパーツールが開きますので、そこから調べることができます。（添付画像参照）
ちょっとしたcssの調整などはこちらの記事がわかりやすいですので、ぜひ参考にしてください。
ありがとうございました。
解決しました。
大変助かります。
- このトピックに返信するにはログインが必要です。
