« 第14回:カレンダーの投稿した日付に色を付けてみよう | トップページ | 第16回:コメント入力欄の背景色を変えてみよう »

2006/03/05

第15回:コメント欄のスクロールバーの色を変えてみよう

コメントエリアのスクロールバーの色を変えてみましょう。

手順

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

    #comment-text textarea, #comment-text-field textarea
    {
    scrollbar-base-color:#●●●●●●;
    }

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

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

ここがポイント

  • スクロールバーは上記の「scrollbar-base-color」以外にもパーツごとにプロパティを持っており、 それを細かく指定することで自由にイメージを変えられます。
    下記のページではそれぞれのプロパティが図入りで細かく説明されています。
    「TAG index」 様内 『TEXTAREAのスクロールバーの色を変える』
    また、下記のページでは各プロパティの色の組み合わせをチェックすることが出来ます。
    「TAG index」 様内 『カラーチャート』
    参照してみて下さい。
    ※それぞれ単体でも指定可能です。
    ※私はbase-color、face-color、 scrollbar-arrow-colorの3箇所を全て同系色で指定してみました。

コメント欄のスクロールバー色変更

  • スクロールバーの色の変更は自由ですが、背景の色との差が少ないと閲覧する場合スクロールバーが見えにくくなることがあります。
    色を組み合わせる場合はスクロールバーのパーツだけでなく、背景色との関係も考慮に入れて設定しましょう。
  • この指定はIE5.5以上のブラウザに有効です。

お世話になりました

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


<関連記事>
第12回: コメント欄の幅を調整してみよう
第16回: コメント欄の背景色を変えてみよう


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


|

« 第14回:カレンダーの投稿した日付に色を付けてみよう | トップページ | 第16回:コメント入力欄の背景色を変えてみよう »

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

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

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

コメント

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: 第15回:コメント欄のスクロールバーの色を変えてみよう:

« 第14回:カレンダーの投稿した日付に色を付けてみよう | トップページ | 第16回:コメント入力欄の背景色を変えてみよう »