WordPress Diviテーマボタンスタイルを変更する

Last Updated: 2024 年 07 月 07 日 2のコメント
無料電子ブック AdSense ウェビナー

Diviテーマはベストセリングテーマ Avadaに似た販売量を誇る WordPress 多目的テーマです。 Naver カフェDivIテーマで作成したボタンのスタイルを変更する方法について質問があり、Diviテーマのボタンモジュールのスタイルをカスタマイズする方法について簡単に説明します。

WordPress 基本エディタであるブロックエディタでボタンを作成する方法については、次の記事を参照してください。

WordPress Diviテーマボタンスタイルを変更する

レイアウトページで使用されているボタンを使用する

エレガント Themesは毎週新しいレイアウトパックを公開しています。レイアウトパックに含まれているレイアウトページをロードして利用できます。

レイアウトページにはさまざまなボタンスタイルが適用されます。お気に入りのレイアウトパックをロードして、対応するボタンを利用することが可能です。

以下は、最近追加された不動産レイアウトページに含まれているボタンを示しています。

あまりきれいではありませんが、例としてロードしてみました。対応するボタンをコピーして使用できます。

しかし、ボタン一つのためにレイアウトデザインをロードするのはそれほど効率的ではないようです。ただ、この方法でボタンや他の要素を活用できる程度に理解してください。

ボタンモジュール設定でスタイルを設定する

DiviテーマDivi Builderでボタンモジュールを追加した場合 設計 タブでさまざまなデザイン設定を行うことができます。

ボタンの背景色、ボタンのテキストサイズと色、ボタンの枠の半径（丸く）、ハーバー時のボタンの背景色など、細かい部分を設定できます。

ボックスシェーディング、アニメーションなどの設定も可能です。

設定により、好きな形のボタンを作成できます。

カスタムCSSを使用する

別の方法でカスタムCSSを使用してスタイルをカスタマイズできます。このようにボタンのスタイルを設定するには CSSについて少し理解する必要があります。 チャットGPTを使ってボタンスタイルをお願いします。好きなスタイルを提示することはできませんが、希望のスタイルが出るまで繰り返しリクエストできます。

Advanced（詳細） タブの CSSクラス フィールドにCSSクラスを指定します（例：red-button）。

Csutom CSS セクションにカスタムCSSコードを入力します。

たとえば、CSS Classフィールドに 赤いボタンと入力して、次のCSSコードを追加できます。

/* 빨간색 버튼 스타일 */
/* Red Button Style */

.red-button {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    padding: 12px 35px;     
    font-size: 26px;
    color: #FFFFFF !important;
    border-radius: 50px !important;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.red-button:hover, .red-button:focus {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    padding: 12px 40px !important;
}

ページを保存してフロントエンドでページにアクセスすると、ボタンのスタイルが次のように変わります。

シームレスなコードメンテナンスのために、カスタムCSSコードは WordPress 管理者ページ » デザイン » カスタマイズ » 追加のCSSに追加したり、 チャイルドテーマ 内のスタイルシートファイル（style.css）に追加できます。

以下は、Diviテーマのボタンスタイルを変更するいくつかのコード例です。

例：青いボタン

/* 파란색 버튼 */
/* Blue Button Style */

.blue-button {
    background: linear-gradient(135deg, #3498db, #2980b9);
    padding: 12px 35px;     
    font-size: 26px;
    color: #FFFFFF !important;
    border-radius: 50px !important;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blue-button:hover, .blue-button:focus {
    background: linear-gradient(135deg, #2980b9, #3498db);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    padding: 12px 40px !important;
}

例：緑色のボタン

/* 녹색 버튼 스타일 */
/* Green Button Style */

.red-button {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    padding: 12px 35px;     
    font-size: 26px;
    color: #FFFFFF !important;
    border-radius: 50px !important;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.red-button:hover, .red-button:focus {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    padding: 12px 40px !important;
}

ボタンが気に入らない場合 AI言語モデルを活用してコードのデバッグからデータの異常検出まで、に好きなスタイルを注文すると、CSSコードを提示してくれます。

WordPress Diviテーマ

ボタンテキストから下線を削除する

ボタンにリンクが設定されている場合、ボタンテキストに下線が表示されることがあります。その場合は、次のCSSコードを使用してアンダースコアを削除できます。

/* Divi 테마 버튼 텍스트 밑줄 제거하기 */
/* Remove the underline from the button text in the Divi theme */

.et_pb_button_module_wrapper>a {
text-decoration: none !important;
}

参照

2のコメント

コメント

  1. エレメントページビルダーが提供するボタン要素にも同じ方法で可能ですか？ cssをどうすればすぐに学ぶことができますか？

    応答

    • エレメンでボタンを追加しても、CSSクラスを指定してCSSにスタイルを変更できます。原理は同じですが、実際のCSSコードは異なる場合があります。時間が経つにつれてエレメントのボタンウィジェットを使用する場合は、スタイルをCSSに変更する方法を見てみましょう。

      応答