Customize in Ninja Blog

コメントの編集部分は次のようになってます。

ここをこんな風に指定しました。

・コメント記事全体の背景色： #ffffff
・コメント記事全体の背景画像：なし
・コメントのタイトル背景色： #ffffff
・コメントのタイトル背景画像：なし
・コメントのタイトル文字： サイズ 12px　色　#503030
・コメントのタイトル余白： すべて5px
・コメントタイトル周りのボーダー： 種類　隆起した線　すべて1px　色　#cccccc
・コメント部分の背景色： #ffffff
・コメント部分の背景画像：なしwi
・コメント本文の文字： サイズ 12px 色　#656565
・コメント情報部分の文字： サイズ 10px　色　#503030
・本文部分と情報部分の境界線： 種類　線を引く　太さ：1px 色 #656565

これをプレビューで見てみ対のですが、うまく見れないのでかわりにテスト画面をみるとこんな感じになります。

相変わらずこれだけだと変ですね。

さらに、編集機能を使ってコメントフォーム部分を指定します。

ここは、始めはこんな感じに指定しておきました。
・コメントフォームの背景色： #ffffff
・コメントフォームの背景画像：なし
・コメントフォーム余白： 上下左右10px
・フォーム見出しの背景色： #f5f5f5
・コメント見出しの背景画像：なし
・見出し部分の余白：上下左右5px
・見出し部分のボーダー： 種類　破線　上下左右1px　色　#cccccc
・見出しの文字：サイズ 12px 色　#656565
・フォーム部分の背景色： #f5f5f5
・フォーム部分の背景画像：なし
・フォーム部分の余白：上下左右5px
・フォーム部分のボーダー：種類　破線　上下左右1px　色　#cccccc
・フォームの背景色：#ffffff
・フォームの背景画像：なし
・フォーム周りのボーダー：種類　二重線　上下左右3px　色　#cccccc
この指定でテンプレートを保存してみてみるとこんな感じに見えます。

これはあんまり変える必要なさそう♪

で、ここまで編集機能を使って編集したのですが、編集機能にない項目とか、いろいろあって次のようにスタイルシートを書きました。
(たぶん本当はこれじゃ駄目だと思うけど、見えてればいいかと思って。。)

「各コメント表示部分の設定」はこうしました。

/*コメント全体の設定*/
.CommentBlock{
margin:10px 0px;
padding:10px;
background-color:#ffffff;
}
/*この記事にコメントする　と書かれてる部分の設定*/
.CommentMenuTitle{
margin:10px 0px ;
padding:0px;
text-align: left;
color:#cccccc;
font-size:14px;
font-weight:bold;
}
/*コメントのタイトル、コメント、コメント情報の全ての背景部分*/
.CommentTextBox{
margin:0px;
padding:0px;
border :1px dotted #cccccc;
}
/*コメントのタイトル部分*/
.CommentTitle{
text-align: left;
background-color:#ffffff;
font-size:13px;
color:#656565;
padding:5px 10px;
border-bottom :1px dotted #cccccc;
font-weight:bold;
margin:0px;
}
/*コメント部分*/
.CommentText{
padding: 10px;
background-color:#ffffff;
font-size:12px;
color:#656565;
margin:0px;
}
/*投稿者や投稿時間などが表示されている部分*/
.CommentFooter{
text-align:right;
padding:0px;
font-size:10px;
color:#656565;
border-top :1px dotted #cccccc;
margin:0px;
}
/*投稿者名の部分*/
.CommentUserName{
margin-left: 0px;
}
/*投稿者のホームページへのリンク部分*/
.CommentURL{
margin-left: 0px;
}
/*投稿された時間が記載されている部分*/
.CommentWriteDate{
margin-left: 0px;
}
/*コメント編集へのリンク部分*/
.CommentEdit{
margin-left: 0px;
margin-right:10px;
}
/*コメントを投稿するフォーム全体の設定*/
.CommentFormBlock{
margin-bottom:20px;
padding-top:10px ;
padding-right:10px ;
padding-bottom:10px ;
padding-left:10px ;
}
/*コメントフォーム用テーブル*/
.CommentFormTable{
background-color:#ffffff;
margin:0px auto;
}
/*コメントフォームTHタグ設定*/
.CommentFormTh{
padding-top:5px;
text-align:right;
background-color:#f5f5f5;
padding-right:5px ;
padding-bottom:5px ;
padding-left:5px ;
border-style:dashed;
font-size:12px;
color:#656565;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-color:#cccccc;
}
/*コメントフォームTDタグ設定*/
.CommentFormTd{
padding-top:5px;
text-align:left;
background-color:#f5f5f5;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
border-style:dashed;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-color:#cccccc;
}
/*コメントフォーム送信ボタンのTDタグ設定*/
.CommentFormSubmit{
text-align:center;
background-color:#f5f5f5;
border-style:dashed;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-color:#cccccc;
}
/*inputタグやtextareaの設定*/
input.CommentForms{
background-color:#ffffff;
border-style:double;
border-top-width:3px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:3px;
border-color:#cccccc;
width:200px;
}
textarea.CommentForms{
background-color:#ffffff;
border-style:double;
border-top-width:3px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:3px;
border-color:#cccccc;
width:350px;
height:300px;
}
/*投稿者や投稿時間などが表示されている部分のリンク*/
.CommentFooter a:link {
color:#656565;
text-decoration:underline;
}
.CommentFooter a:visited {
color:#656565;
text-decoration:underline;
}
.CommentFooter a:hover{
color:#cccccc;
text-decoration:none;
}
.CommentFooter a:active {
color:#cccccc;
text-decoration:none;
}

もう一箇所「コメント -> 管理者返信部分デザイン」の指定はこうなりました。

.CommentResBlock {
margin:0px;
padding:20px;
background-color:#ffffff;
border-left:1px dotted #cccccc;
border-right:1px dotted #cccccc;
border-bottom :1px dotted #cccccc;
}

.CommentResBox {
margin:0px 0px 0px 30px;
padding:10px;
background-color:#f5f5f5;
}

.CommentResTitle {
font-size:13px;
font-weight:bold;
border-bottom:1px dashed #cccccc;
}

.CommentResText {
padding:10px 0px 0px 10px;
}

.CommentResFooter {
text-align:right;
margin:5px 0;
border-top:1px dashed #cccccc;
font-size:10px;
}

これを実際に見てみるとこのようになります。


注：HTMLを少し変えてあります。

ここと同じように見えるようにトラックバック部分も編集。

指定はもうコメントとほぼ同じなので省略。

これで後はカレンダーだけです。

ここまでやってきて思ったこと。
編集機能、無理に使わないほうが早くできるそう。
それとHTML4.01はなれてなくて使いにくい・・・

今度作るときは慣れているXHTML1.0で作ることにしようっと。