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

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

コメント欄の幅を変える

コメント欄の幅を変える方法を紹介します。
サイト幅を狭くした場合、コメント欄も狭くしなければコメント投稿画面で崩れてしまうことがあります。

HTMLを編集します。

～
<textarea id="comment" cols="55" rows="8" name="comment[body]"></textarea><br />
～



～
<textarea id="comment" cols="55" rows="8" name="edit[body]"><%edit_body></textarea><br />
～

cols="55"の数値をお好みのサイズになるように設定してください。

関連記事

[ 2006/11/18 23:29 ] カスタマイズ共通カスタマイズ | TB(0) | CM(17)

≪ 引用部分(blockquote)のデザインを変える | HOME | プラグインの背景を画像にする（lightframe） ≫

[ 805 ] コメント欄の幅を変える

いたお様
早速のご返事、本当にありがとうございました。
実は、いたお様のテンプレートが気に入って、何種類か挑戦したものの、どうしてもコメント欄が崩れてしまい、幅広(デフォルト)のままでお借りしようと思っていました。
これでスッキリしました。
お気に入りのテンプレートをお借りできて、さらに丁寧なアドバイスまでいただき、本当にありがとうございました。

[ 2006/11/19 08:43 ] [ 編集 ]

[ 823 ] > かずじぃさん

こんばんは、かずじぃさん。
サイト幅を狭くしてもコメント幅はそれに合わせて狭くならないので、製作側は予めコメント欄を小さめで作っておくべきだと気づきました。
こちらこそユーザから学ぶことが多いです。有難う御座います。

[ 2006/11/28 23:24 ] [ 編集 ]

[ 836 ] 突然ですみませんが

コメント欄のサイズ変更がわからなくて検索した結果
こちらにたどり着きました。
とてもわかりやすく解説してくださっていたので、超初心者の私でもすぐに好みのサイズに変更することが出来ました。
本当にありがとうございました!!

[ 2006/12/02 09:47 ] [ 編集 ]

[ 841 ] > mokaさん

こんばんは、mokaさん。
お役に立てて私も嬉しいです。ちょっと最近なかなか更新できていないのですが、これからも役立つ記事を書けるように頑張ります。

[ 2006/12/03 21:41 ] [ 編集 ]

[ 1551 ] トラックバック

初めまして。sunnyを使わせて頂いております。
大変気に入っております。

サイトの幅を変更したいと考えてるいるのですが、
どうもうまくいきません。

コメント覧も合わせて幅を変える事は
わかったのですが、トラックバックはどうでしょうか？
トラックバックのURLが表示されるページではどうしても
他のページの幅と異なってしまいます。

お時間がある時に教えて頂けましたら幸いでございます。

[ 2007/03/27 18:48 ] [ 編集 ]

[ 1559 ] > ガイドさん

ガイドさんが使用されているテンプレート「sunny」の作者は私ではくまるぼろらいとさんですよ＾＾；

[ 2007/03/28 01:38 ] [ 編集 ]

[ 1592 ] すみませんでした。

FC2ブログのテンプレート工房いたお様

大変失礼しました。(^^;)

[ 2007/03/29 15:58 ] [ 編集 ]

[ 1620 ] > ガイドさん

いえいえお気になさらずに＾＾
テンプレート職人さんは沢山いますから。

[ 2007/04/03 01:11 ] [ 編集 ]

[ 2836 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/10/05 22:24 ] [ 編集 ]

[ 6158 ] 解決しました＾＾

初めまして。テンプレート工房様

幅を変更したらコメントの幅が広いままで
しばらく悩んでたんですが解決することが出来ました
説明も分かりやすくとても使いやすかったです
またお世話になりますね＾＾

[ 2009/09/22 14:21 ] [ 編集 ]

[ 6164 ] > kazuoさん

お役に立てて良かったです＾＾
ちなみにこのような方法もあります。

コメント入力欄の幅設定
http://10plate.blog44.fc2.com/blog-entry-289.html

[ 2009/09/22 20:16 ] [ 編集 ]

[ 8473 ] お世話になります

お聞きしたいのですが、コメント欄のタイトルバーを消す事は可能でしょうか？１つ１つのコメントにタイトルバーを表示するのではなく、一つの枠の中でコメントを表示させたいのです。

説明が下手ですみません…。

[ 2010/02/19 17:49 ] [ 編集 ]

[ 8475 ] ネドさん

lightframe_whiteで試して見ました。こんな感じでいいのでしょうか？基本構造は変えずにやってみました。

http://blog-imgs-30.fc2.com/y/a/s/yassee/20100219.jpg

テンプレートのの下の部分


<div class="comment_outline">
　～略～
</div>


この<div>タグを外に出します。

<div class="comment_outline">

　～略～

</div>

スタイルシートは以下部分
/********************************************* ▼ コメント ▼ */
.comment_outline {
border:#000000 2px solid; /* 外枠の/色太さ/実線 */
background-color:#FFFFFF; /* 背景色 */
text-align:left; /* 左寄せ */
margin-bottom:20px; /* 次のコメントまでの間隔 */
}
.comment_title {
font-size:10pt; /* 文字サイズ(タイトル) */
color:#555555; /* 文字色 (タイトル) */
font-weight:bold; /* 太字 (タイトル) */
background-color:#ffffff; /* 背景色 (タイトル) */
text-align:left; /* 左寄せ (タイトル) */
border:#666666 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/19 18:56 ] [ 編集 ]

[ 8476 ] [ 8473 ] ネドさんへ

の間にある
<div class="comment_title"><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a></div>
を削除すればいいと思いますが。

から
迄の間のコメント関係を<div></div>でくくって適当なクラス名でcss書けば大丈夫だと思います。

[ 2010/02/19 19:05 ] [ 編集 ]

[ 8477 ] sakuraiさん

ご指摘の<div class="comment_title">～</div>まで全部削ってしまうとコメントタイトルが表示されなくなってしまいます。しかもa nameも削るとダイレクトにコメントにジャンプできなくなってしまいます。

また<div>～</div>でくくっても現在表示されている枠部分のスタイルシートに手を加えないと枠は表示されたままです。

私は枠を消したいという質問の意図だと理解してフォローしましたが・・、違うのかな？。

[ 2010/02/19 19:38 ] [ 編集 ]

[ 8479 ] そうですね。

すいませんでした。ここのテンプレートで考えないとダメでした。

「タイトルバーを表示するのではなく」を
「タイトルバーを表示しないで」と読み違えました。
しかし、それ以前の「タイトルバーを消す」が引っかかる…

[ 2010/02/19 20:25 ] [ 編集 ]

[ 8480 ] ありがとうございます

やっすぃぃぃーさんSakuraiさん、ありがとうございます。
お二人の書いていただいたタグを参考に自分なりに編集してみるとうまく出来ました！ありがとうございました！

[ 2010/02/19 21:56 ] [ 編集 ]

コメントの投稿