人気ブログランキング | 話題のタグを見る
2008年 09月 27日
コメント欄の作成について
コメント欄について質問がありましたので、わかる範囲で書きます。

<画像の作成>
コメント欄上部に表示したい画像を作成しておきます。
また、トラックバック部分にも画像を貼り付けたい場合はそれも作成してください。
<画像のアップ>
作成した画像をスキン編集部分にある「マイイメージアカウントにイメージ登録」部分から登録してください。
登録した画像のURLをメモ帳などにコピーしておいてください。

<スキン編集>
スキン変更で、CSSの部分をテキストエディタにコピーしてください。

その中のコメント欄部分とトラックバック部分を編集します。
(元に戻せるようにコピーをとっておくことが重要です)
コメント欄とトラックバック部分に当たるのは以下の部分です。
DIV.COMMENT コメント全体部分
DIV.COMMENT_BODY コメント表示欄
DIV.COMMENT_TAIL commented by...欄について
DIV.COMMENT_INPUT コメント入力欄について
DIV.COMMENT_LINE コメント欄全体について
DIV.TRACK_TOP trackback情報部分


コメント欄の背景画像表示はDIV.COMMENT_BODY部分を編集していれます。
トラックバックの背景画像表示はDIV.TRACK_TOPを編集します。


編集内容については、下の枠欄に各部の説明をつけた私のCSSの該当部分を貼り付けておきますので、これの必要な部分をコピーしてを好きなようにいじってください。


CSS

/* ---------------コメント全体部分--------------- */
DIV.COMMENT {
MARGIN-TOP : 10PX;/* ---記事とコメント全体部分との間隔です--- */
MARGIN-BOTTOM : 10PX;/* ---コメント全体部分と下の部分(次の記事もしくは<前のページなどとの距離です--- */
BORDER : 2PX #696969 DOTTED;/* ---------------コメント全体部分の枠線のサイズ・色・線種です--------------- */
BACKGROUND : #000000 url(http://pds.exblog.jp/pds/1/200802/16/30/comment2.jpg) no-repeat;/* ---コメント全体部分の背景画像です--- */
COLOR : #000000;/* ---コメント全体部分の文字色です--- */
PADDING : 20PX;/* ---コメント全体部分(枠で囲まれた部分と記事全体部分の幅との間隔です--- */
PADDING-TOP : 190PX;/* ---コメント欄上部のサイズ(ここに画像を入れるためにサイズを調整してください)--- */
}

/* ---------------コメント表示欄について--------------- */
DIV.COMMENT_BODY {
BACKGROUND-COLOR : #FFFFFF;/* ---コメント表示欄の背景色です--- */
BORDER-TOP : 1PX DOTTED #999966;/* ---コメント表示欄の縁(上)の線種と色です--- */
BORDER-BOTTOM : 1PX DOTTED #999966;/* ---コメント表示欄の縁(下)の線種と色です--- */
BORDER-LEFT : 1PX DOTTED #FFFFFF;/* ---コメント表示欄の縁(左)の線種と色です--- */
BORDER-RIGHT : 1PX DOTTED #FFFFFF;/* ---コメント表示欄の縁(右)の線種と色です--- */
MARGIN-TOP : 5PX;/* ---commented by...とコメント表示欄との間隔です--- */
LINE-HEIGHT : 100%;/* ---コメント表示欄の行間隔です。100以下にすると文字が重なります。行間隔を広げたいときは100以上を指定--- */
PADDING : 5PX ; BACKGROUND : #F8F8FF;/* ---コメント表示欄の縁から文字との間隔(空き)です--- */
COLOR : #000;/* ----------コメント表示欄の文字色です---------- */
}

/* ---------------commented by...欄について--------------- */
DIV.COMMENT_TAIL {
MARGIN-TOP : 10PX;/* ---コメントとコメントの間隔です。(コメント上部の空き)--- */
MARGIN-BOTTOM : 5PX;/* ---commented by...とコメント表示欄との間隔です(DIV.COMMENT_BODY部との合計になります)--- */
BORDER : 1PX #999966 SOLID;/* ---commented by...欄の縁の線種と色です--- */
BACKGROUND-COLOR : #005555;/* ---commented by...欄の背景色です--- */
FONT-FAMILY : VERDANA, TAHOMA;/* ---commented by...欄の文字種です--- */
FONT-SIZE : 8PT;/* ---commented by...欄の文字サイズです--- */
COLOR : #99cccc;/* ---commented by...欄の文字色です--- */
}

