WordPress ボタンスタイルの例（+CSSと適用方法）

Last Updated: 2025 年 06 月 02 日 댓글
無料電子ブック AdSense ウェビナー

WordPress ブロックエディタを使用している場合は、基本的なボタンブロック機能でクールなボタンを作成できます。

💡WordPress ブロックエディタボタンの作成

この記事では、ブロックエディタで次のスタイルでボタンを作成する方法について説明します。

WordPress ボタンスタイルの例

WordPress ボタンスタイルの例

ボタンスタイルに関連するコードを追加する（一度だけ作業）

まずボタン関連 CSS コードを追加する必要があります。これは一度だけ行うことができます。 2つのオプションがあります。 1つはクラスを1つだけ追加するとボタンスタイルが変わるようにすること、もう1つは共通クラスを指定してCSSコードを効率的にしましたが、2つのクラスを追加する方法があります。

ここでは、共通クラスを指定せずに1つのCSSクラスを指定するコードを紹介します。この方法を使用すると、コードの長さは少し長くなりますが、ユーザーがブロックエディタで1つのCSSクラスを指定するだけで済みます。

1つのCSSクラス指定（custom-btn未使用）

次のようなコードを チャイルドテーマのスタイルシートファイル（style.css）またはウォードプレスマネージャーページ » 外観 » カスタム » 追加 CSSに追加します。

/* 버튼 스타일 */
.blueBtn.wp-block-buttons > .wp-block-button,
.greenBtn.wp-block-buttons > .wp-block-button,
.redBtn.wp-block-buttons > .wp-block-button,
.orangeBtn.wp-block-buttons > .wp-block-button,
.purpleBtn.wp-block-buttons > .wp-block-button,
.tealBtn.wp-block-buttons > .wp-block-button,
.pinkBtn.wp-block-buttons > .wp-block-button,
.yellowBtn.wp-block-buttons > .wp-block-button,
.cyanBtn.wp-block-buttons > .wp-block-button,
.emeraldBtn.wp-block-buttons > .wp-block-button,
.indigoBtn.wp-block-buttons > .wp-block-button {
    width: 85% !important;
    margin: 0 auto !important;
}

.blueBtn .wp-block-button__link,
.greenBtn .wp-block-button__link,
.redBtn .wp-block-button__link,
.orangeBtn .wp-block-button__link,
.purpleBtn .wp-block-button__link,
.tealBtn .wp-block-button__link,
.pinkBtn .wp-block-button__link,
.yellowBtn .wp-block-button__link,
.cyanBtn .wp-block-button__link,
.emeraldBtn .wp-block-button__link,
.indigoBtn .wp-block-button__link {
    display: block !important;
    padding: 18px 30px !important;
    font-size: 18px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
    animation: pulse 2s infinite !important;
    box-sizing: border-box !important;
}

/* 개별 버튼 색상 */
.blueBtn .wp-block-button__link {
    background-color: #0059a6 !important;
    box-shadow: 0 0 20px rgba(17, 75, 134, 0.5) !important;
}
.blueBtn .wp-block-button__link:hover {
    background-color: #003f7f !important;
    box-shadow: 0 0 25px rgba(0, 84, 164, 0.7) !important;
}

.greenBtn .wp-block-button__link {
    background-color: #037631 !important;
    box-shadow: 0 0 20px rgba(0, 178, 47, 0.5) !important;
}
.greenBtn .wp-block-button__link:hover {
    background-color: #025a27 !important;
    box-shadow: 0 0 25px rgba(0, 178, 47, 0.7) !important;
}

.redBtn .wp-block-button__link {
    background-color: #ce1300 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5) !important;
}
.redBtn .wp-block-button__link:hover {
    background-color: #a81000 !important;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.7) !important;
}

.orangeBtn .wp-block-button__link {
    background-color: #f28c38 !important;
    box-shadow: 0 0 20px rgba(242, 140, 56, 0.5) !important;
}
.orangeBtn .wp-block-button__link:hover {
    background-color: #d97420 !important;
    box-shadow: 0 0 25px rgba(242, 140, 56, 0.7) !important;
}

.purpleBtn .wp-block-button__link {
    background-color: #6a1b9a !important;
    box-shadow: 0 0 20px rgba(106, 27, 154, 0.5) !important;
}
.purpleBtn .wp-block-button__link:hover {
    background-color: #4e1380 !important;
    box-shadow: 0 0 25px rgba(106, 27, 154, 0.7) !important;
}

.tealBtn .wp-block-button__link {
    background-color: #00897b !important;
    box-shadow: 0 0 20px rgba(0, 137, 123, 0.5) !important;
}
.tealBtn .wp-block-button__link:hover {
    background-color: #00695c !important;
    box-shadow: 0 0 25px rgba(0, 137, 123, 0.7) !important;
}

.pinkBtn .wp-block-button__link {
    background-color: #e91e63 !important;
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.5) !important;
}
.pinkBtn .wp-block-button__link:hover {
    background-color: #c2185b !important;
    box-shadow: 0 0 25px rgba(233, 30, 99, 0.7) !important;
}

.yellowBtn .wp-block-button__link {
    background-color: #fbc02d !important;
    box-shadow: 0 0 20px rgba(251, 192, 45, 0.5) !important;
}
.yellowBtn .wp-block-button__link:hover {
    background-color: #e8a900 !important;
    box-shadow: 0 0 25px rgba(251, 192, 45, 0.7) !important;
}

