WordPress ボタンホバー効果を適用する(Gutenberg ボタンブロック) - WordPress 情報パッケージ
인기 WordPress テーマブルフセール 詳細

WordPress ボタンホバー効果を適用する(Gutenberg ボタンブロック)

Last Updated:2022年11月25日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPress ブロックエディタ(Gutenberg エディタ)が提供するボタンブロックを使って WordPressでは簡単にボタンを追加できます。 ただし、残念ながらボタンホバー効果を指定するオプションはありません。 ボタンマウスホバー効果はCSSコードを使用して指定できます。

WordPress ブロックエディタボタンホバー効果

WordPress 基本エディタであるブロックエディタで提供されるボタンブロックで、さまざまな効果のボタンを追加できます。

まだマウスをボタンに置​​いたときに背景色や文字色が変わるようにするホバー効果を指定するオプションはありません。 ボタンホバー効果を適用するには、CSSでホバースタイルを指定できます。

CSSクラスの指定

ボタンのスタイルをカスタマイズしたい場合は、CSSクラスを指定してカスタムCSSコードを追加するだけです。

ボタンブロック属性の 高級 セクションから追加 CSSクラス セクションにCSSクラスを追加できます。

WordPress ブロックエディタボタンブロックにCSSクラスを追加する

CSSスタイルを指定するには ルックス>カスタマイズに移動し、 追加CSS セクションにCSSコードを追加します。

.hover-red .wp-block-button__link:hover {
  // 버튼 호버 스타일
}

ボタンホバースタイルの例

CSSを使用して、ボタンホバースタイルを必要に応じて指定できます。 いくつかの例を見てみましょう。

ボタンテキストの色

マウスホバー時にボタンテキストの色を変更できます。

.change-color-black .wp-block-button__link:hover {
 color: black !important;
}

.change-color-red .wp-block-button__link:hover {
 color: red !important;
}

.change-color-blue .wp-block-button__link:hover {
 color: blue !important;
}

テキスト文字の太さ (font-weight)

マウスをボタンの上に置くと、文字の太さを異なるように設定できます。

.bold-on-hover .wp-block-button__link:hover {
    font-weight: 700 !important;
}

ボタンの背景色

マウスをボタンの上に置くと、ボタンの背景色が異なる色で表示されるようにすることができます。

.hover-background-gold .wp-block-button__link:hover {
    background-color: gold !important;
}

.hover-background-blue .wp-block-button__link:hover {
    background-color: #1e73be !important;
}

.hover-background-red .wp-block-button__link:hover {
    background-color: red !important;
}

ボタンの背景色(グラデーション)

ブロックエディタでは、ボタンの背景色でグラデーションを指定できます。 この場合、ボタンにマウスを置いたときに別のグラデーションの背景に変わるように設定することを検討してください。

グラデーションを指定する場合は、無料のCSS Gradient Generatorを使用してCSSコードを生成するのが便利です。 例: 究極のCSSグラデーションジェネレーター

.gradient-hover-red .wp-block-button__link:hover {
     background: rgb(255,93,177) !important; /* Old browsers */
     background: linear-gradient(to right, rgba(255,93,177,1) 41%,rgba(255,93,177,1) 51%,rgba(247,2,84,1) 100%) !important;
}

.gradient-hover-blue .wp-block-button__link:hover {
    background: rgb(97,167,237) !important; /* Old browsers */
    background: linear-gradient(to right, rgba(97,167,237,1) 0%,rgba(7,122,237,1) 58%) !important; 
}

ボタンサイズ

Scale Transformプロパティを使用して、ホバー時のボタンサイズを拡大または縮小できます。

.grow-on-hover .wp-block-button__link:hover {
    transform: scale(1.05);
}

.shrink-on-hover .wp-block-button__link:hover {
    transform: scale(.95);
}

ボタン枠線

ホバー時ボタンの境界線を追加するか、境界線の色を変更します。 ボーダーラインを追加すると、マウスを上げたときとマウスを上げなかったときにボーダーラインを追加すると、ボタンの位置が移動することがあります。

これを避けるために、非ホバー時状態とホバー時状態で境界線のサイズを同じに設定することを検討してください。 他の方法でボーダーの幅(幅)と高さを調整することも可能ですが、少し面倒です。 マウスを上げていないときに枠線を表示しない場合は、透明色に設定できます。

.add-border .wp-block-button__link:hover {
    border: 2px solid #333;
}

ボタンシェーディング(Box Shadow)

ボタンに影効果を適用することで、訪問者がボタンをクリックする可能性を高めることができます。

.lift-on-hover .wp-block-button__link {
    box-shadow: 0 2px 2px rgb(0,0,0,.15);
}

.lift-on-hover .wp-block-button__link:hover {
    box-shadow: 0 3px 10px rgb(0,0,0,.35);
    transform: translateY(-1px);
}

WordPress用ボタンプラグイン

ボタンプラグインを使用すると、さまざまな効果のボタンを簡単に追加できます。 この機能を提供するボタンプラグインで 最大ボタン数があります。 このプラグインは、 Gutenberg(ブロックエディタ)とクラシックエディタの両方をサポートしています。

WordPress用ボタンプラグイン

このプラグインを使用して、ハーバーのテキストの色、境界線、背景色、色合いを指定できます。

最後に、

以上で WordPress ブロックエディタでボタンにホバー効果を適用する方法について説明しました。 他にもさまざまなスタイルを指定できます。

Newspaper(Newspaper)などの一部のテーマでは、ブロックエディタが提供する基本スタイルに加えて、追加のボタンスタイルを提供することもあります。

ボタンを追加するときは、「/ボタン」を入力して簡単にボタンブロックを選択できます。 他のブロックも同様の方法ですばやく追加できます。 詳しくは「時間と効率を向上させる WordPress Gutenberg キーボードショートカット「を参照してください。

参照



コメントを残す

コメント

カフェで WordPress 情報を共有できます。

ありがとうございます!