コメント欄のスタイルをカスタマイズ

当サイトでは pictorico というテーマを使っています。サイトを立ち上げてから最近まで、コメント欄は閉じていたのですが、やはりコメント欄を開こうと思って設定を変更したところ、日本語タイトルの表示があまり嬉しくない状態になってしまいました。

「メールアドレス」というタイトルと「ウェブサイト」というタイトルが折り返してしまい、表示されるべきエリアからはみ出てしまっています。タイトルを英語に戻すことも考えましたが、変更点が最小になるようにスタイルシートを少し修正することにしました。

修正点は子テーマに書き込んでいきますので、pictorico-child フォルダの中の style.css に記入します。

まずはタイトルと入力欄が別々の行になるように、下記の点を変更します。
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-comment label {
position: static; /* absolute */
}

次にタイトルの折り返しが幅指定によるものだったので、幅指定を解除します。幅指定の解除を上書きするときは、width: auto; を指定します。
.comment-form label {
width: auto;
}

これで、縦に長いフォームにはなりましたが、見た目が綺麗に収まりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です