WooCommerceのボタンは、問題を解決するために間違った方法のレイアウトの後にボーダーを追加する

WooCommerceでは、ボタンにボーダーを追加すると、レイアウトがずれる問題が発生することがあります。これは通常、CSSボーダーが要素全体のサイズに影響し、レイアウト計算のずれにつながるためです。ここでは、美しく安定したボタンスタイリング効果を簡単に実現するための、具体的な理由と簡単な解決策をご紹介します。

I. 問題のある現象

多くの企業が造園業を営んでいるWooCommerceショップは、CSSの境界線は、ブランドスタイルに沿ったボタンを作るために追加したいが、実際には、多くの場合、ボタンの誤植、サイズの変更や不協和音の問題の全体的なレイアウトに遭遇した。

ボーダー付きのボタンが引き起こすレイアウトの乱れの一般的な症状には、次のようなものがあります：

ボタンの幅と高さを小さく、または大きく変更
ボタン・テキスト・オーバーフロー・コンテナ
ボタンの位置がずれ、ズレが生じる
ボタンのクリックエリアがビジュアルエリアと一致しない

このような問題は、しばしば商品リスト、チェックアウトボタン、ショッピングカートボタンに現れ、以下のようなユーザーエクスペリエンスに深刻な影響を与える。換算率.

問題の原因

1.ボーダーの計算方法によるボタンサイズの変更

CSSでは、要素の幅と高さは、デフォルトではコンテンツボックスに対してのみ計算され、ボーダーとパディングは合計サイズに加算されます。もし ボックスサイジングボーダーを付けるとボタンが膨らみ、レイアウトが崩れます。

2.ボーダー幅がパディング設定と競合する

いくつかのテーマボタンのパディング値は、コンテナを保持するのに十分な値であり、ボーダーを追加すると、親コンテナの幅を超えてしまい、改行されたり、ずれたりします。

3.ボタン幅適応の問題

ボタンの幅がパーセンテージで設定され（画面サイズに合わせて自動的に調整される）、固定ピクセル値のボーダーが追加された場合、異なるデバイスで表示がずれる可能性があります。例えば、携帯電話とパソコンではボタンの位置が異なる場合があります。

III.ソリューション

サインインワードプレスバックエンド 外観 → カスタム

打点 追加CSS(または「追加CSS）

エディットボックスに以下のコードを貼り付ける。

方法1：ボックスサイジングによる計算モデルの統一

すべてのボタンに以下のCSSを追加する：

.woocommerceボタン, .
.woocommerce a.button, .
.woocommerce input.button, .
.woocommerce #respond input#submit { .
    box-sizing: border-box；
}

説明する：
box-sizing: border-box； は、ボーダーとパディングを要素の合計幅と高さの計算に含め、ボーダーを追加した後にボタンのサイズが引き伸ばされるのを防ぎます。

方法2：パディングを調整してボーダー幅をオフセットする

ボタンのサイズを視覚的に一定に保つ必要がある場合は、ボーダーを追加し、それに応じてパディングを減らすことができます：

.woocommerce a.button {
    border: 2px solid #333；
    padding: 8px 14px; /* 10px 16pxでもよかったかもしれません */
}

これにより、ボタンの幅と高さが元のテーマのデザインに近く保たれます。

方法3：ボーダーの代わりにアウトラインを使う

視覚効果のためにアウトラインを使用し、実際のボーダーが必要ない場合は、要素のサイズに影響を与えないストロークのような効果を得るためにアウトラインを使用することができます：

.woocommerce a.button {
    アウトライン: 2px solid #333；
}

注：アウトラインはスペースを取りませんが、ブラウザによっては上位のスタイルとしてレンダリングされ、ホバー・アニメーションに影響を与える場合があります。

方法4：特定のボタンに別々の幅を設定する

明らかに配置がずれているボタンについては、個別に固定幅を設定することで、ボーダーに影響されたレスポンシブなボタンがジャンプするのを防ぐことができます。例

.woocommerce-cart .button {
    width: 100px；
}

方法5：テーマのCSS継承関係をチェックする

一部WooCommerceテーマが採用される重要カスタムCSSが失敗するボタンスタイルを修正しました。この場合、セレクタの優先度を上げるか、コード・ビハインドに重要.

例

.woocommerce a.button {
    border: 2px solid #333 !important；
}

IV.最終テスト

修正が完了したら、以下のシナリオでテストする：

デスクトップ、タブレット、モバイルに対応
様々なページテンプレート（商品リストページ、単品ページ、チェックアウトページ、ショッピングカートページ）
テーマ更新後にカスタマイズを上書きするかどうかカスケーディングスタイルシート

これは以下の方法で可能です。 ブラウザ開発ツール ボタン（計算ボックス）の実際のサイズをチェックし、レイアウトが安定していることを確認する。

はんけつをくだす

WooCommerce ボーダー付きのボタンは、レイアウトのズレを引き起こす。 CSSボックスモデルの計算 テーマのデフォルト設定と矛盾する。これは ボックスサイジングパディングを調整するか、代わりにアウトラインを使用することで、ボタンの位置がずれる問題を効果的に解決し、ウェブサイトのUIを一貫性のある美しいものに保つことができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み