AI要約
ファイルアップロードボタンのスタイルを設定しますか？アップロードにモダンスタイルまたはクラシックスタイルのどちらを使用しても、常にデフォルトのスタイルが適用されます。
CSSの力を使えば、アップロードフィールドを独自の会社ブランディングに合わせてパーソナライズできます。このチュートリアルでは、その方法をご紹介します！早速始めましょう！
フォームの作成
まず、新しいフォームを作成し、フィールドを追加することから始めます。
フォームの作成についてサポートが必要な場合は、こちらの便利なドキュメントをご覧ください。
モダン スタイルの使用
ファイルアップロードフォームフィールドを追加したら、モダンスタイルとクラシックスタイルのどちらを使用するかを決定する必要があります。このチュートリアルでは、両方のスタイルに必要なCSSを提供します。
ただし、このセクションでは、まずモダンスタイルのフィールドのスタイル設定から始めます。これを設定するには、フォームでファイルアップロードを選択し、高度な設定タブをクリックします。スタイルドロップダウンから、モダンが選択されていることを確認し、フォームを保存します。
モダン スタイルのCSSを追加する
モダンスタイルのファイルアップロードのスタイルを設定する際は、このCSSをサイトに追加してください。カスタムCSSをサイトに追加する方法や場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。
.dz-message svg {
display: none;
}
.modern-title::before {
content: '';
/*Change the URL below to point to the image you would like to display*/
background: url(https://myexample-site.com/img/my-new-file-upload-image.svg);
width: 100px;
height: 35px;
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
}
.wpforms-uploader.dz-clickable {
min-height: 100px;
}
このCSSを追加することで、モダンスタイルのファイルアップロードは、会社のブランディングに合わせてより具体的に表示できるようになります。
クラシック スタイルの使用
モダンスタイルで行ったのと同じように、クラシックスタイルのスタイルも調整できます。
このセクションでは、フィールドの高度な設定タブにあるスタイルドロップダウンからクラシックを選択する必要があります。
クラシック スタイルのCSSを追加する
クラシックスタイルのファイルアップロードのスタイルを設定する際は、このCSSをサイトに追加してください。カスタムCSSをサイトに追加する方法や場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。
input[type="file"] {
outline: none !important;
padding: 4px !important;
margin: -4px !important;
}
input[type="file"]:focus-within::file-selector-button,
input[type="file"]:focus::file-selector-button {
outline: 2px solid #0964b0 !important;
outline-offset: 2px !important;
}
input[type="file"]::before {
top: 16px !important;
}
input[type="file"]::after {
top: 14px !important;
}
input[type="file"] {
position: relative !important;
}
input[type="file"]::file-selector-button {
width: 136px !important;
color: transparent !important;
}
input[type="file"]::before {
position: absolute !important;
pointer-events: none !important;
left: 40px !important;
color: #0964b0 !important;
content: "Upload File" !important;
}
input[type="file"]::after {
position: absolute !important;
pointer-events: none !important;
left: 16px !important;
height: 20px !important;
width: 20px !important;
content: "" !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E") !important;
}
input[type="file"]::file-selector-button {
border-radius: 4px !important;
padding: 0 16px !important;
height: 40px !important;
cursor: pointer !important;
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.16) !important;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05) !important;
margin-right: 16px !important;
transition: background-color 200ms !important;
}
/* hover state */
input[type="file"]::file-selector-button:hover {
background-color: #f3f4f6 !important;
}
/* active state */
input[type="file"]::file-selector-button:active {
background-color: #e5e7eb !important;
}
注意：Firefoxでは、input要素の::beforeおよび::afterはサポートされていません。FirefoxでこのCSSを使用すると、このブラウザではアップロードボタンにテキストが表示されません。
これで完了です！ファイルアップロードボタンのスタイルを簡単に更新できるようになりました。ファイルアップロードに特定のディレクトリを指定したいですか？ファイルアップロードに特定のディレクトリを定義する方法のチュートリアルをご覧ください。