第18回：コメント表示欄とコメント入力欄の背景に画像を表示してみよう

コメント（表示欄）とコメント入力欄の背景に画像を表示してみましょう。
こんな↓感じになります。

コメント表示欄	コメント入力欄

事前準備：画像を入手する

表示する画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

私は「フリー素材＜ivory＞」 様でお借りした素材を使いました。
※「フリー素材＜ivory＞」様は'07年2月までで写真素材の配布を中止されました。

ファイルをココログにアップロードする

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1： ファイルのアップロード』
を参照して下さい。

CSSを編集する

1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックして画像が保存されているページを開く。
   ※「リンク」ボタンではなく、画像（ファイル）の名前のリンクをクリックして下さい。
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
3. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
   ※カスタムテンプレートの作り方は 『第3回：カスタムテンプレートを作ってみよう』を参照して下さい。
4. 「編集」画面のCSS記述欄に
   
   /*コメント入力欄*/
   #comment-text textarea, #comment-text-field textarea
   {
   background-image:url(●●●); /*背景画像の指定*/
   background-repeat:no-repeat; /*背景画像の繰り返し：なし*/
   background-position:■ ▲ ; /*背景画像の位置*/
   }
   
   /*コメント表示欄*/
   .comment-body
   {
   background-image:url(●●●); /*背景画像の指定*/
   background-repeat:no-repeat; /*背景画像の繰り返し：なし*/
   background-position:■ ▲ ; /*背景画像の位置*/
   }
   
   を記述する。
   ※/*～*/で囲まれた部分以外は全て半角英数で記述して下さい。
   ※●●●には上記で保存した画像のURL、 ■、 ▲には画像を表示する位置を入力して下さい。
   ※画像の位置指定については下記のページを参考にして下さい。
   ■「TAG index」様内 『背景画像の表示位置を指定する』
   ※私の場合は「bottom right」（一番下の一番右）に指定してあります。
5. 「変更を保存」ボタンを押す。
6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
9. イメージ通りに出来ているかどうか確認する。

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

• 「コメント入力欄」も「コメント表示欄」も全く同じ内容を指定する場合は、セレクタをまとめて
  #comment-text textarea, #comment-text-field textarea ,.comment-body
  と一行で記述して一度に指定してもOKです。
• background-repeat:no-repeat;
  は、 画像を繰り返さない（＝一つだけ）表示する、 ことを指定しています。
  その他の表示方法（繰り返し、敷き詰めなど）については下記のページを参照して下さい。
  ■「TAGindex」様内 『背景画像の並び方を指定する』
• 今回の指定箇所はどちらも文字が上に載る部分です。
  背景画像や表示方法は文字とのバランスを考えて文字の邪魔にならないものを選びましょう。
  私はお借りした素材をペイントソフトを使って少し白くなるように加工しています。
  ※素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

■「PRISM」様＜記事中のボタン素材＞
■「フリー素材＜ivory＞」 様
■「TAG index」 様

---

＜関連記事＞

■第12回： コメント欄の幅を調整してみよう
■第15回： コメント欄のスクロールバーの色を変えてみよう
■第16回： コメント欄の背景色を変えてみよう

---

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

---

第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回：コメント欄のスクロールバーの色を変えてみよう

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

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回： コメント欄の背景色を変えてみよう

---

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

---

第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回：コメント欄の背景色を変えてみよう

---

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

---