Twenty Thirteenの投稿ページのコメント欄をカスタマイズ

「Twenty Thirteen」のコメント欄をカスタマイズします。

はじめに

「Twenty Thirteen」のコメント欄をカスタマイズします。
・Wordpressの設定(ディスカッション)を変更
・スタイルシート(style.css)を変更
・テンプレート(comments.php)を変更

WordPressの設定(ディスカッション)を変更

ディスカッションの設定で、「名前とメールアドレスの入力を必須にする」のチェックをはずします。customize_wp_discussion_001

コメント欄全体の背景色と高さを変更

「style.css」でコメント欄全体の背景色と高さを変更します。

<変更後>

.comment-respond {
	background-color: #ffffff;
	padding: 21px 0 15px;
}

.comment .comment-respond {
	margin-bottom: 20px;
	padding: 20px;
}

コメント欄のタイトル文字を変更

「style.css」でコメント欄のタイトル文字を変更します。

<変更後>

.comment-reply-title {
	font: 700 normal 14px Osaka-mono, "MS Gothic", monospace;
	text-decoration: underline;
}

コメント欄の各入力エリアの幅を変更

「style.css」でコメント欄の各入力エリアの幅を変更します。max-widthとwidthをそろえると美しく見えるかも?

<変更後>

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	max-width: 320px;
	width: 100%;
}

.comment-form textarea {
	max-width: 320px;
	width: 100%;
}

コメント欄のテキスト入力エリアの高さを変更)

「style.css」でコメント欄のテキスト入力エリアの高さを変更します。

<変更後>※追記

textarea#comment {
    height: 45px;
}

ボタンの配色を変更

「style.css」でボタンの配色を変更します。

<変更後>

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #80E080; /* Old browsers */
	background: -webkit-linear-gradient(top, #80E080 0%, #40A040 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #80E080 0%, #40A040 100%); /* W3C */
	border: none;
	border-bottom: 2px solid #108010;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 5px 10px 4px;
	text-decoration: none;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
	background: #90F090; /* Old browsers */
	background: -webkit-linear-gradient(top, #90F090 0%, #50B050 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #90F090 0%, #50B050 100%); /* W3C */
	outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	background: #70D070; /* Old browsers */
	background: -webkit-linear-gradient(top, #40A040 0%, #80E080 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #40A040 0%, #80E080 100%); /* W3C */
	border: none;
	border-top: 2px solid #108010;
	padding: 4px 10px 5px;
}

ボタンのサイズを変更

「style.css」でボタンのサイズを変更します。
<変更後>

/* Buttons */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #80E080; /* Old browsers */
	background: -webkit-linear-gradient(top, #80E080 0%, #40A040 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #80E080 0%, #40A040 100%); /* W3C */
	border: none;
	border-bottom: 2px solid #108010;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 5px 10px 4px;
	text-decoration: none;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
	background: #90F090; /* Old browsers */
	background: -webkit-linear-gradient(top, #90F090 0%, #50B050 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #90F090 0%, #50B050 100%); /* W3C */
	outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	background: #70D070; /* Old browsers */
	background: -webkit-linear-gradient(top, #40A040 0%, #80E080 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #40A040 0%, #80E080 100%); /* W3C */
	border: none;
	border-top: 2px solid #108010;
	padding: 4px 10px 5px;
}

テンプレート(comments.php)を変更

テンプレートで以下の変更を行います。
・タイトルを変更
・ウェブサイトのURL欄を非表示
・上部表示のテキストを変更
・下部表示のテキストを変更
・送信ボタンのテキストを変更

<変更前>

  <?php comment_form(); ?>

<変更後>

	<?php
	$comments_args = array(
		'fields' => array(
			'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		    	        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
			'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		                '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
			'url'    => '',
		),
		'title_reply'          => 'コメント記入欄',
		'comment_notes_before' => '<p class="comment-notes">※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!</p>',
		'comment_notes_after'  => '<p class="form-allowed-tags">内容を確認して、「コメント送信」ボタンを押してください。</p>',
		'label_submit'         => 'コメント送信'	);

	comment_form($comments_args);
	?>

おわりに

コメント欄を思い通りにカスタマイズするためには、スタイルシートだけでは難しく、テンプレートのカスタマイズも必要になりました。

関連記事(Twenty Thirteenのページ固有の表示をカスタマイズ)

  1. Twenty Thirteenでトップページだけ表示を変更
  2. Twenty Thirteenの固定ページのコメント欄を削除
  3. Twenty Thirteenの前後の記事へのリンクをカスタマイズ
  4. Twenty Thirteenの投稿ページの日付表示等を移動
  5. Twenty Thirteenの投稿ページのコメント欄をカスタマイズ
  6. Twenty Thirteenのアーカイブ表示をカスタマイズ
  7. Twenty Thirteenの検索結果表示をカスタマイズ
  8. Twenty Thirteenのページナビゲーションをカスタマイズ

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメントを残す

メールアドレスが公開されることはありません。

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)