FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

コメント記入時のフォントサイズや窓の幅を設定する

コメント記入時のフォントサイズや窓の幅を設定するためには、以下をスタイルシートの末尾に加えてください。

textarea #comment {
font-size: 100%; /* フォントサイズ */
width:80%; /* 窓の幅設定 */
}


各数値はお好みにあわせて設定してください。
関連記事
[ 8338 ]
いつもお世話になっております
今lightframeを使わせていただいてますが、
コメント欄のカスタマイズについてお伺いしたく書き込みました。

現在のコメントの仕様を某掲示板のように簡素化させたいと思っています。
タイトルにナンバリングと名前、URLを名前にリンクさせ、
ボディは外枠線は無し、コメント投稿欄は枠線で囲うスタイルにしたいのですが、
現状のCSSなどの変更点を教えてください。
[ 2010/02/11 23:58 ] [ 編集 ]
[ 8353 ] 人参さんへ
某掲示板ていうのは2chを指してますか?、そもそもそこが違うと話がずれて細かいカスタマイズ出来ないので・・・(苦笑)。

でも文面から察するに、多分そうであろうと勝手に予測してカスタマイズ試して見ました(lightframe_whiteで)。

ウチの既存記事で試しましたがこんな感じになります。
http://blog-imgs-30.fc2.com/y/a/s/yassee/20100213-2.jpg

結構手を加えるので必ず元のバックアップを取ってから自己責任でお願いしますm(__)m。

まずテンプレートの<!--▼コメント表示▼--> の下、
<!--comment-->で始まる箇所から

<!--/comment-->
<!--▲コメント表示▲-->
までのテンプレートを以下のように変更します。

<!--comment-->

<a name="comment<%comment_no>" id="comment<%comment_no>"></a>
<div class="comment_title"><%comment_no> 名前:<script type="text/javascript">
a="<%comment_url>";
if (a!="") { document.write('<a href="'+a+'" target="_blank"><%comment_name></a>') } else {
document.write("<%comment_name>"); }
</script>
<noscript>
<a href="<%comment_url>" target="_blank"><%comment_name></a>
</noscript>:<%comment_year>/<%comment_month>/<%comment_day>(<%comment_wayoubi>) <%comment_hour>:<%comment_minute>:<%comment_second> [<a href="<%comment_edit_link>" title="コメントを編集する">編集</a>]</div>
<div class="comment_body">
<div class="comment_text"><%comment_body></div>
<div class="comment_navi">


</div><!--/comment_navi-->
</div><!--/commnet_body-->

<!--/comment-->


[編集]っていうのがいらないなら [<a href="<%comment_edit_link>" title="コメントを編集する">編集</a>]を削ればいいです。
ちなみに題名は表示しないように抜きましたけど必要なら<%comment_title>を入れたいところに書き加えればOK。
それとオマケで曜日と秒も加えておきました。

スタイルシートは▼ コメント ▼ からの以下の部分を書き換えました。

.comment_outline {
border:#666666 1px solid; /* 外枠の/色太さ/実線 */
background-color:#FFFFFF; /* 背景色 */
text-align:left; /* 左寄せ */
margin-bottom:20px; /* 次のコメントまでの間隔 */
}
.comment_title {
font-size:10pt; /* 文字サイズ(タイトル) */
color:#000000; /* 文字色 (タイトル) */
font-weight:bold; /* 太字 (タイトル) */
background-color:#ffffff; /* 背景色 (タイトル) */
text-align:left; /* 左寄せ (タイトル) */
border:#ffffff 0px solid; /* 枠 (タイトル) */
padding:5px 20px;
}
.comment_body {
font-size:10pt; /* 文字サイズ(コメント本文) */
color:#000000; /* 文字色 (コメント本文) */
border-top: #e0e0e0 0px solid; /* 枠(上) (コメント本文) */
border-left: #666666 0px solid; /* 枠(上) (コメント本文) */
border-right: #666666 0px solid; /* 枠(上) (コメント本文) */
border-bottom:#666666 0px solid; /* 枠(上) (コメント本文) */
}


コメント入力側はいじってません。

