WordPress Diviテーマのコメントフォームのスタイルを変更する

0

WordPress Diviテーマの基本的なコメントフォームは非常に単純です。 コメントフォームが表示されるスタイルをCSSを使用して変更することができます。

コメント作成者の名前、電子メール、ウェブサイトのURLフィールドを3列として表示したい場合は、次のようなCSSを使用します。

/* Display name, email and website url fields in three columns in 1170px sizes */
@media only screen and (min-width: 1170px)
{
.comment-form-author,
.comment-form-email,
.comment-form-url {
display: inline-block;
width: 32.9%;
}

.comment-respond,
.entry-pings {
padding: 0;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 98% !important;
}
}

Elegant Themesは上記のようなコードを提示しています。 英語サイトでは、上記のコードは正常に動作したが、韓国語サイトでは、正常に動作していない。 韓国語サイトでは、次のようなCSSコードを適用したら、必要に応じ表示されます。

@media only screen and (min-width: 1170px) {
.comment-form-author,
.comment-form-email,
.comment-form-url {
display: inline-block;
width: 33.3%;
}
.comment-form-author,
.comment-form-email {
padding-right: 1px;
}

.comment-respond,
.entry-pings {
padding: 0;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 100% !important;
}
}

コードが正常に動作しない場合は、数字を変更してテストしてみてください。

そしてコメント送信ボタン(Comment Form Submit Button)のスタイルを変更するには、次のコードを適切に応用することです。

/* Form Submit Button style */

.form-submit .et_pb_button
{
display: inline-block;
cursor: pointer;
background: #666;
color: #FFF !important;
border-radius: 5px;
}

色などを適切に変更することをします。 コードは、チャイルドテーマのスタイルシートファイルに追加したり、 WordPress ダッシュボード> Divi>テーマオプション>ユーザーカスタマイズCSSに追加します。

DiviテーマCSSコード

上記のコードを使用すると、次のように表示されます。

Diviテーマコメントフォーム

CSSを使用して、このブログのコメントフォームのように変更することも考えてみることもできます。

WordPress コメントフォーム

ウェブサイトのフィールドをなくしたい場合には、次のコードを使用することができます。

function disable_website_field($fields)
{
if(isset($fields['url']))
unset($fields['url']);
return $fields;
}

add_filter('comment_form_default_fields', 'disable_website_field');

このコードをチャイルドテーマの関数ファイルに追加するようにします。

メモ:

コメントを残す

あなたのコメントを入力してください!
あなたの名前をここに入力してください