前回と前々回の投稿で、WordPressテーマ:賢威7のコメントフォームをカスタマイズする方法を紹介してきましたが、今回もコメントフォームをカスタマイズする方法を紹介していきたいと思います。
最初の状態では、コメントフォームは「白い背景」に「黒い境界線」というスタイルになっていますが、CSSファイルを編集して、この背景色と境界線を変更していきます。
今回もほんの少しのCSSコードでカスタマイズ出来るので、よかったら参考にして下さい!
目次
カスタマイズ前
↓ カスタマイズ前のコメントフォーム
カスタマイズ後
カスタマイズ 1
↓ 背景を薄いグレーにして、境界線を濃いグレーに変更
カスタマイズ 2
↓ 背景を少し濃い目のグレーにして、境界線を非表示に。入力欄の高さも変更
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;}