建設(shè)中 ワードプレス ウェブサイトにおいて、ボタンは最も一般的なインタラクション要素のひとつです。デザインの一貫性とメンテナンスの効率を高めるために ブロックの生成 プロ グローバル?スタイル（グローバルスタイル）機(jī)能は、再利用可能で一元管理可能なボタンスタイルのセットを作成するのに役立ちます。

この記事では、ボタンスタイルの作成、最適化、再利用のプロセスを順を追って説明します。

なぜグローバル?スタイルを使うのか？

従來(lái)のボタンのスタイリングは、ページやモジュールごとに手動(dòng)で調(diào)整する必要がありましたが、GenerateBlocks Proは、一度設(shè)定すれば複數(shù)の場(chǎng)所で再利用できるグローバルなスタイリングシステムを提供します。プライマリボタン、セカンダリボタン、リンクボタンのいずれを作成する必要がある場(chǎng)合でも、すべて一元管理され、迅速にメンテナンスすることができます。

次に、最初のボタンスタイル（プライマリ）を作成します。

ステップ1：ボタン要素の追加

• ページや記事の編集
• GenerateBlocks用のボタンブロックを追加する（青いアイコンのボタン要素をクリックする）
• ボタンの設(shè)定 表示 屬性 インラインフレックスエディターでの誤表示を避けるために

ステップ2：グローバルスタイルの作成

• スタイルの作成」をクリックしてください。 btn-プライマリこれにより、他のプラグインと競(jìng)合する確率が低くなります。

• 空白から始める」を選択

ステップ3：スタイル?プロパティの設(shè)定

• 背景色：テーマからダークなブランドカラーを選ぶ

• ボーダー：幅1px、色は背景に合わせる

• 角丸：100px、丸みを帯びた錠剤ボタンの外観を與える。

• 內(nèi)側(cè)の余白：上下1rem、左右2rem
• テキストスタイル：
  • カラー：ホワイト
  • サイズ：1.125rem
  • 単語(yǔ)の重み：500
  • 大文字 (テキスト変換: 大文字)

ステップ4：ホバー効果の設(shè)定

• Hover "タブをクリックして、ホバー狀態(tài)の設(shè)定に入る。
• 背景色：同じ色の薄い色合いに変更する。

• ボーダーの色：視覚的な衝突を避けるため、同期的に明るい色に更新される。

• 影の追加：ボックス?シャドウ?ジェネレーターを使用して生成 カスケーディングスタイルシート シャドーコードとペースト

• トランジションアニメーションを追加：ボタンに0.2秒のトランジションエフェクトを設(shè)定し、ホバー操作をより自然にします。

再利用可能なボックスシャドウ?ツールキットの作成

簡(jiǎn)単に呼び出せるように、影は獨(dú)立したスタイルクラスとして設(shè)定できます。

• 新しいグローバルスタイル シャドウ?プライマリ

• エフェクトの追加 → ボックスシャドウ → ジェネレーターコードの貼り付け

• ボタンにクラス名を追加するだけで、同じシャドウ効果を使うことができます。

ボタンスタイルのバリエーション例

1.セカンダリーボタンスタイル(Secondary)

• 背景を透明に設(shè)定

• 文字色はメイン?ブランド?カラー

• カーソルを合わせると背景色が塗りつぶされ、テキストは白になる。

• 遺伝性 btn-プライマリ ボーダー、角丸、內(nèi)マージンなどの視覚的均一性。

2.リンクボタンのスタイル（リンク）

• ボーダーを透明に設(shè)定

• ホバー時(shí)にボーダーカラーのみが表示され、背景は変更されない。

• 背景色：透明に、ボーダー色：ダークに変更。

• カーソルを合わせると、ボーダーが表示されます。

• ホバリングしていないときの効果

V. スタイルの優(yōu)先順位と順序の説明

ある ブロックの生成 → グローバル?スタイル

• 各スタイルクラスの特定のプロパティと狀態(tài)（デフォルト、ホバー）を表示する機(jī)能

• CSSと同様、後から追加されたクラスは、その前のクラスのスタイルを上書きする。

• クラスの順?lè)膝丧楗氓挨钦{(diào)整でき、スタイルが有効になる優(yōu)先順位をコントロールできる。

VI.一元保守?管理の利點(diǎn)

ボタン?クラスが作成されると、これらのスタイル?クラスはサイト上のどこでも直接使用することができます。一度変更すれば、サイト全體でボタンが同期され、効率と一貫性の向上に役立ちます。

例

• 修正 btn-プライマリ または角を丸くしたボタンと、それを參照するすべてのボタンが自動(dòng)的に同期して調(diào)整されます。
• ホバー効果を更新した後は、設(shè)定を繰り返す必要はありません。

結(jié)語(yǔ)

ブロックの生成 Proのグローバルスタイルシステムは、モジュール化されたボタンデザインを構(gòu)築するのに便利なツールです。メインボタン、シャドウ、ボーダー、カラーなどのプロパティを分割して再利用することで、時(shí)間を節(jié)約し、繰り返し操作を減らすことができます。

もし、GenerateBlockを使って ワードプレス のウェブサイトでは、統(tǒng)一されたスタイルのウェブサイト?コンポーネントを迅速に構(gòu)築するために、グローバル?ボタンのスタイリングを標(biāo)準(zhǔn)的な開(kāi)発プロセスの一部にすることをお?jiǎng)幛幛筏蓼埂?/p>

WordPressを使った効率的なサイト構(gòu)築のチュートリアルやデザイン練習(xí)のコンテンツが満載のPhoton Fluctuationsへようこそ。

最近の更新

お問(wèn)い合わせ
チュートリアルが読めない？無(wú)料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み