comments.php設定

comments.php設定する

コメントに関する設定は　管理画面　＞　設定　＞　ディスカッション　で出来る。

固定ページで表示されない場合は「表示オプション」でチェックをつける。

＜comments.php＞
<div id="comments">
<?php if(have_comments()): ?>
	<h3>コメント</h3>
	<ul><?php wp_list_comments(); ?></ul>
<?php endif; ?>	
	<?php comment_form(); ?>
</div>


＜出力させたいところに記述＞
<!--投稿コメント表示-->
<?php if ( comments_open() ) : ?>
<?php comments_template(); ?>
<?php endif; ?>



<!--投稿コメント表示-->
<?php comments_template(); ?>
これで表示される


＜ＣＳＳ＞
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

コメント.php装飾

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*行間設定*/
#comments{
	text-align:left;
	line-height:150%;
	background-color:#fff7d9;
	font-size:90%;
	padding:15px 100px;
}
#comments h3{
	font-size:120%;
	border-bottom:2px solid #000000;
	margin-bottom:15px;
}
#comments ul{list-style:none;}

#comments img{
	float:left;
	padding:0px 10px 30px 0px;
}
#comments .comment{clear:both;}
.comment-author{/*顔写真の上のデザイン*/}

/*文字サイズ調整*/
.fn, .says{font-size:90%; line-height:130%;}
.comment-awaiting-moderation, .comment-meta{font-size:80%; line-height:130%;}
.fn, .says{
	font-wight:bold;
}

/*日付のリンク色変更*/
.comment-meta a{text-decoration:none;}
.comment-meta a:link{color:#999999;}
.comment-meta a:visited{color:#999999;}
.comment-meta a:hover{color:#999999;}
.comment-meta a:active{color:#999999;}


/*-------------------------------
コメントを残す部分
-------------------------------*/
#respond{
	margin-top:30px;
}
.comment-reply-title{
	margin-bottom:10px;
}

#comments .comment-form-url{display:none;}
.comment-form-email label, .comment-form-author label, .comment-form-comment label{display:block;}
#comments input[type="submit"]{padding:10px; margin-top:10px;}

/*名前とメルアドなどの項目の空白調整*/
.comment-form-comment, .comment-form-author, .comment-form-email{margin-top:20px;}


/*返信コメント枠設定*/
.depth-1{/*お客様コメントデザイン*/
	border:solid 1px #272727;
	padding:10px;
	background-color:#FFFFFF;
	margin-bottom:10px;
}
.depth-2{/*管理者コメントデザイン*/
	border:dotted 1px #999999;
	padding:10px;
	margin-top:10px;
	background-color:#f4f1e4;
	border-radius:5px;
}


@media screen and (max-width: 481px)  {/*スマホ用*/
	#comments{padding:10px 5px;}
}