コメントの文字を変えよう！ ＣＳＳ入門－５
コメントの文字を変えるにはＣＳＳのだいぶ下のほうの、
のコメントに関する設定を変更します
/*comment_module*/
のコメントに関する設定を変更します
| /*comment_module*/ | ||
| #comment_module{ | ||
| padding-top: 5px; | ||
| border-top: 1px solid #999999; | ||
| } | ||
| #comment_module each_comment { | ← | ここがコメントの文字の設定。 |
| margin-bottom: 10px; | ← | |
| } | ← |
さて、ここでコメントの文字色、サイズ等を変更するんですが、文字色、サイズの文が入っていませんね。
そんなときは、「ないのなら自分で書く！」というわけで、今まで設定のと同じ用意、色の設定の文、サイズの設定の文を追加しちゃいましょう。
| #comment_module .each_comment { | ||
| margin-bottom: 10px; | ||
| font-size: 15px; | ← | 文字サイズの設定 |
| color: #FF3300; | ← | 文字色の設定 |
| line-height: 200%; | ← | 文字間の隔設定 |
| } | ||
上のように3行追加してみます。
そうすると、文字サイズ、文字色、文字間隔を設定することができますね。
必ず３行追加する必要はありません。サイズだけを変更したい場合は、「font-size: 15px;」だけを書いてください。
プレビューで確認しながら、好みの色、文字サイズ、文字間隔になればできあがりです。
/*comment_module*/
の中には、設定がたくさんありますが、役に立ちそうなものをご紹介します。設定したい部分があれば、数値を変更したり、文を追加したりして変更します。
| ☆ 各コメントの投稿者、時間の文字設定 | ||
| #comment_module .comment_footer { | ||
| margin-top: 5px; | ※ サイズ設定の文がないので、サイズを変更する場合は、文を追加してください。 （色設定も書いてないかもしれません。） ※ リンクされている名前の色は変わりません！ | |
| padding-top: 5px; | ||
| border-top: 1px dashed #000000; | ||
| color: #000000; | ||
| } | ||
| ☆ コメントフォーム脇の文字の設定。 | ||
| #comment_module label{ | ※ 名前、ＵＲＬ、タイトル、コメントの文字を変更できます。 | |
| display: block; | ||
| float: left; | ||
| width: 70px; | ※ 色もサイズも設定の文がないので、変更する場合は追記しましょう。 | |
| text-align: right; | ||
| } | ||
| ☆ コメントフォームの体裁の設定 | ||
| #f_name,#f_url,#f_title,#f_com{ | ||
| display:inline; | ||
| width: 250px; | ← | 幅を調節できます。 |
| margin-bottom: 3px; | ||
| margin-left: 6px; | ||
| } | ||