.cyanBtn .wp-block-button__link {
    background-color: #00bcd4 !important;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.5) !important;
}
.cyanBtn .wp-block-button__link:hover {
    background-color: #0097a7 !important;
    box-shadow: 0 0 25px rgba(0, 188, 212, 0.7) !important;
}

.emeraldBtn .wp-block-button__link {
    background-color: #2ecc71 !important;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.5) !important;
}
.emeraldBtn .wp-block-button__link:hover {
    background-color: #25a25a !important;
    box-shadow: 0 0 25px rgba(46, 204, 113, 0.7) !important;
}

.indigoBtn .wp-block-button__link {
    background-color: #3f51b5 !important;
    box-shadow: 0 0 20px rgba(63, 81, 181, 0.5) !important;
}
.indigoBtn .wp-block-button__link:hover {
    background-color: #2e3b8e !important;
    box-shadow: 0 0 25px rgba(63, 81, 181, 0.7) !important;
}

/* 호버 공통 스타일 */
.blueBtn .wp-block-button__link:hover,
.greenBtn .wp-block-button__link:hover,
.redBtn .wp-block-button__link:hover,
.orangeBtn .wp-block-button__link:hover,
.purpleBtn .wp-block-button__link:hover,
.tealBtn .wp-block-button__link:hover,
.pinkBtn .wp-block-button__link:hover,
.yellowBtn .wp-block-button__link:hover,
.cyanBtn .wp-block-button__link:hover,
.emeraldBtn .wp-block-button__link:hover,
.indigoBtn .wp-block-button__link:hover {
    transform: scale(1.03);
    color: #fff !important;
}

/* 펄스 애니메이션 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

pulse アニメーションは GPU アクセラレーションを使用するため、パフォーマンスの負荷が低くなりますが、多くのボタンが使用されている場合はサイトの速度に影響を与える可能性があります。不要な場合は、下部の「パルスアニメーション」関連コードを削除できます。

👉コードを効率化したい場合は、以下の例のように custom-btn クラスをさらに指定することで、共通のボタンスタイルを分離できます。 （この場合は custom-bton redBtnなど、2つのCSSクラスを指定する必要があります。こんなものがあるという程度だけ知ってお越しください。）

/* 공통 버튼 스타일 */
.custom-btn.wp-block-buttons > .wp-block-button {
    width: 85% !important;
    margin: 0 auto !important;
}

.custom-btn .wp-block-button__link {
    display: block !important;
    padding: 18px 30px !important;
    font-size: 18px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
    animation: pulse 2s infinite !important;
    box-sizing: border-box !important;
}

/* 개별 버튼 색상 */
.blueBtn .wp-block-button__link {
    background-color: #0059a6 !important;
    box-shadow: 0 0 20px rgba(17, 75, 134, 0.5) !important;
}
.blueBtn .wp-block-button__link:hover {
    background-color: #003f7f !important;
    box-shadow: 0 0 25px rgba(0, 84, 164, 0.7) !important;
}

/* 나머지 버튼 색상 */
/* 중략 */

/* 호버 공통 스타일 */
.custom-btn .wp-block-button__link:hover {
    transform: scale(1.03);
    color: #fff !important;
}

ボタンを追加する

これで、ブロックエディタでボタンを追加し、好きな色のボタンを作成できます。

WordPress ブロックエディタでボタンブロックを追加するには /ボタンを入力してボタンブロックを選択できます。 ブロックエディタキーボードショートカットを活用すると、素早くブロックを追加でき、マウスの使用を最小限に抑え、手首トンネル症候群の予防にも役立ちます。 😄）

WordPress ブロックエディタボタンブロックの追加

ボタンブロックを追加し、ボタンテキストとリンクを設定します。ボタンは中央揃えにして、ボタンブロック設定（右パネル）の 高級 セクションにCSSクラスを追加します。

WordPress ボタンブロックを追加するCSSクラスを指定する

上の図のように 追加のCSSクラス フィールドに適した色のボタンに対応する CSSクラスを指定します。 （→例： blueBtn )

指定可能なクラスは次のとおりです。

CSSクラスカラー名
blueBtn青
greenBtn緑
redBtn赤
orangeBtnオレンジ
purpleBtn紫
tealBtnターコイズ
pinkBtnピンク
yellowBtn黄色
cyanBtnターコイズ
emeraldBtn에메랄드
indigoBtn남색

コードを適用して追加の色のボタンを作成できます。よく使う色のボタン関連コードのみを使用することもお勧めします。 （コードがそれほど長くないためサイト速度に与える影響はわずかですが、少しでも効率化したい場合には、必ず必要なカラーのボタン関連コードのみ残すことを考慮できます。）

パターン化して活用する

ボタンを作成してパターンとして保存してアクティブにすると、ボタンをすばやく挿入できます。

ボタンをパターンとして保存して利用する方法については、次の記事を参照してください。

ボタンパターンを作成するとき同期「オプションをオフにしてください。

WordPress パターンを追加

同期 オプションを有効にすると、パターンを追加した後にボタンを変更すると、そのパターンが追加されたすべての記事/ページでボタンが更新されます。したがって、 同期 オプションをオフにして非同期化する必要がある場合は、ボタンパターンを挿入した後にボタンを独立して変更できます。

参照

ワードクラッカーのアバター画像

ワードクラッカー

プロの英国翻訳家。 WordPress 愛好家。 Naver カフェ 「ワープ社」 操作。

コメントを残す

コメントを残す

カカオトーク相談 カトクサービス相談