【Snow Monkey】ボタンに矢印をつける（テキスト前・前矢印）カスタマイズ

Snow Monkeyのボタンブロックに、CSSだけで矢印（アロー）を追加できます。

ホバー時に矢印がスライドするアニメーションつきなので、クリックを促す視覚的な誘導にも効果的です。

用途に合わせて使い分けてくださいね。

設定方法は２通りあります。

• 1つのボタンだけ変えたい（CSS使用）→ 個別クラスを追加して指定
• サイト全体のボタンを統一したい → CSSで全体に適用

方法① CSSクラスを追加して個別に指定する

「このボタンだけ矢印をつけたい」という場合にCSSで対応する方法です。

まずCSSを追加し、適用したいボタンにクラスを付与します。

1） ボタンにクラスを付与する

１） 矢印をつけたいボタンブロックを選択

2） 右サイドバーの「ブロック」タブを開く

3） 一番下の「高度な設定」を展開する

4） 「追加CSSクラス」にarrow-btnと入力する

2） CSSを追加する

カスタマイズ → 追加CSS、My Snow MonkeyのCSS設定、子テーマの style.css のいずれかに貼り付けます。

.arrow-btn .smb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arrow-btn .smb-btn__label {
  padding: 0;
}

.arrow-btn .smb-btn::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.6875rem;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: rotate(45deg);
  transition: transform .3s;
}

.arrow-btn .smb-btn:hover::before {
  transform: translateX(3px) rotate(45deg);
}

3） 表示を確認する

設定後、表示を確認して、CSSが反映されていれば完成です。

ホバーしたときに矢印が右にスライドすれば成功です。

方法② CSSで設定する（サイト全体に適用）

サイト全体に適用する場合

サイト内のすべてのボタンをまとめて設定したい場合はCSSで設定します。

.smb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smb-btn__label {
  padding: 0;
}

.smb-btn::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.6875rem;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: rotate(45deg);
  transition: transform .3s;
}

.smb-btn:hover::before {
  transform: translateX(3px) rotate(45deg);
}

カスタマイズ → 追加CSS、My Snow MonkeyのCSS設定、子テーマの style.css のいずれかに貼り付けるだけでOKです。

まとめ

矢印ボタンは、クラスの有無によって適用範囲をコントロールできます。

• 1箇所だけ変えたいなら → クラスを付与して個別適用
• サイト全体を統一したいなら → クラスなしでCSS適用

と使い分けるのがおすすめです。