/* ---------------コメント入力欄について(入力欄上のダブルから送信ボタンまで含みます)--------------- */
DIV.COMMENT_INPUT {
HEIGHT : 20EM;/* ---コメント欄の高さです--- */
FONT-SIZE : 11PT;/* ---コメント表示欄の文字サイズです--- */
MARGIN-TOP : 15PX;/* ---コメント表示欄とコメント表示欄の間隔です--- */
BORDER-TOP : 3PX #AAA DOUBLE;/* ---コメント表示欄上部にある線種です--- */
PADDING-TOP : 5PX;/*---コメント表示欄上部の線とコメント入力欄の間隔です--- */
MARGIN-BOTTOM : 2PX;/* ---コメント欄下部の高さです。こことHEIGHTで調整してください--- */
}

/* ---------------コメント欄全体について--------------- */
DIV.COMMENT_LINE {
BORDER-TOP : 3PX #AAA DOUBLE;/* ---トラックバック表示欄上およびコメント表示欄上の線種と色、サイズです。--- */
MARGIN : 10PX 0PX 15PX;/* ----------線の上部・横・下部の間隔です---------- */
}

/* ----------trackback情報部分---------- */
DIV.TRACK_TOP {
LINE-HEIGHT : 170%;/* ---トラックバックURL トラックバックするが表示されている部分の大きさです--- */
COLOR : #999966;/* ---トラックバックURL:・・・部分の文字色です--- */
BACKGROUND : #FFFFFF;/* ---背景色です--- */
BORDER-TOP : 2PX DOTTED #999966;/* ---トラックバックURL トラックバックするが表示されている部分の枠線(上部)の線種・サイズ・色です--- */
BORDER-BOTTOM : 2PX DOTTED #999966;/* ---トラックバックURL トラックバックするが表示されている部分の枠線(下部)の線種・サイズ・色です--- */
BORDER-LEFT : 2PX DOTTED #999966;/* ---トラックバックURL トラックバックするが表示されている部分の枠線(左部)の線種・サイズ・色です--- */
BORDER-RIGHT : 2PX DOTTED #999966;/* ---トラックバックURL トラックバックするが表示されている部分の枠線(右部)の線種・サイズ・色です--- */
BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/1/200802/16/30/comment3.jpg);/* ---トラックバックURL トラックバックするが表示されている部分背景画像です--- */
BACKGROUND-POSITION:100% 100%;/* ---トラックバックURL トラックバックするが表示されている部分背景画像の拡大率です--- */
BACKGROUND-REPEAT:NO-REPEAT;}/* ---トラックバックURL トラックバックするが表示されている部分の背景画像をリピートするかどうかです--- */
}

該当するCSSを変更したら、それをオリジナルのCSSの該当部分と差し替えてください。
それをコピーアンドペーストしてスキン編集のCSS編集部分と差し替えます。
/* -----と---- */に囲まれた部分は残しておいても支障はありません。

あまり説明になっていないかもしれませんが、チャレンジしてみてください。
オリジナルのCSSのコピーを保存していれば元に戻せますので怖いものなしです。
わからなければコメント欄に質問を入れておいてください。
(わかる範囲でしか答えられませんけど)

追伸:Firefoxというブラウザーをインストールして、Firebugというアドオンをダウンロードして使うと、CSSの何を変更するとどう変わるかをリアルタイムで表示することができて便利ですよ。設定が書き換わるわけではないので心配もありません


by buebue | 2008-09-27 00:39 | ブログツール | Comments(4)
Commented by pretty-bacchus at 2008-09-27 01:51
おしそがしいことでしょうに、詳しくせつめいしていただきありがとうございました。
明日チャレンジしてみます。

Commented at 2008-09-27 04:52
ブログの持ち主だけに見える非公開コメントです。
Commented by buebue at 2008-09-27 11:00
pretty-bacchusさん
ちょっとごちゃごちゃ書きすぎたかもしれません。
トライしてみてください。
Commented by buebue at 2008-09-27 11:00
鍵コメさん、もっとシンプルな記事にして再アップしました。


<< コメント欄の作成について2      9/22 彼岸花 >>