gooブログの
カスタムメタルというテンプレートで、
タイトル背景画像と
アクセスカウンタを設置するためのサンプルです。
シンプル系テンプレート（クリアオレンジ、クリアグレー、クリアパープル、クリアピンク、クリアブルー、クリアホワイト）の場合は、「
タイトル背景とカウンタ設置」の記事をご覧ください。
gooブログで背景画像を設定（変更）するためにはCSSの編集が必要なので、使用できる
テンプレートは
の付いているものに限定されます。また、タイトル背景画像とカウンタ画像の2種類を貼り付けることができる「場所」が必要です。
テンプレートがカスタムブルーなら、CSSを編集して
.headerLight にタイトル画像を
.headerDark にカウンタ画像を、背景として設定すれば良いだけ。しかし、困ったことにカスタムメタルのCSSには
.header しかない。仕方がないので、ブログの概要やタイトル下の二重破線が
bDesc や
tbg6 のクラスが指定された
tdタグで括られていることを利用します。
カスタムメタルでの設定例は、以下の通り。
- ヘッダ背景を好みの画像に変更する場合
CSSの編集で、.header の背景画像URLをアップロードした画像のURLに変更する。
【修正前】
/* ブログのタイトル部全体の背景… */
.header {
background-color: #333333;
}
↓
【修正後】
/* ブログのタイトル部全体の背景… */
.header {
/* 背景画像に似た色に変更するのが良い */
background-color: #123456;
/* アップロードした画像のURL */
background-image:
url("/user_image/xx/xx/～.jpg");
background-repeat: repeat;
}
- タイトル下の二重破線をカウンタ画像に変更する場合
CSSの編集で、.tbg6 の背景画像URLをカウンタ画像のURLに変更する。
【修正前】
/* ブログのタイトルの下の二重破線 */
.tbg6 {
background-image:
url(/images/v_e_02hrbg.gif);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: left center;
}
↓
【修正後】
/* ブログのタイトルの下の二重破線 */
.tbg6 {
/* 高さが3pxしかないので、
カウンタ画像の高さ（例えば20px）を指定 */
height: 20px;
/* あなたのカウンタ画像のURL */
background-image:
url("http://your_counter.jp/counter_url");
/* 繰り返しなし */
background-repeat: no-repeat;
background-attachment: scroll;
/* 右寄せ */
background-position: right center;
}
- ブログ概要の右にカウンタ画像を追加する場合
CSSの編集で、.bDesc に背景画像URLとしてカウンタ画像のURLを追加する。
【修正前】
/* ブログの概要の文字 */
.bDesc {
（中略）
font-size: 11px;
（中略）
}
↓
【修正後】
/* ブログの概要の文字 */
.bDesc {
（中略）
font-size: 11px;
（中略）
/* 高さが11pxしかないので、
カウンタ画像の高さ（例えば20px）を指定 */
height: 20px;
/* あなたのカウンタ画像のURL */
background-image:
url("http://your_counter.jp/counter_url");
/* 繰り返しなし */
background-repeat: no-repeat;
/* 右寄せ */
background-position: right center;
}
- タイトルの左に余白を設けてカウンタ画像を追加する場合
CSSの編集で、.bTitle に背景画像URLとしてカウンタ画像のURLを追加する。
【修正前】
/* ブログのタイトルの文字 */
.bTitle {
（中略）
font-size: 26px;
（中略）
}
↓
【修正後】
/* ブログのタイトルの文字 */
.bTitle {
（中略）
font-size: 26px;
（中略）
/* 背景表示用の左余白をつける */
padding-left: 200px;
/* あなたのカウンタ画像のURL */
background-image:
url("http://your_counter.jp/counter_url");
/* 繰り返しなし */
background-repeat: no-repeat;
/* 左寄せ */
background-position: left center;
}
気をつけなきゃいけないのは、
.bTitle はタイトル文字列の横幅しかないこと。従って、
padding-right や
padding-left で「適切」な右側余白または左側余白をつけないと、画像がタイトル文字の後ろに表示されてしまう。他の場所に設置する場合に比べて、ちょっと調整が難しいかも知れません。
＃ 勿論、gooブログアドバンスならテンプレートを編集できるので、こんな方法で無理矢理設置する必要はない
また、gooブログでは
セキュリティ上の問題からscriptタグは使用できませんので、カウンタは「画像形式」のものを使用してください。
画像形式カウンタはご自分で作成されても構いませんが、
アクセスカウンタは無償レンタルすることもできますので、プログラミングができない方でもアクセスカウンタ設置はできます。
