« 第11回:記事とフッターの間に区切り線(画像)を入れてみよう | トップページ | 第13回:サイドバーをリストごとに折り畳んでみよう »

2006/02/25

第12回:コメント欄の幅を調整してみよう

今回は今までのカスタマイズよりちょっと地味です(笑)
コメント欄の大きさ(幅)を調整するカスタマイズ。
殆ど自分の覚え書き用です。

先日からここのコメント欄がサイドバーに食い込んでしまってきれいに表示されないのが非常に気になっていました。
そこで調整しようとあちこち触っていたのですがなかなか直らず。
う~む…と悩みながらまたGoogleで検索してみたところ、 発見しました!
同じココログ内の 「FUKIIKUNI_BLOG」様で昨年8月にエントリーされた 「ココログカスタマイズ(2) コメントツリー化&コメント欄を広く」のエントリー。
こちらに記述してあったCSSを参考に編集したところ、無事サイドバーによる表示切れが解消されました。
ありがとうございます(^^)

以下、「FUKIIKUNI_BLOG」様の該当記事を読めば判ることですが念のため。

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください
    ※カスタムテンプレートの作り方は下記の記事を参照して下さい。
    第3回: カスタムテンプレートを作ってみよう
  2. 「編集」画面のCSS記述欄に

    #comment-text textarea, #comment-text-field textarea
    {
    width: ■■■px;
    }

    を全て半角英数で記述する。
    ■■■には記事表示列の幅に合わせて数値を入力して下さい。
    ※ここの場合、記事表示列が400pxなので、コメント欄は350pxに設定しました。
  3. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。

ここがポイント

  • 高さも調整したい場合は、上記のCSSに

    height: ■■■px;

    を追加すればOKです。

 

お世話になりました

■素材サイト 「PRISM」様<記事内のボタン素材>
「FUKIIKUNI_BLOG」


<関連記事>
第15回:コメント欄のスクロールバーの色を変えてみよう
第16回:コメント欄の背景色を変えてみよう


*この記事にコメントを書く*


|

« 第11回:記事とフッターの間に区切り線(画像)を入れてみよう | トップページ | 第13回:サイドバーをリストごとに折り畳んでみよう »

カスタマイズ」カテゴリの記事

コメント欄」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

takoさんこんにちは。。
こちらの記事をココログのママ友さんに紹介させていただきました。
カスタムCCS編集は、(すべてを設定しなくても)その部分だけを入れれば反映するんですか?って今さらな質問ですが、その辺がわからなっかったので、聞かれた人にも私はこうしてるよ。。と書いたもののちゃんと答えられませんでした。。
なので、またまたこちらにお世話になりました。。勝手に紹介してしまってすみませんでした。
よろしくお願いします。

投稿: sacchi | 2006/03/07 09:52

■sacchiさん
こんにちは。

お友だちにご紹介頂いた件、ご連絡ありがとうございました。
ちゃんと疑問が解決出来る記事になっていればいいのですが^^;

sacchiさんのブログは文字がハッキリクッキリして見易くなりましたね(^^)
コメントもたくさん付いていて交流も活発で感心してしまいます。

これからも楽しんでブログを続けてくださいね。

投稿: tako→sacchiさん | 2006/03/07 18:57

 こんにちは!
テンプレートを変えてから、コメント欄が切れてるのが気になってたんですが、
sacchiさんにこの記事を紹介して貰って設定しました!
おかげで気になってたことが解消出来ました。
ありがとうございました(⌒ー⌒)

投稿: シナモン | 2006/03/23 14:13

ずっとコメント欄が切れてしまっていて悩んでいました。
こちらの記事を見ながら実行して解決しました♪

他のカスタマイズ方法も参考にさせていただきました☆


投稿: かりん | 2006/05/28 03:12

■かりんさん
こんにちは。コメントありがとうございます。
記事にも書いたように自分の覚え書き的な内容だったのですが、お役に立てたのなら何よりです。

リンクもして下さっているんですね。ありがとうございます(^^)
私も「BlogPeople」に登録させて頂きました。
今後とも宜しくお願いします。

投稿: tako→かりんさん | 2006/05/28 10:32

こんにちわ。
この方法でやってみたのですが、コメントの入力欄の幅は調整できたのですが、コメントしてあるところは 記事の幅と一緒のままです。
どうしたらいいですか?

投稿: tomo☆ | 2007/09/03 21:47

■tomo☆さん
こんにちは。コメントありがとうございます。

ブログ拝見しましたが、コメント欄(送信したコメントが表示される部分ですよね?)の幅、ちゃんと変わっているようですね。
(記事欄よりも随分狭くなっています)
その後、成功したということで宜しいでしょうか。

投稿: tako→tomo☆さん | 2007/09/03 23:06

わたしのPCでは コメント表示欄が見えなくなってしまうんです。
絵文字だけ表示されて、コメント欄の背景も真っ黒で・・・

投稿: tomo☆ | 2007/09/03 23:31

■tomo☆さん
こんにちは。

う~ん…さっきまであった「comment-body」というクラス(class)が何故か消えてしまってますね^^;
(ごめんなさい、理由は私にも判りません)

その外側にある「comment-content」は残ってますので、
今まで設定してあったセレクタ「comment-body」を
「comment-content」に変更してみて下さい。
多分大丈夫ではないかと思います。
(クラスですので、セレクターの前にピリオド(.)を付けるのをお忘れなく。

.comment-content{
width:400px;
}

という感じです。

投稿: tako→tomo☆さん | 2007/09/03 23:51

『comment-contennt』に変えてやってみました。
コメント表示欄の画像も コメントも出たのですが、フッターが枠の中に入ってしまいます。。。

投稿: tomo☆ | 2007/09/04 01:06

■tomo☆さん

>フッターが枠の中に入ってしまいます

「posted」は「.comment-content」の内側にありますので、そうなってしまうのは仕方ないですね。
フッター画像を指定している「.content p posted」に別途背景色(黒)を設定すれば、画像が乗っている部分の色は変わると思いますが、画像の下側は背景画像が残ってしまうと思います。

ところで夕べ「comment-body」が消えたという話をしましたが、ちょっと試してみたところ、右サイドバーのテンプレートにするとこういったHTMLに変わってしまうようです。
(理由は判りませんが…)
ですので、左サイドバー(または両サイドバー)のテンプレートに戻せば「comment-body」が復活して、以前のCSSで行けると思います。

どうしてもフッターの画像を活かしたいのであれば、こちらの方法を取るのが簡単かつ確実ではないかと思います。

今のテンプレートのままで調整する方法は、私にはこれ以上思いつかないです。ごめんなさい。

投稿: tako→tomo☆さん | 2007/09/04 07:47

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/828094

この記事へのトラックバック一覧です: 第12回:コメント欄の幅を調整してみよう:

« 第11回:記事とフッターの間に区切り線(画像)を入れてみよう | トップページ | 第13回:サイドバーをリストごとに折り畳んでみよう »