賢威7.0

コメントフォーム(入力欄)の背景色+境界線を変更する方法:賢威7

comment-form-width-thumbnail

前回と前々回の投稿で、WordPressテーマ:賢威7のコメントフォームをカスタマイズする方法を紹介してきましたが、今回もコメントフォームをカスタマイズする方法を紹介していきたいと思います。

最初の状態では、コメントフォームは「白い背景」に「黒い境界線」というスタイルになっていますが、CSSファイルを編集して、この背景色と境界線を変更していきます。

今回もほんの少しのCSSコードでカスタマイズ出来るので、よかったら参考にして下さい!

カスタマイズ前

↓ カスタマイズ前のコメントフォーム

comment-form-background-before

カスタマイズ後

カスタマイズ 1

↓ 背景を薄いグレーにして、境界線を濃いグレーに変更

comment-form-background-after-1
カスタマイズ 2

↓ 背景を少し濃い目のグレーにして、境界線を非表示に。入力欄の高さも変更

comment-form-background-after-2

[ad]

1. コメント入力欄の背景色を変更

今回はコメントフォームの見た目を変更したいので、親テーマ(賢威7本体)の base.css や 子テーマの style.css ファイルなどのCSSファイルを編集していきます。

まずはコメント入力欄の背景色を変更です。
以下のコードをCSSファイルに追加すると、、、

.comments-area textarea,
.comments-area input {
    background: #f9f9f9;
}

背景が薄いグレー(#f9f9f9)になりました。
#f9f9f9 部分を別のカラーコードにすれば、お好みの色に変更できます)

comment-form-background-mid

背景の色は変更できましたが、これだけだと境界線の色がバラバラで目立ってしまいますよね。

2. コメント入力欄の境界線をカスタマイズ

2-1. 境界線の色を変更

次にコメントフォームの境界線をカスタマイズしていきます。

これも先ほどと同じように、CSSファイルに以下のコードを追加すると、、、

.comments-area textarea,
.comments-area input {
    border: 1px solid #ddd;
}

境界線がグレー(#ddd)になりました。

comment-form-background-after-1

境界線についても #ddd 部分を別のカラーコードにすれば、お好みの色に変更できます。

また、 1px の部分を変えれば境界線の太さも変更できます。

2-2. コメントフォームの境界線を非表示に

今度はコメントフォームの境界線を非表示にしてみましょう。
境界線を非表示にするには、以下のコードを追加すれば良いので、

.comments-area textarea,
.comments-area input {
    border: none;
}

背景色を変更するコードと組み合わせると、下のようなコードになります。

.comments-area textarea,
.comments-area input {
    background: #f9f9f9;
    border: none;
}

↓ 背景色が薄いグレーになり、境界線が非表示になりました

comment-form-background-mid-2

3. 名前やメールアドレスの入力欄の高さを変更する

最後にコメントフォームの中の「名前」や「メールアドレス」、「ウェブサイト」と書かれた入力欄の高さを変更する方法をご紹介します。

入力欄の高さは line-height で変更できるので、セレクタ(指定)を input 要素にした以下のコードを追加すると、、、

.comments-area input {
    line-height: 1.8;
}

入力欄の高さが変更されました。
これで完成です!

comment-form-background-after-2

↓ 追加したCSSコード

.comments-area textarea,
.comments-area input {
    background: #eee;
    border: none;
}
.comments-area input {
    line-height: 1.8;
}