サイドバーの項目タイトルに画像アイコン

　　　　　　　　　　
  何らひねりのないタイトルだが、ココログフリーのサイドバーに、このページのような感じで、項目タイトルの先頭にアイコンを貼る。

　注）デフォルトテンプレートのみ。リッチデザインテンプレートでは出来ない。

  １．素材サイトからgif画像をダウンロードする。
  この際気を付けることは、あまり大き過ぎないものを選ぶこと。

　自分のブログのサイドバー背景色が、白でない場合は透過処理してある画像を選ぶこと。

  PCの判りやすいところに保存すること。
  判りにくいタイトルになっていたら、あとで見た時に判別出来るようタイトルを変えておいてもよい。
　ただし英数字で！

　画像のアップロードに関しては『画像を縮小してからアップする話』で説明しているので、そちらを参考に。

　たとえば私は今回、700㎞さんからお借りした画像にicon-enpituとした。ベタなローマ字読みだが、判りやすいから。

  ２．画像をアップロード。
  コントロールパネル→ファイル→新規にアップロード先のファイルを作っておくと、以後に画像をアップロードする場所が一つにまとまるので、便利！。
　例えば、「image」というように。ここも英数字のみ。
　
  ファイルが出来たら、その文字をクリック。新規に画像をアップロードする。

３．アップロードした、今回の例ならaicon-enpitu.txt の文字の右並びにあるリンクのボタンをクリック。
  別窓にあるソースの中から、“http: から gif”までをコピーして、閉じる。

  ４．ブログ→デザイン→  カスタムテンプレート→カスタムCSS編集の順にクリック。

  ５．カスタムCSS編集のボックスの中に、以下の記述をする。

.sidebar h2 {
background: url("●●●") left no-repeat;
padding: 10px 0px 10px 28px;}

　上記のpaddingは、このページでの任意な数字。
　自分のブログでは画像に合わせる。
  ●●●の所に、先程コピーした画像のアドレスを貼りつける。
  確認画面で、どんなもんだか見てみよう。

  ６．画像がきちんと表示されていなかったら、左図のような原因があげられる。
  paddingを追加して調節し、もう一度確認画面でみてみる。（カスタムCSS編集画面は全て、半角英数字）

  ７．出来ていたら、保存→反映して終了♪
 
  ◆項目タイトル文字の縦幅より画像が小さ過ぎると、左上によってしまう場合がある。
　素材サイトから入手する画像には余白がないからだ。
  OSがWindowsならペイントソフトを使って、画像の上に少し余白を作ってから、アップロードする。

  ◆ペイントでの編集（Windows）

　スタート→すべてのプログラム→アクセサリ→ペイントで起動させる。

　　名前を付けて保存→終了。
　後は、２．の画像をアップロードへ進む。

　素材サイト・700kmさん。blue-greenさん。