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

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

• コメントフォーム（入力欄）の横幅を変更する方法
• 「コメントを送信」ボタンの大きさを変更する方法

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

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

カスタマイズ前

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

カスタマイズ後

カスタマイズ 1

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

カスタマイズ 2

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

[ad]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

↓ 追加したCSSコード

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