賢威7.0

コメントフォーム(入力欄)の横幅を変更する方法:賢威7

comment-form-width-thumbnail

今回の記事では、WordPressテーマ:賢威7のコメント入力欄をカスタマイズする方法を紹介したいと思います。

賢威7をインストールしたばかりの状態では、コメントフォームの中の本文を入力するエリアは、ほんの少し右側のスペースが空いた状態になっていますよね。

これはコメント入力欄の横幅が90%になるように指定されているからなんですが、PHPコードの編集だけで簡単に横幅を変更することができます。
(CSSのみで編集するより簡単かもしれません)

カスタマイズ前

↓ カスタマイズ前の状態では、コメント入力欄の右側に余白ができています

comment-before

カスタマイズ後

カスタマイズ 1

↓ コメント入力欄が横幅100%に広がりました

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

↓ 名前やメールアドレスなどの入力欄も横幅100%になりました

comment-after-2

[ad]

また、今回はPHPファイルを編集していきます。
ほんの少しの編集ですが、エラーの内容によっては画面が真っ白になってしまうこともあるので、バックアップを取ってから作業するようにして下さい。

1. コメント本文の入力欄を横幅100%にする

まずはコメント本文の入力欄を横幅100%にしていきましょう。
今回のカスタマイズではコメントフォームをカスタマイズしたいので、編集するファイルは comments.php です。

comments.php の105行目付近に以下のコードがありますが、

<p><textarea name="comment" id="comment" class="w90" cols="58" rows="10" tabindex="4"></textarea></p>

このコードの中の class="w90" というクラス名で横幅を90%に指定しているので、このクラス名を変更すれば、お好みの横幅にすることができます。

横幅を100%にするには class="w100" とすればいいので、comments.php の105行目(付近の)コードは以下のようになります。

<p><textarea name="comment" id="comment" class="w100" cols="58" rows="10" tabindex="4"></textarea></p>

↓ 本文の入力欄が横幅100%になりました

comment-after-1

2. 名前やメールアドレスの入力欄も横幅100%に広げる

次に名前やメールアドレス、ウェブサイトの入力欄も横幅100%にしてみます。

これも先ほどのコメント本文と同じように、クラス名を変更すれば良いので、86行目から99行目付近にある以下のコードは、、、

<div class="comment-form-author">
<p><label for="author"><small><?php _e('Name'); ?> <span class="required"><?php if ($req) _e('(required)'); ?></span></small></label></p>
<p><input type="text" name="author" id="author" class="w50" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?>></p>
</div>

<div class="comment-form-mail">
<p><label for="email"><small><?php _e('Mail (will not be published)'); ?> <span class="required"><?php if ($req) _e('(required)'); ?></span></small></label></p>
<p><input type="text" name="email" id="email" class="w50" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?>></p>
</div>

<div class="comment-form-url">
<p><label for="url"><small><?php _e('Website'); ?></small></label></p>
<p><input type="text" name="url" id="url" class="w50" value="<?php echo  esc_attr($comment_author_url); ?>" size="22" tabindex="3"></p>
</div>

(横幅を100%に広げると)下のコードのようになります。
class="w50" というクラス名3箇所を class="w100" に変更)

<div class="comment-form-author">
<p><label for="author"><small><?php _e('Name'); ?> <span class="required"><?php if ($req) _e('(required)'); ?></span></small></label></p>
<p><input type="text" name="author" id="author" class="w100" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?>></p>
</div>

<div class="comment-form-mail">
<p><label for="email"><small><?php _e('Mail (will not be published)'); ?> <span class="required"><?php if ($req) _e('(required)'); ?></span></small></label></p>
<p><input type="text" name="email" id="email" class="w100" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?>></p>
</div>

<div class="comment-form-url">
<p><label for="url"><small><?php _e('Website'); ?></small></label></p>
<p><input type="text" name="url" id="url" class="w100" value="<?php echo  esc_attr($comment_author_url); ?>" size="22" tabindex="3"></p>
</div>

↓ コメントフォーム内の全ての入力欄が横幅100%になりました。

comment-after-2

3. コメント入力欄をお好みの横幅にするには

ここまでのカスタマイズで、class="w90" という部分を class="w100" としたり、class="w50" という部分を class="w100" としたように、クラス名の編集だけで、横幅を変更することができます。

下は賢威7で利用できるクラス名です。
このクラス名を先ほどと同じように使えば、5%や65%といった横幅にすることもできます。
手軽に使えるので、ぜひお試し下さい!

.w05{ width: 5%; }
.w10{ width: 10%; }
.w15{ width: 15%; }
.w20{ width: 20%; }
.w25{ width: 25%; }
.w30{ width: 30%; }
.w35{ width: 35%; }
.w40{ width: 40%; }
.w45{ width: 45%; }
.w50{ width: 50%; }
.w55{ width: 55%; }
.w60{ width: 60%; }
.w65{ width: 65%; }
.w70{ width: 70%; }
.w75{ width: 75%; }
.w80{ width: 80%; }
.w85{ width: 85%; }
.w90{ width: 90%; }
.w95{ width: 95%; }
.w100{ width: 100%; }