[ 2010/02/13 03:43 ] [ 編集 ]
[ 8372 ] > 人参さん、やっすぃぃぃーさん
> 人参さん
なんとそのやり方をやっすぃぃぃーさんが紹介してくれました。

> やっすぃぃぃーさん
ここまでしてくれるとは本当にありがとうございます m(__)m
この情報も記事として紹介させてください。
[ 2010/02/13 22:57 ] [ 編集 ]
[ 8383 ] いたおさんへ
おぉ、、記事にまとめるのですか・・。

いたおさんのテンプレはコードが読みやすいのでカスタマイズは非常にやりやすかったです(^^)。

ご利用されている皆さんも自分でいろいろいじってみることをオススメします。私もそれで覚えました。
[ 2010/02/14 00:08 ] [ 編集 ]
[ 8385 ]
やっすぃぃぃーさん、スクショまでわざわざ作っていただいて
ありがとうございます。思った通りの感じです。

相談前にデフォのテンプレとCSSいじってみたのですが、
タイトル部分が2段になってしまって悩んでました。

また質問になってすみませんが、ナンバリングはその記事ごとに1から、といううふうにはできるのでしょうか?

いたおさんへ
最初のプラグインの折りたたみの件ではお世話になりました。
[ 2010/02/14 00:45 ] [ 編集 ]
[ 8389 ] > やっすぃぃぃーさん、人参さん
<ol>を使ったリスト構造ならば記事ごとの連番も可能です。
やっすぃぃぃーさんが教えてくれたものとは構造が変わってきてしまいますが、時間ができたら記事にするのでもうしばらくお待ちください。
[ 2010/02/14 01:22 ] [ 編集 ]
[ 8407 ] 人参さん、いたおさん
なかなかうまくいかずハマりました(苦笑)。
でも基本的な構造を変えずにできました。変えたところだけ色つけておきます。

<ol>
<!--comment-->

<a name="comment<%comment_no>" id="comment<%comment_no>"></a>
<div class="comment_title"><li> 名前:<script type="text/javascript">
a="<%comment_url>";
if (a!="") { document.write('<a href="'+a+'" target="_blank"><%comment_name></a>') } else {
document.write("<%comment_name>"); }
</script>
<noscript>
<a href="<%comment_url>" target="_blank"><%comment_name></a>
</noscript>:<%comment_year>/<%comment_month> /<%comment_day>(<%comment_wayoubi>) <%comment_hour>:<%comment_minute>:<%comment_second> [<a href="<%comment_edit_link>" title="コメントを編集する">編集</a>]</div>
<div class="comment_body">
<div class="comment_text"><%comment_body></div>
</div><!--/commnet_body-->
</li>
<!--/comment-->
</ol>

※いたおさんへ

<!--comment--><!--/comment-->エリア外に<ol>を置くのがミソです。イジくっても番号が増えていかずこれを見つけるまでハマってしまいました(+_+)。

[ 2010/02/14 20:01 ] [ 編集 ]
[ 8515 ] やっすぃぃぃー さん
またもやありがとうございました。
テンプレとCSSをいじってみたのですが
何故かスクショ通りにはならず、
いじっては戻しを繰り返しています。
もうすこし自分なりにいじってみますね。
[ 2010/02/21 23:42 ] [ 編集 ]
[ 8516 ] 人参さんへ
試行錯誤中でしたか・・。いろいろいじってみると次第に覚えていきますし今後に必ず活きますからがんばってください。

また具体的な質問があればわかる範囲でフォローしますので。
[ 2010/02/22 00:13 ] [ 編集 ]
[ 8760 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/11/11 14:15 ] [ 編集 ]
[ 8920 ]
やっすぃぃぃーさんの某掲示板風設定を使わせていただきました。
ありがとうございます。
ただ、

<ol>

の部分を

<ol style="padding: 0; margin:0;">

といった感じで指定しておかないと左に変な空白ができてしまいますね。
自分はかなりこの部分で手こずってしまいました。
[ 2011/12/19 19:54 ] [ 編集 ]
[ 8923 ] > [ 8920 ]さん
ありがとうございます。そのような有用な情報をコメントに残してもらえると皆で情報共有できるので助かります。

やっすぃぃぃー さんにもとても助けられました。
[ 2011/12/19 23:59 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る