CSSでボタンのスタイルをカスタマイズする方法（例付き）

更新：2024年5月8日 13:08 読者開示

作成者： Hamza Shahid

ライター

レビュー済み作成者： Syed Balkhi

共同創設者

Facebook LinkedIn ツイート

Markdownを表示

フォームのボタンの外観を変更しますか？

WPFormsでは、ブロックエディターの組み込みスタイリングコントロールを使用するか、CSSを介してボタンのスタイルをカスタマイズできます。

今すぐフォームボタンのスタイルをカスタマイズ！

この記事では、両方の方法を使用してボタンのスタイルをカスタマイズする方法を説明します。どちらがあなたに適しているか確認してください！

この記事の内容

WPFormsでCSSを使用してボタンのスタイルをカスタマイズする方法
- オプション1：サイト全体のカスタマイズ（CSS）
- オプション2：個々のボタンのスタイルのカスタマイズ
CSSなしでボタンのスタイルをカスタマイズする方法
- WPFormsブロックのスタイリングオプション
- ボタンのスタイル設定にアクセスする

WPFormsでCSSを使用してボタンのスタイルをカスタマイズする方法

開始する前に、WPFormsプラグインをサイトにインストールして有効化する必要があります。また、少なくとも1つのフォームを作成する必要があります。開始するには、例として簡単な連絡フォームの作成に関するチュートリアルを参照してください。

オプション1：サイト全体のカスタマイズ（CSS）

フォームボタンのボタンのスタイルをカスタマイズするのは、使用したいCSSコードがあれば非常に簡単です。必要であれば、以下の例のいずれかをコピー＆ペーストするか、それらを組み合わせることもできます。

コードスニペットは、カスタマイズパネルの追加CSSセクションに貼り付ける必要があります。これは、外観 » カスタマイズ » 追加CSSに移動することで実行できます。その後、保存して公開をクリックするだけで完了です。

さらに簡単な方法は、WPCodeのようなプラグインを使用することです。これにより、さまざまな種類のコードスニペットをサイトに追加できます。この場合、スニペットを使用ボタンをクリックして、ボタンのスタイルのCSSコードを貼り付けるだけで済みます。

それでは、CSSでフォームボタンをスタイリングするいくつかの異なる方法を見てみましょう。

透明な背景のボタンを作成する方法

WPFormsボタンの透明な背景を作成したいですか？ゴーストボタンとしても知られる透明な背景ボタンは、人気のウェブデザインのトレンドです。

これは通常、大きな背景画像の上に配置されたフォームやコールトゥアクションで使用されます。さまざまなウェブサイトの透明なボタンの例をいくつか見てみましょう。

例1：透明なフォームボタン

例2：透明なコールトゥアクションボタン

透明な背景ボタンを作成するには、以下のコードスニペットを追加CSSセクションにコピーするだけです。

 div.wpforms-container-full .wpforms-form button[type=submit] {

color: #0099CC; /* Text color */

background-color: transparent; /* Remove background color */

border: 2px solid #0099CC; /* Border thickness, line style, and color */

border-radius: 5px; /* Adds curve to border corners */

text-transform: uppercase; /* Make letters uppercase */

}

ボタンは次のように表示されます：

グラデーションカラーのボタンを作成する方法

ゴーストボタンとは異なり、グラデーションボタンの使用は新しいトレンドではありません。しかし、それらの多色グラデーションスタイルのボタンがあなたのウェブサイトに最適であれば、このチュートリアルに従うことができます。

CSSで行われるため、解像度を失うことなく簡単に拡大縮小できます。CSSでグラデーションを作成するためのツールを探している場合は、ColorZillaのグラデーションエディターを使用できます。

以下のCSSでは、グラデーションが可能な限り多くの異なるブラウザに表示されるように、ブラウザ固有のスタイルを使用しました。

 div.wpforms-container-full .wpforms-form button[type=submit] {

border-radius: 30px; /* Curve of border corners */

text-transform: uppercase; /* Make letters uppercase */

color: white; /* Text color */

background: #0099cc; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Firefox 3.6 to 15 */

background: linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* Standard syntax */

}

ボタンは次のように表示されます：

角丸ボタンを作成する方法

コールトゥアクションにユーザーの視線を集めたいですか？いくつかの調査によると、角丸は情報の処理を向上させ、要素の中心に視線を引きつけます。

ユーザーの注意を引きたい場合は、WordPressフォーム用の角丸ボタンを作成して、フォームコンバージョン率をテストすることをお勧めします。

 div.wpforms-container-full .wpforms-form button[type=submit] {

background-color: #0099CC; /* Blue background color */

border-radius: 30px; /* Curve of border corners */

text-transform: uppercase; /* Make letters uppercase */

color: white; /* Text color */

}

ボタンは次のように表示されます：

ボタンを画像に置き換える方法

グラフィックボタンを使用することは、フォームのボタンをカスタマイズする最も簡単な方法でしょう。

ストックフォトサイトでダウンロードして使用できるグラフィックボタンはいくつか簡単に見つけることができます。その後、フォームのボタンをグラフィックボタンに置き換えることができます。

メディア » 新規追加に移動して、ボタンのグラフィックをメディアアップローダーにアップロードしてください。次に、以下のURLをご自身の画像URLに置き換えてください。

http://yoursite.com/your-image.jpg

