お世話になります。
Xwrite素晴らしいです！どんどん機能が追加され購入して良かったと思います。
添付画像の通りメインビジュアルのスライダーを使うとパソコン表示では問題ないのですが
スマートフォン表示だと窮屈となり「〇〇〇〇」が重なる場面があります。
スマートフォン表示のスライド画像の高さを確保すればいい話なのですが、
画像に載せたキャッチコピーにこだわりがあるようでして。
◀画像▶のような表示や「〇〇〇〇」を非表示にすることはできますでしょうか。
マニュアルを見たのですが、該当する記載がないようでして。
▼マニュアル（メインビジュアル）
https://xwrite.jp/man_custom_mainvisual/
機能としてない場合、
追加cssなどで非表示にする方法をお知らせいただけると幸いです。
@mail_info さま
返信が遅くなり申し訳ございません。
あいにく標準の機能としては備わっていないのですが、
少しカスタマイズを加えていただくことで、
ご希望通りのスッキリとした見栄えを実現することが可能です！
今回は2つの方法をご用意いたしました。
・【見た目スッキリ】不要な要素だけをサクッと隠す手軽な方法
・【使いやすさUP】見た目を整えつつ、左右ボタンを追加するワンランク上の方法
ご希望の完成イメージやご自身の知識に合わせて、お好きな方をお選びください。
■ 【見た目スッキリ】シンプルに表示を整えたい場合
以下のCSSコードを追加CSSに記述いただくことで、
モバイル表示時のみバレット(丸の部分)を非表示にできます。
「追加CSS」に記述するソースコード（クリックで開きます）
@media (max-width: 992px) {
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
display: none;
}
}
■ 【使いやすさUP】左右のボタンを追加してアプリのような操作感にしたい場合
以下のJavaScriptコードを「カスタマイザー設定 > ヘッダー > headセクション > <body>終了直前に挿入するコード」へご記述いただくことで、モバイル表示時のみバレット(丸の部分)を非表示にしつつ、左右ボタン表示でのスライド切り替えに変更していただけます。
なお、JavaScriptを用いたカスタマイズは、テーマの仕様変更の影響を受けやすく、
今後のアップデートの内容によってはスライダーが動かなくなる等の不具合を引き起こす可能性がございます。
テーマのアップデートを実施された際は、ご自身で動作確認を行っていただく必要がございます点をご留意ください。
万が一、アップデート等で動作に不具合が生じた際は、
追加いただいたこちらのコードを削除していただければ安全に元の状態へ戻りますのでご安心ください。
「終了直前に挿入するコード」に記述するソースコード（クリックで開きます）
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const swiperElement = document.querySelector('.xw-swiper');
if (!swiperElement || !swiperElement.swiper) {
return;
}
const mySwiper = swiperElement.swiper;
// 991px以下かどうかを判定するメディアクエリ
const mql = window.matchMedia('(max-width: 991px)');
// 画面幅に応じて処理を切り替える関数
const handleSwiperUI = (e) => {
if (e.matches) {
// ================================================== // ▼ 991px以下：バレットOFF、矢印ON // ================================================== //
// 1. ページネーションを消す処理
mySwiper.params.pagination.enabled = false;
if (mySwiper.pagination) {
mySwiper.pagination.destroy();
if (mySwiper.pagination.el) {
mySwiper.pagination.el.style.display = 'none';
}
}
// 2. 矢印要素が存在しない場合、JavaScriptで作って追加する
let nextBtn = document.querySelector('.swiper-button-next');
let prevBtn = document.querySelector('.swiper-button-prev');
if (!nextBtn || !prevBtn) {
// 要素を作る
nextBtn = document.createElement('div');
nextBtn.className = 'swiper-button-next';
prevBtn = document.createElement('div');
prevBtn.className = 'swiper-button-prev';
// Swiperコンテナの中に追加する
swiperElement.appendChild(prevBtn);
swiperElement.appendChild(nextBtn);
} else {
// 既に存在していて隠れているなら表示する
nextBtn.style.display = ''; prevBtn.style.display = '';
}
// 3. ナビゲーション機能を再構築・更新する
if (mySwiper.navigation) {
mySwiper.params.navigation.enabled = true;
// 念のため有効化フラグを立てる
mySwiper.navigation.init();
mySwiper.navigation.update();
}
} else {
// ================================================== // ▼ 992px以上：バレットON、矢印OFF（元に戻す処理） // ==================================================
// 1. 矢印を隠して機能を破棄する
const nextBtn = document.querySelector('.swiper-button-next');
const prevBtn = document.querySelector('.swiper-button-prev');
if (nextBtn) nextBtn.style.display = 'none';
if (prevBtn) prevBtn.style.display = 'none';
if (mySwiper.navigation) {
mySwiper.params.navigation.enabled = false;
mySwiper.navigation.destroy();
}
// 2. ページネーションを表示・再構築する
mySwiper.params.pagination.enabled = true;
if (mySwiper.pagination) {
if (mySwiper.pagination.el) {
mySwiper.pagination.el.style.display = '';
// 非表示を解除
}
mySwiper.pagination.init();
mySwiper.pagination.render();
// バレットを描画し直す
mySwiper.pagination.update();
}
}
};
// 画面サイズが変更された時に handleSwiperUI を実行するよう監視
mql.addEventListener('change', handleSwiperUI);
// ページ読み込み時の初回判定として1回実行する
handleSwiperUI(mql);
},
0);
});
</script>
また、こちらの操作ボタン（矢印）を追加された場合は、
「追加CSS」へ下記の記述を併せてご追記いただくことで、矢印のサイズや位置、色などをお好みに調整可能です。
「追加CSS」へ記述するソースコード（クリックで開きます）
/* デフォルトの矢印を非表示にする */
.swiper-navigation-icon{
display:none;
}
/* 疑似要素を追加する */
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* 左側の矢印の色と位置調整 */
.swiper-button-prev::after {
border-right: 25px solid #fff; /* #fffをお好みのカラーコードに変更できます */
border-left: 0;
}
/* 右側の矢印の色と位置調整 */
.swiper-button-next::after {
border-left: 25px solid #fff; /* #fffをお好みのカラーコードに変更できます */
border-right: 0;
}
ご自身のサイトでどのような見栄えや動きになるか、
ぜひ一度テスト感覚でお試しいただけると幸いです！
設定手順などでご不明な点がございましたら、
いつでも当フォーラムまでお気軽にご相談ください。
ありがとうございます！
解消できました！