ボタン要素

その ボタン要素 は、ウェブサイト上でユーザーに特定のアクションを促すインタラクティブな要素です。ただし、希望するアクションがカートに商品を追加することである場合、 カートボタン要素 を代わりにお使いください。

ボタン要素について

その ボタン要素 別のページに移動したり、ポップアップを開いたり、連絡を取ったりするなど、Web サイト上でユーザーに特定のアクションを実行するよう促すインタラクティブな要素です。

商品をカートに追加したい場合は、 カートボタン要素 を代わりにお使いください。

ページにボタン要素を追加する

ステップ1： アクセス GemPagesダッシュボード > ページをクリックし、対象のページを見つけてエディターを開きます。

ステップ2： 左側のサイドバーの検索バーに「Button」と入力して、Button 要素を見つけます。 

シンボル付きとシンボルなしの 2 つのボタン スタイルから選択し、目的の位置にドラッグ アンド ドロップできます。

要素を選択すると、左側のサイドバーの 設定 の三脚と 高機能 タブをクリックします。

設定タブを構成する

その 設定 タブでは、ボタン要素の外観、レイアウト、動作を完全に制御できます。

サイズ

柔軟な幅と高さのオプションを使用して、ボタンの全体的な寸法を制御します。

幅（Width）: ボタンを水平方向に拡大縮小する方法を選択します。

• コンテンツに適合: ボタンは、そのコンテンツ (テキストとアイコン) のサイズに合わせて調整されます。
• 自動応答オプション: 親コンテナーまたは他のスタイルに基づいてサイズを継承します。
• フル（100％）: ボタンはコンテナーの幅全体を埋めるように拡張されます。

高さ: 高さを「コンテンツに合わせる (自動)」または固定ピクセル値に設定します。

パディング: ボタン内の内部間隔を定義します。

経歴

を設定 単色またはグラデーションカラーの背景 カートに追加ボタンの色を調整できます。

• カラーコードを入力してください
• 色見本をドラッグまたは選択
• カラーピッカーを使用して、現在のページの任意の色を選択します
• 以下から1つ選択してください 最近の色  or あなたにおすすめ lists

もしあなたが 画像の背景新しい画像をアップロードするか、ギャラリーから選択して要素の背景として設定し、画像を構成します。

• スケール： カバー、封じ込め、または自動
• ポジション： 画像の配置を設定する（中央、左上など）
• 繰り返す： 繰り返し設定を切り替える
• 添付ファイル： スクロールまたは固定から選択
• SEO対策： アクセシビリティとSEOのために代替テキストと画像タイトルを追加します
• プリロード： プリロードを切り替えて、Largest Contentful Paint (LCP) を改善します

形状

• ボーダー: 境界線の色、太さ、線を変更できます。
• コーナー: セクションの角は、四角形、丸形、または丸い形にすることができます。また、正確な半径を入力して、要素の角を好みに合わせてカスタマイズすることもできます。
• Shadow: 影を追加し、その表示（サイズ、色、ぼかし、距離）を調整します。

アイコン

このトグルを有効にすると、ボタン内にアイコンが表示されます。

• アイコン: 組み込みアイコンから選択するか、カスタム .SVG アイコンをアップロードします。
• 役職: アイコンを 左 or 右 テキストの。
• ギャップ: スライダーまたは数値入力を使用して、アイコンとテキスト間の間隔を調整します。

テキスト

このセクションでは、ボタン ラベルの書体と外観をカスタマイズできます。

