« 第15回:コメント欄のスクロールバーの色を変えてみよう | トップページ | 第17回:ページ全体のスクロールバーの色を変えてみよう »

2006/03/05

第16回:コメント入力欄の背景色を変えてみよう

コメント入力欄の背景色を変えてみましょう。
一緒に「名前」「メールアドレス」「URL」欄も変更してみます。

手順

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

    #author, #email, #url, #comment-text textarea, #comment-text-field textarea
    {
      background-color:#●●●●●●;
    }


    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては下記のページなどを参考にして下さい。
    ■参考: 「色のみじん切り」様 色のみじん切り
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
  3. 「変更を保存」ボタンを押す。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • 各要素はそれぞれ
    #author → 名前
    #email → メールアドレス
    #url → URL
    #comment-text textarea, #comment-text-field textarea  → 内容
    に対応します。
  • 各要素に別の色をそれぞれ指定することも出来ます。
    その場合は、
    #author {background-color:#~;}
    #email{background-color:#~;}
    のように要素ごとに記述して下さい。
  • 各要素は文字を入力する欄ですので、入力する際に文字がハッキリ見えるような色に設定しましょう。

コメント欄の色



お世話になりました

「色のみじん切り」
■素材サイト 「PRISM」 様<記事内のボタン素材>


<関連記事>
第12回: コメント欄の幅を調整してみよう
第15回: コメント欄のスクロールバーの色を変えてみよう


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


|

« 第15回:コメント欄のスクロールバーの色を変えてみよう | トップページ | 第17回:ページ全体のスクロールバーの色を変えてみよう »

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

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

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

コメント

はじめましてyayaです。
私はなにもかもが初心者なもので、takoさんのブログは本当に助かります。丁寧に説明されているのでとても分かりやすいです☆
とはいっても、まだ第2回のバナーをやっとこさ貼り付けれたところです。。これからも活用させて頂きますm(__)m第16回かぁ・・・はやく追いつけるよう頑張ります(^v^)

投稿: yaya | 2006/03/06 03:07

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

私もそんなには出来ることが多くないので、早くも息切れ気味です(笑)
でも、少しずつでも記事が増やせるよう頑張りますので、また遊びに来てくださいね。
お待ちしています。

投稿: tako→yayaさん | 2006/03/06 21:01

はじめまして、こんにちは!
最近ブログを始めたばかりで、右も左もまだわからないようなヒヨっこのricoです。('◇')ゞ
takoさんのブログを見つけてから、毎日のように勉強させて頂いております♪(日記すらひとつも書いてない状態ですが。苦笑)
本当にありがとうございます!
これからもお世話になると思いますが、どうぞよろしくです。(^-^)
それでは、失礼致します~。_(._.)_

投稿: rico | 2006/03/08 02:58

■ricoさん
こんにちは。コメントありがとうございます。
お返事遅くなってごめんなさい^^;

ricoさんのブログを拝見しましたが、全体的なイメージが統一されていて可愛らしいデザインになっていますね(^^)

これからも何かお役に立ちそうな記事がありましたら遊びに来てください。
お待ちしています。

投稿: tako→ricoさん | 2006/03/12 10:41

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: 第16回:コメント入力欄の背景色を変えてみよう:

« 第15回:コメント欄のスクロールバーの色を変えてみよう | トップページ | 第17回:ページ全体のスクロールバーの色を変えてみよう »