【クリエイターモード】テンプレート【BRothers】でスライダーの矢印の色を変える方法を教えてください。 – makeshop よくある質問

＜トップページ＞新商品のスライダーの矢印

新商品のスライダーの矢印の色は、青または黒に変更が可能です。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名：「新商品」　モジュールID：$module.new_item

HTML入力欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に

new-item-yaji

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

<div class="swiper-button-prev new-item-yaji swiper-button-white"></div>
<div class="swiper-button-next new-item-yaji swiper-button-white"></div>

＜青に変更する＞

「swiper-button-white」を削除すると矢印の色は白に変わります。

<div class="swiper-button-prev new-item-yaji"></div>
<div class="swiper-button-next new-item-yaji"></div>

＜黒に変更する＞

「swiper-button-white」を「swiper-button-black」に変更すると矢印の色は黒に変わります。

<div class="swiper-button-prev new-item-yaji swiper-button-black"></div>
<div class="swiper-button-next new-item-yaji swiper-button-black"></div>

＜商品詳細ページ＞サブ画像のスライダーの矢印

商品詳細ページのスライダーの矢印の色は、白または黒に変更が可能です。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

HTML入力欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に

swiper-button

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

＜白に変更する＞

「swiper-button-white」を追記すると矢印の色は白に変わります。

<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>

＜黒に変更する＞

「swiper-button-black」を追記すると矢印の色は黒に変わります。

<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-black"></div>

＜トップページ・商品詳細ページ共通＞画像を使用する方法

ファイルサーバーに矢印用の画像（「<」「>」のような画像）をアップロードし、

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通

「CSS」に、以下のように背景画像を指定するCSSを追記し、保存してください。

.swiper-button-prev {
      background-image: url("「前へ」の矢印用の画像のURL") !important;
  }
.swiper-button-next {
      background-image: url("「次へ」の矢印用の画像のURL") !important;
  }
.swiper-button-next,
.swiper-button-prev {
       width: 〇〇px !important; /* 矢印用の画像の幅 */
       height: 〇〇px !important; /* 矢印用の画像の高さ */
}