gooブログの
シンプル系テンプレート（クリアオレンジ、クリアグレー、クリアパープル、クリアピンク、クリアブルー、クリアホワイト）で、
タイトル背景画像と
アクセスカウンタを設置するためのサンプルです。
カスタムメタルの場合は、「
カスタムメタルでカウンタ設置」の記事をご覧ください。
gooブログで背景画像を設定（変更）するためにはCSSの編集が必要なので、使用できる
テンプレートは
の付いているものに限定されます。また、タイトル背景画像とカウンタ画像の2種類を貼り付けることができる「場所」が必要です。
テンプレートがカスタムブルーなら、CSSを編集して
.headerLight にタイトル画像を
.headerDark にカウンタ画像を、背景として設定すれば良いだけ。しかし、困ったことにクリアブルーのCSSには
#header しかない。仕方がないので、ブログのタイトルや概要が
h1 や
h2 のタグで括られていることを利用しました。
シンプル系（クリアブルー右など）での設定例は、以下の通り。
- ヘッダ背景を好みの画像に変更する場合
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");
}
- ヘッダ背景をカウンタ画像に変更する場合
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;
}
- ヘッダ背景を好みの画像に変更し、タイトルの右にカウンタ画像を追加する場合
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;
}
- ヘッダ背景を好みの画像に変更し、概要の右にカウンタ画像を追加する場合
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タグは使用できませんので、カウンタは「画像形式」のものを使用してください。
画像形式カウンタはご自分で作成されても構いませんが、
アクセスカウンタは無償レンタルすることもできますので、プログラミングができない方でもアクセスカウンタ設置はできます。
『ナーダ王女の憂鬱』ですが、「七とＹです。ご注文商品を入手することができませんでした。誠に申し訳ございません。ご注文はお取り消しとさせていただきます。」という
メールが届いていました。
