忍者ブログ
NinjaToolsAdminWriteRes

NUI.T Temp

忍者ブログ用テンプレ試作&見本用です。

HOME ≫ Entry no.12 「コメント欄の文字サイズ変更」 ≫ [13] [12] [11] [10] [9] [8] [7]

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


コメント欄の文字サイズ変更

「和紅*Wide3」を例に。
忍者ブログ管理ページでテンプレート編集に進みます。
テンプレ編集画面(←クリックで拡大)
大きく3分割されている画面の、左が「編集フォーム」・右上が「HTML」・右下が「CSS」と呼ばれる部分です。

コメントの文字サイズだけなら編集フォームの「文字設定>Comment」で変更できるのですが、これでは返信部分の変更が出来ないため、「CSS」を編集してみましょう。

▽続きはこちら

まずはCSS内で
「/**********各コメント表示部分**********/」を探してください。
/*コメント全体*/
.CommentBlock {
padding:20px 0 20px 20px;
}
という部分を以下のように変更します。
現在コメント部分の文字サイズは10pxです。これを12px(記事本文のサイズ)に変更するには↓
/*コメント全体*/
.CommentBlock {
padding:20px 0 20px 20px;
font-size:12px;
}
オレンジ部分、「font-size:12px;」一行の追加でコメント関係の文字がまとめて大きくなります。はい、簡単。

でもコメント本文下の名前や日付も大きくなった。ここは小さい方がいいなーという場合は、もう少し下に行って
/*コメントフッター*/
.CommentFooter {
text-align:right;
margin:0px;
padding:10px;
font-size: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:コメントは管理画面からなので文字の大きさは気にならないのですが、数人の方から少し小さいとの言葉があったので思いきって相談してみました。
色や文字の配置などが優しい感じで気に入っていたのでテンプレート変更せずにできるのなら…と相談してよかったです。
本当にありがとうございます。
また質問させていただくこともあると思いますので、今後もよろしくお願いします。

From 【カクテキ】URL2008.01.25 11:41編集

Re:できました!

お役に立てれば幸いです(^^)。
テンプレカスタマイズはこういう小さなことの積み重ねなんですが、
自分の思ったとおりに変更出来ると楽しいですよね。
また何かありましたらご遠慮なくコメントしてください〜。

From 【NUI】 2008.01.25 13:51

●この記事にコメントする

お名前
タイトル
文字色
E-mail
URL
コメント
絵文字 Vodafone絵文字 i-mode絵文字 Ezweb絵文字
パスワード ※投稿者編集用
秘密? ※チェックすると管理人にしか見えません

●この記事へのトラックバック

TrackbackURL:

ご案内

忍者ブログ向けテンプレ作成&見本用ブログです。更新は共有テンプレ作成時のみ。
各テンプレの不具合、ご質問等、お気軽にコメントお願いします。
カキコ用記事⇒足跡どぞ

プロフィール

管理人名:NUI
HP:NUI.T NINBLO
職業:夜行性動物
趣味:色々
自己紹介:取り敢えずデザインよりクロスブラウザ優先中。Mac者。




≪ レイアウト変更の方法 |PageTop| 和紅 *Wide3 ≫

※ 忍者ブログ ※ [PR]
 ※
Writer 【NUI】  Design by NUI.T  Powered by NinjaBlog