ご注意！

この記事にはCSSコードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートしていません。

追加のガイダンスについては、WPBeginnerのカスタムCSSの追加に関するチュートリアルをご覧ください。

閉じる

フォームラベルの前後に画像を追加する

更新:
Markdownを表示

フォームのラベルの前後に画像を追加しますか？ラベルに画像を追加すると、フォームの要素が少しだけ際立ち、簡単なCSSで実現できます。

このチュートリアルでは、WPFormsでフィールドラベルの前後に画像を追加する方法を説明します。

フォームの作成

まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。このフォームでは、名前、メールアドレス、電話番号、URL、ファイルアップロード、段落のフォームフィールドを追加しました。

必要なフィールドを使用してフォームを作成します。

フォームラベルの前に背景画像を追加する

このチュートリアルでは、これらの各ラベルの画像を作成し、WordPressメディアライブラリにアップロード済みです。

フォームのラベルに使用したい画像をアップロードします

SVG画像をWordPressにアップロードする方法についてサポートが必要な場合は、このチュートリアルを参照してください。

CSSの追加

次に、これらすべてをまとめるCSSを追加します。サイトにCSSを追加する方法についてサポートが必要な場合は、このチュートリアルを参照してください。

label[for="wpforms-1723-field_1"]::before, 
label[for="wpforms-1723-field_2"]::before, 
label[for="wpforms-1723-field_3"]::before, 
label[for="wpforms-1723-field_4"]::before, 
label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 20px;
    content: " ";
    display: inline-block;
    background-position: 0px 2px;
    margin-right: 10px;
}
 
label[for="wpforms-1723-field_1"]::before {
    background-image: url(http://yoursiteurl.com/url-path-to-your-image/avatar.svg);
}
label[for="wpforms-1723-field_2"]::before {
    background-image: url(http://yoursiteurl.com/url-path-to-your-image/envelope.svg);
}
label[for="wpforms-1723-field_3"]::before {
    background-image: url(http://yoursiteurl.com/url-path-to-your-image/phone-call.svg);
}
label[for="wpforms-1723-field_4"]::before {
    background-image: url(http://yoursiteurl.com/url-path-to-your-image/link.svg);
}
label[for="wpforms-1723-field_6"]::before {
    background-image: url(http://yoursiteurl.com/url-path-to-your-image/upload.svg);
}
label[for="wpforms-1723-field_5"]::before {
    background-image: url(http://yoursiteurl.com/url-path-to-your-image/chat.svg);
}

上記のコードスニペットでは、ID 1723 のフォームを対象としています。このIDは、画像を追加したいフォームに合わせて更新する必要があります。CSSの ::before 要素を使用して、各フィールドのラベルの前にある領域を対象としています。

field_1 セレクターはフィールドIDを対象としています。したがって、これらの値は対象としたいフィールドIDに合わせて更新する必要があります。

注意: 上記のCSSの各フォームラベルは、フィールドIDを対象としています。フォームまたはフィールドIDの見つけ方についてサポートが必要な場合は、このチュートリアルを参照してください。

background-image のURLを、WordPressサイトにアップロードした画像のリンクに置き換えてください。CSSを追加すると、これらの画像をフォームに表示できるようになります。

これで、各フォームラベルに画像が表示されます。

フォントベースの画像を使用する

サイトに画像をアップロードするだけが、ラベルの前後に画像を表示する方法ではありません。フォントベースのアイコンをこれらのラベルに簡単に追加することもできます。

このチュートリアルでは、これらのアイコンに使用したいフォントファミリーをすでに設定しています。

このステップの設定についてサポートが必要な場合は、このチュートリアルを参照してください。

このチュートリアルでは、Font AwesomeプラグインのWordPressプラグインを使用しました。

フォントベースのアイコンを使用してラベルに画像を追加することもできます。
label[for="wpforms-1723-field_1"]::before, label[for="wpforms-1723-field_2"]::before, label[for="wpforms-1723-field_3"]::before, label[for="wpforms-1723-field_4"]::before, label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 20px;
    display: inline-block;
    background-position: 0px 2px;
    margin-right: 10px;
      font-family:"Font Awesome 5 Free";
}
 
label[for="wpforms-1723-field_1"]::before {
    content: "\f007";
}
label[for="wpforms-1723-field_2"]::before {
    content: "\f199";
}
label[for="wpforms-1723-field_3"]::before {
    content: "\f095";
}
label[for="wpforms-1723-field_4"]::before {
    content: "\f35d";
}
label[for="wpforms-1723-field_6"]::before {
    content: "\f382";
}
label[for="wpforms-1723-field_5"]::before {
    content: "\f086";
}

ラベルの後に画像を追加する

アイコンをラベルの後に表示したい場合は、CSSは少し異なります。

label[for="wpforms-1723-field_1"]::after, label[for="wpforms-1723-field_2"]::after, label[for="wpforms-1723-field_3"]::after, label[for="wpforms-1723-field_4"]::after, label[for="wpforms-1723-field_6"]::after,
label[for="wpforms-1723-field_5"]::after{
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 20px;
    display: inline-block;
    background-position: 0px 2px;
    margin-right: 10px;
      font-family:"Font Awesome 5 Free";
      margin: 0 0 0 5px;
}
 
label[for="wpforms-1723-field_1"]::after {
    content: "\f007";
}
label[for="wpforms-1723-field_2"]::after {
    content: "\f199";
}
label[for="wpforms-1723-field_3"]::after {
    content: "\f095";
}
label[for="wpforms-1723-field_4"]::after {
    content: "\f35d";
}
label[for="wpforms-1723-field_6"]::after {
    content: "\f382";
}
label[for="wpforms-1723-field_5"]::after {
    content: "\f086";
}

このCSSの唯一の違いは、::before の代わりに ::after を使用していることと、少しの間隔を空けるためにラベルの左側にマージンを追加したことです。

ラベルの後に画像を表示することもできます

これで完了です！フォームラベルの前後に画像を表示する方法を学びました。

次に、長いフォームに目次を追加しますか？長いフォームに目次を追加する方法のチュートリアルをご覧ください。

タグ:
まだ解決しませんか？ どうすればお手伝いできますか？
最終更新日: 2024年12月08日