タイトル背景とカウンタ設置

gooブログのシンプル系テンプレート（クリアオレンジ、クリアグレー、クリアパープル、クリアピンク、クリアブルー、クリアホワイト）で、タイトル背景画像とアクセスカウンタを設置するためのサンプルです。
カスタムメタルの場合は、「カスタムメタルでカウンタ設置」の記事をご覧ください。

gooブログで背景画像を設定（変更）するためにはCSSの編集が必要なので、使用できるテンプレートは カスタムマーク の付いているものに限定されます。また、タイトル背景画像とカウンタ画像の2種類を貼り付けることができる「場所」が必要です。
テンプレートがカスタムブルーなら、CSSを編集して .headerLight にタイトル画像を .headerDark にカウンタ画像を、背景として設定すれば良いだけ。しかし、困ったことにクリアブルーのCSSには #header しかない。仕方がないので、ブログのタイトルや概要が h1 や h2 のタグで括られていることを利用しました。

シンプル系（クリアブルー右など）での設定例は、以下の通り。

1. ヘッダ背景を好みの画像に変更する場合
   CSSの編集で、#header の背景画像URLをアップロードした画像のURLに変更する。
   なお、ヘッダ背景画像の高さは120pxと仮定した。
   

   【修正前】
   /* ヘッダーの指定 */
   #header {
     background-color: #C6D9EC;
     padding:35px;
     （中略）
     background-image:
       url(/images/tmp_sm_blue_r/head_bg.gif);
   }
   　↓
   【修正後】
   /* ヘッダーの指定 */
   #header {
     /* ヘッダ背景画像に似た色に変更 */
     background-color: #123456;
     padding:35px;
     （中略）
     /* ヘッダ背景画像の高さ - 35×2 */
     height: 50px;
     /* アップロードした画像のURL */
     background-image:
       url("/user_image/xx/xx/～.jpg");
   }
   

2. ヘッダ背景をカウンタ画像に変更する場合
   CSSの編集で、#header の背景画像URLをカウンタ画像のURLに変更する。
   

   【修正前】
   /* ヘッダーの指定 */
   #header {
     （中略）
     background-image:
       url(/images/tmp_sm_blue_r/head_bg.gif);
     background-repeat: repeat;
   }
   　↓
   【修正後】
   /* ヘッダーの指定 */
   #header {
     （中略）
     /* あなたのカウンタ画像のURL */
     background-image:
       url("http://your_counter.jp/counter_url");
     /* 繰り返しなし */
     background-repeat: no-repeat;
     /* 右寄せ */
     background-position: right;
   }
   

3. ヘッダ背景を好みの画像に変更し、タイトルの右にカウンタ画像を追加する場合
   CSSの編集で、#header の背景画像URLをアップロードした画像のURLに変更する。
   加えて、#header h1 に背景画像URLとしてカウンタ画像のURLを追加する。
   なお、ヘッダ背景画像の高さは120pxと仮定した。
   

   【修正前】
   /* ヘッダーの指定 */
   #header {
     background-color: #C6D9EC;
     padding:35px;
     （中略）
     background-image:
       url(/images/tmp_sm_blue_r/head_bg.gif);
     background-repeat: repeat;
   }
   　↓
   【修正後】
   /* ヘッダーの指定 */
   #header {
     /* ヘッダ背景画像に似た色に変更 */
     background-color: #123456;
     padding:35px;
     （中略）
     /* ヘッダ背景画像の高さ - 35×2 */
     height: 50px;
     /* アップロードした画像のURL */
     background-image:
       url("/user_image/xx/xx/～.jpg");
   }
   /* ヘッダ見出し1（タイトル）
      にカウンタ画像のURLを追加 */
   #header h1 {
     background-image:
       url("http://your_counter.jp/counter_url");
     background-position: right;
     background-repeat: no-repeat;
   }
   

4. ヘッダ背景を好みの画像に変更し、概要の右にカウンタ画像を追加する場合
   CSSの編集で、#header の背景画像URLをアップロードした画像のURLに変更する。
   加えて、#header h2 に背景画像URLとしてカウンタ画像のURLを追加する。
   なお、ヘッダ背景画像の高さは120pxと仮定した。
   

   【修正前】
   /* ヘッダーの指定 */
   #header {
     background-color: #C6D9EC;
     padding:35px;
     （中略）
     background-image:
       url(/images/tmp_sm_blue_r/head_bg.gif);
     background-repeat: repeat;
   }
   　↓
   【修正後】
   /* ヘッダーの指定 */
   #header {
     /* ヘッダ背景画像に似た色に変更 */
     background-color: #123456;
     padding:35px;
     （中略）
     /* ヘッダ背景画像の高さ - 35×2 */
     height: 50px;
     /* アップロードした画像のURL */
     background-image:
       url("/user_image/xx/xx/～.jpg");
   }
   /* ヘッダ見出し2（概要）
      にカウンタ画像のURLを追加 */
   #header h2 {
     background-image:
       url("http://your_counter.jp/counter_url");
     background-position: right;
     background-repeat: no-repeat;
   }
   

気をつけなきゃいけないのは、h1（やh2）に背景を追加するとブログ全体に効いちゃうこと。つまり、ブログ本文では事実上h1（やh2）は使えなくなってしまう。
よって、#header h1（や#header h2）に背景を追加しないといけないということ。これなら、本文中に

これはh1の見出しです

とか

これはh2の見出しです

なんて書いても問題ない。
＃ 勿論、gooブログアドバンスならテンプレートを編集できるので、こんな方法で無理矢理設置する必要はない

また、gooブログではセキュリティ上の問題からscriptタグは使用できませんので、カウンタは「画像形式」のものを使用してください。
画像形式カウンタはご自分で作成されても構いませんが、アクセスカウンタは無償レンタルすることもできますので、プログラミングができない方でもアクセスカウンタ設置はできます。

---

● 質問 カウンターについて - goo ブログサークル
● カスタムメタルでカウンタ設置 カスタムメタルでの設置例
● メニュー上部にカウンタ設置 メニュー上部の設置例
　- カウンタ画像URL（http://your_counter.jp/counter_url）の例
● よろづカウンター - 忍者TOOLS (レンタルカウンタ)
● アクセスタウンタ設置 - Wanzネット (レンタルカウンタ)