• スタイル： 段落 1、見出し、カスタム テキスト スタイルなどのテキスト プリセットを選択します。
• フォント： ストアのブランドに合わせて、利用可能なフォント ファミリ (Ui-sans-serif など) から選択します。
• サイズ： +/– コントロールを使用してテキスト サイズを調整します。
• フォーマット： 必要に応じて、太字、斜体、下線のスタイルを適用します。
• 色： HEX コードまたはカラー ピッカーを使用してフォントの色を設定します。
• フォントの太さ： 標準、中、半太字、太字などから選択します。
• 行の高さ: テキストの行間の垂直スペースを制御します (例: 160%)。
• 文字間隔： 文字間のスペースを調整します（例：0.6）。
• 変換： テキストの表示方法を選択します。 
  • AA: 大文字
  • Aa: 各単語を大文字にする
  • aa: 小文字
• 影： テキストシャドウを適用して、コントラストや視覚的な深みを追加します。

ホバー効果

ボタンにマウスを置いたときの反応をカスタマイズします。

• 経歴: ホバーすると背景色を変更します。
• 画像: ホバー状態の背景画像を追加します。
• テキストの色: ホバー時のテキストの色を変更します。
• ボーダー: ホバーしたときの境界線のスタイル (色、太さ、ストローク) を追加またはカスタマイズします。
• コーナー: マウスオーバー時に角の半径を調整して、エッジをより丸くしたり、角張らせたりします。
• Shadow: 影の効果を適用して、マウスをホバーしたときにボタンに深みを与えます。

リンク

ボタンをクリック可能な要素にするには、 リンク トグル。有効にすると、ユーザーがボタンをクリックしたときの動作を定義できます。

クリック後: ボタンによって実行されるアクションを選択します。

• ページを開く: ユーザーを特定のページまたは URL にリダイレクトします。
• スクロール: アンカー ID (例: #features) を使用して、同じページ上の特定のセクションまでスムーズにスクロールします。
• ポップアップを開く: GemPages を使用して構築されたポップアップ ウィンドウをトリガーします。
• メールを送ります: 受信者のアドレスが事前に入力された状態でユーザーの電子メール クライアントを開きます。
• 電話をかける: モバイルデバイスで通話を開始するには、 tel： リンクをクリックします。

ページ/リンク：+追加…　 検索バーに直接URLを貼り付けたり検索するためのボタン

• 既存のShopifyページから選択 
• ドロップダウンフィルター（例：「ランディングページ」）を使用して結果を絞り込みます
• 確認する前にページをプレビューするには、「表示」をクリックします

整列

コンテナー内のボタンの水平方向の配置を設定します。 左派, センターまたは 右派.

詳細タブを設定する

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.

よくあるご質問

1. ボタンの色を変更するにはどうすればよいですか?

に行きます 設定タブ > 経歴 > 色圏カラーピッカーを使用するか、HEX コードを入力してボタンの背景色を更新します。

2. ボタンにマウスをホバーしても色が変わらないのはなぜですか?

チェック ホバー効果 設定。ホバー時の背景色またはテキストの色が通常の状態とは異なる値に設定されていることを確認してください。

3. ボタンに単色ではなくグラデーションや背景画像を追加できますか?

はい。 設定タブ > 背景画像をアップロードし、スケール、位置、繰り返しオプションを調整できます。グラデーションの場合は、カスタムCSSを追加できます。 詳細設定タブ.

4. ライブ ページでボタンの新しい色が表示されないのはなぜですか?

必ずクリックしてください パブリッシュ 編集後。問題が解決しない場合は、ブラウザのキャッシュをクリアするか、競合するカスタムコードを無効にしてください。

5. Shopify でボタンを商品カテゴリー (コレクション) に接続するにはどうすればよいですか?

ステップ1： 加える ボタン要素 製品ページ（またはカテゴリ ボタンを表示する任意のページ）に追加します。

ステップ2： に行きます 設定 タブ> リンク > クリック後、を選択します ページを開く.

ステップ3： ページ/リンク フィールドで、次のいずれかを選択します。

• あなたの希望を選択してください コレクション（カテゴリ） Shopifyページリストから、または
• リダイレクト先のコレクション リンクを貼り付けます。

ステップ4： 詳しくはこちら Save の三脚と パブリッシュ あなたの変更。