送信されたコメントの設定を変える

【送信されたコメントの設定を変える】
送信されたコメントの設定を変えるには
/*-----Entry-----*/の
/* Comments */にある

.each-comment {
margin:20px 0;
clear:both;
}
この部分を追加・変更します。

＜初期状態＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



＜①送信されたコメントに枠線をつける＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい


枠線をつけるには

.each-comment {
margin:20px 0;
clear:both;
border:枠線の種類　枠線の太さ　枠線の色;
}
赤字部分を追加してください。
上図の例は
border:dotted 4px orange;です。

枠線のタイプ・色・太さの間には
半角スペースが入ります。
詳しいボーダーの種類については
記事「ボーダー1」「ボーダー2」を
ご覧ください。

＜②送信されたコメントに背景色をつける＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



背景色をつけるには

.each-comment {
margin:20px 0;
clear:both;
background:#------;
}
赤字部分を追加してください
＃------部分にお好みの数字
または色名(色の場合は＃不要)を指定ください
（上記の例では、色名「wheat」を使用しています。）
6ケタの数字については記事「色の設定について」の
項目をご覧ください。


＜③送信されたコメントに背景画像をつける＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



背景画像を使用するには

.each-comment {
margin:20px 0;
clear:both;
}
この中に、背景画像で使用したい
アップロード済みのファイルを選択します。
するとbackground:url("------------") no-repeat;という記述になります。
画像の大きさにもよりますが、小さい画像をご使用の際は
no-repeatをrepeatに変更すると全範囲カバーできます。


＜④送信されたコメントの文字を斜体にする＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



コメント内容を斜体にするには

.each-comment {
margin:20px 0;
clear:both;
font-style:italic;
}
赤字部分を追加してください。


＜⑤送信されたコメントのフォントを変える＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



コメント内容のフォントを変えるには

.each-comment {
margin:20px 0;
clear:both;
font-family:'使用したいフォント';
}
赤字部分を追加してください。
上図ではフォント「メイリオ」を使用しています。
例
.each-comment {
・・・・・
font-family;"メイリオ";
}

(コメント内容にフォント「メイリオ」;を適用)
フォント名が分からない時は
エクセルやワードからコピーして下さい。
（全角空白とか紛らわしいものがあるので
手打ちはやめた方がいいです。）

見る側のパソコンにインストールされていない
フォントは無視されますのでご注意ください。


＜⑥送信されたコメントの文字の太さを変える＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



コメント内容のフォントの太さを変えるには

.each-comment {
margin:20px 0;
clear:both;
font-weight:★;
}
赤字部分を追加してください。
上図では★＝900で設定しています。

＜⑦送信されたコメントの文字の大きさを変える＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



コメント内容のフォントの大きさを変えるには

.each-comment {
margin:20px 0;
clear:both;
font-size:★:
}
赤字部分を追加してください。
上図の例では★＝12ptで設定しています。
★＝
サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px)
または、larger,smaller,％
またはxx-large,x-large,large,medium,small,x-small,xx-small


＜⑧送信されたコメントの文字の色を変える＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



コメント内容のフォントの色を変えるには

.each-comment {
margin:20px 0;
clear:both;
color:#------;
}
赤字部分を追加してください。
＃------部分にお好みの数字
または色名(色の場合は＃不要)を指定ください
（上記の例では、色名「greent」を使用しています。）
6ケタの数字については記事「色の設定について」の
項目をご覧ください。

＜①＋②＋⑤＋⑥＋⑦+⑧＞

コメント


時が経つほどに現実を知っても
はかない夢を抱いていたい



今までの複合です。

.each-comment {
margin:20px 0;
clear:both;
border:dotted 4px orange;
background:wheat;
font-weight:500;
font-size:12pt;
font-family:'メイリオ';
color:green;
}
今までの要素を継ぎ足していけば大丈夫です。

タグ：CSS so-net ブログ カスタマイズ コメント

コメント 1

このような素晴らしい post.waiting について。
by coach7store (2011-02-22 21:40)