div.wpforms-container-full .wpforms-form button[type=submit] {

background-image: url(http://yoursite.com/your-image.jpg);

background-repeat: no-repeat;

background-size: cover;

background-position: center;

color: transparent; /* Hide the 'submit' text */

border: none; /* Remove the border */

}

複数行ボタンを作成する方法

フォームを送信する前に、ユーザーは多くの疑問を抱えているでしょう。コンバージョンを向上させるために、ボタン内またはその周辺の適切なコピーでこれらの質問に答えることができます。

フォーム用のボタンを作成する際は、訪問者の視点から見てください。コンバージョンを目的としたボタンの適切なコピーを作成するのに役立ちます。

ほとんどの場合、これらの詳細をすべてボタンに含めるには、複数行ボタンを作成する必要があります。WPFormsで複数行フォームボタンを作成する方法は次のとおりです。

 div.wpforms-container-full .wpforms-form button[type=submit]:after {

content: 'Second line text'; /* Text for second line of button */

display: block; /* Puts this text on its own line */

font-size: 10px;

margin-top: 5px; /* Add distance from first line of text */

font-weight: normal; /* Remove bold style */

}

ボタンは次のように表示されます：

オプション2：個々のボタンのスタイルのカスタマイズ

新しいスタイルをサイト上のすべてのフォームではなく、単一のWPFormsフォームにのみ使用したい場合はどうなりますか？

CSSを使用して個々のフォームボタンのボタンのスタイルを変更したい場合は、フォームの一意のIDを見つける必要があります。

まず、変更したいフォームが含まれるページを開きます。マウスをフォームのいずれかのフィールドに移動し、右クリック » 要素をインスペクトします。

ブラウザ画面が分割され、ページのソースコードが表示されます。ソースコードで、フォームコードの開始行を見つける必要があります。

上記のスクリーンショットで見られるように、私たちのコンタクトフォームコードは次の行から始まります。

div class="wpforms-container wpforms-container-full" id="wpforms-14"

このIDをCSSで使用してコンタクトフォームをスタイル設定します。最初のCSSスニペットの .wpforms を #wpforms-14 に置き換えます。

id属性は、WPFormsがこの特定のフォーム用に生成した一意の識別子であるため、スタイルは他の場所には適用されません。

たとえば、最初のコードスニペットの先頭に次のスニペットを挿入するだけで済みます。

div#wpforms-14 {background-color: transparent; !important}

フォームIDを見つけるためのより直接的な方法として、すべてのフォームに移動し、ショートコード列を見つけます。すぐにフォームIDが見つかります。

今すぐフォームボタンのスタイルをカスタマイズ！

CSSなしでボタンのスタイルをカスタマイズする方法

CSSを追加する前に、WPFormsの組み込みスタイル設定コントロールを使用して、目的のボタンのスタイルをより簡単に実現できるかどうかを検討してください。

WordPressのブロックエディター内にあるWPFormsのノーコードフォームスタイリングオプションの詳細については、WordPressでコンタクトフォームをスタイル設定する方法に関するこの記事をご覧ください。

プロセスは簡単です。フォームを開き、ブロックエディターでフォームをクリックして、WPFormsブロックの追加のスタイリングオプションを開きます。

WPFormsブロックのスタイリングオプション

WPFormsブロックの設定でCSSを記述することなく、カラーテーマ、フォームフィールド、ラベル、ボタン、コンテナ、および背景スタイルを変更できます。

ボタンのスタイル設定にアクセスする

ボタンのスタイルでは、ボタンのサイズ、色、境界線、境界線の太さ、境界線の半径、境界線のスタイルを変更できます。選択できるオプションは次のとおりです。

サイズ：このオプションは、ボタンのサイズを示します。小、中、大から選択できます。
境界線：この設定では、ボタンに実線、破線、点線などの境界線を追加できます。
境界線の太さ：ボタンの端の太さを示します。デザインにピクセル（px）以外の単位が必要な場合は、別の単位を選択できます。
境界線の半径：ボタンの角の丸みを変更して、より柔らかく、またはよりシャープに見せることができます。ピクセル（px）が標準単位ですが、デザインのニーズに合わせて変更できます。

下の色パネルで、ボタンの背景色とテキストの色を変更することもできます。

今すぐフォームボタンのスタイルをカスタマイズ！

CSSでカスタムボタンのスタイルを設定することに関するFAQ

ボタンのスタイルのカスタマイズは、読者の間で人気のあるトピックです。それに関するよくある質問への回答を以下に示します。

CSSでボタンのスタイルを変更するにはどうすればよいですか？

CSSを使用してボタンの外観を変更するには、背景色、境界線、フォントサイズ、パディングなどのプロパティにカスタムスタイルを指定できます。WordPressでは、カスタマイザーの追加CSSにCSSスタイルを貼り付けることができます。

カスタムボタン付きのフォームを作成するにはどうすればよいですか？

カスタムボタン付きのフォームを作成するには、WPFormsのようなWordPressプラグインの使用を検討してください。ドラッグアンドドロップツールで簡単にフォームを作成できます。

カスタムボタンのスタイルについては、WordPressの追加CSSセクションに移動し、WPFormsが付与する特定のフォームまたはボタンのクラス名をターゲットにしてCSSコードを入力してください。

送信ボタンをカスタマイズするにはどうすればよいですか？

WPFormsで送信ボタンをカスタマイズするには、フォームを編集し、「送信ボタン」を選択して、テキストラベルを直接変更します。ブロックエディターまたは追加CSSを使用して、カスタムの色、フォント、サイズでボタンのスタイルをさらに調整します。

次に、WordPressでログインページをカスタマイズする方法をチェックしてください

これで、CSSで連絡フォームをスタイルする方法がわかりました。次に、サイトのカスタムログインページを作成する方法を確認することをお勧めします。サイトが成長するにつれて最適なプラグインを選択するのに役立つプラグインのまとめもあります。

今すぐWordPressフォームを作成する

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。

開示：当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPFormsがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください。

ハムザ・シャヒド

ハムザはWPFormsチームのライターであり、デジタルマーケティング、サイバーセキュリティ、WordPressプラグイン、ERPシステムに関連するトピックも専門としています。もっと詳しく知る

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。