コメント欄の文字サイズ変更
2008.01.24 |Category …サンプル記事
「和紅*Wide3」を例に。
忍者ブログ管理ページでテンプレート編集に進みます。
(←クリックで拡大)
大きく3分割されている画面の、左が「編集フォーム」・右上が「HTML」・右下が「CSS」と呼ばれる部分です。
コメントの文字サイズだけなら編集フォームの「文字設定>Comment」で変更できるのですが、これでは返信部分の変更が出来ないため、「CSS」を編集してみましょう。
忍者ブログ管理ページでテンプレート編集に進みます。
(←クリックで拡大)
大きく3分割されている画面の、左が「編集フォーム」・右上が「HTML」・右下が「CSS」と呼ばれる部分です。
コメントの文字サイズだけなら編集フォームの「文字設定>Comment」で変更できるのですが、これでは返信部分の変更が出来ないため、「CSS」を編集してみましょう。
▽続きはこちら
まずはCSS内で
「/**********各コメント表示部分**********/」を探してください。
現在コメント部分の文字サイズは10pxです。これを12px(記事本文のサイズ)に変更するには↓
でもコメント本文下の名前や日付も大きくなった。ここは小さい方がいいなーという場合は、もう少し下に行って
「記事詳細画面」プレビューで確認できたら、保存して終了。お疲れ様でした。
説明は長いですが、文字サイズを変更するには「font-size:00px;」(px以外の単位もありますが)と、CSSの必要な部分に半角英数字で書き込むだけなのです。
「/**********各コメント表示部分**********/」を探してください。
/*コメント全体*/という部分を以下のように変更します。
.CommentBlock {
padding:20px 0 20px 20px;
}
現在コメント部分の文字サイズは10pxです。これを12px(記事本文のサイズ)に変更するには↓
/*コメント全体*/オレンジ部分、「font-size:12px;」一行の追加でコメント関係の文字がまとめて大きくなります。はい、簡単。
.CommentBlock {
padding:20px 0 20px 20px;
font-size:12px;
}
でもコメント本文下の名前や日付も大きくなった。ここは小さい方がいいなーという場合は、もう少し下に行って
/*コメントフッター*/「font-size:10px;」を追加。同様に返信部分のフッターも…
.CommentFooter {
text-align:right;
margin:0px;
padding:10px;
font-size:10px;
}
.CommentResFooter {こんな感じです。
text-align:right;
margin:0px;
padding:6px 10px;
font-size:10px;
}
「記事詳細画面」プレビューで確認できたら、保存して終了。お疲れ様でした。
説明は長いですが、文字サイズを変更するには「font-size:00px;」(px以外の単位もありますが)と、CSSの必要な部分に半角英数字で書き込むだけなのです。
PR
●Thanks Comments
できました!
早速のご解説、ありがとうございます。
説明の通りに書き加えましたらできました!
文字列の意味等も理解できてないのに、ものすごく達成感があります(笑)。
忍者ユーザーのRe:コメントは管理画面からなので文字の大きさは気にならないのですが、数人の方から少し小さいとの言葉があったので思いきって相談してみました。
色や文字の配置などが優しい感じで気に入っていたのでテンプレート変更せずにできるのなら…と相談してよかったです。
本当にありがとうございます。
また質問させていただくこともあると思いますので、今後もよろしくお願いします。
Re:できました!
お役に立てれば幸いです(^^)。
テンプレカスタマイズはこういう小さなことの積み重ねなんですが、
自分の思ったとおりに変更出来ると楽しいですよね。
また何かありましたらご遠慮なくコメントしてください〜。
テンプレカスタマイズはこういう小さなことの積み重ねなんですが、
自分の思ったとおりに変更出来ると楽しいですよね。
また何かありましたらご遠慮なくコメントしてください〜。
●この記事にコメントする
●この記事へのトラックバック
TrackbackURL: