メニュー上部にカウンタ設置

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

gooブログで背景画像を設定（変更）するためにはCSSの編集が必要なので、使用できるテンプレートは カスタムマーク の付いているものに限定されます。また、カウンタ画像を貼り付けることができる「場所」が必要です。
今回は、シンプル系テンプレートにある#sideBar、#menu1、#menu2といったメニューを囲んでいるID（場所）を利用します。

シンプル系テンプレート（クリアピンク左など）での設定例は、以下の通り。

1. シンプル系左テンプレート／シンプル系右テンプレートの場合
   
   CSSの編集で、#sideBar の背景画像としてカウンタ画像を追加する。
   なお、カウンタ画像の高さは20pxと仮定した。
   

   【修正前】
   /* メニューレイアウト用 */
   #sideBar {
   }
   　↓
   【修正後】
   /* メニューレイアウト用 */
   #sideBar {
     /* メニュー背景にカウンタ画像を追加 */
     /* 画像の高さ＋α分の余白を上部に追加 */
     padding: 30px 0px 0px 0px;
     /* あなたのカウンタ画像のURL */
     background-image:
       url("http://your_counter.jp/counter_url");
     /* 中央上部に配置 */
     background-position: center top;
     /* 繰り返し無し */
     background-repeat: no-repeat;
   }
   
   

2. シンプル系左右テンプレート－左メニュー上部に配置する場合
   CSSの編集で、#menu1 の背景画像としてカウンタ画像を追加する。
   なお、カウンタ画像の高さは20pxと仮定した。
   

   【修正前】
   /* 左メニュー背景 */
   #menu1 {
     float: left;
     width: 180px;
   }
   　↓
   【修正後】
   /* 左メニュー背景 */
   #menu1 {
     float: left;
     width: 180px;
     /* 左メニュー背景にカウンタ画像を追加 */
     /* 画像の高さ＋10pxの余白を上部に追加 */
     padding: 30px 0px 0px 0px;
     /* あなたのカウンタ画像のURL */
     background-image:
       url("http://your_counter.jp/counter_url");
     /* 中央上部10pxの位置に配置 */
     background-position: center 10px;
     /* 繰り返し無し */
     background-repeat: no-repeat;
   }
   
   

3. シンプル系左右テンプレート－右メニュー上部に配置する場合
   CSSの編集で、#menu2 の背景画像としてカウンタ画像を追加する。
   なお、カウンタ画像の高さは20pxと仮定した。
   

   【修正前】
   /* 右メニュー背景 */
   #menu2 {
     float: right;
     width: 180px;
   }
   　↓
   【修正後】
   /* 右メニュー背景 */
   #menu2 {
     float: right;
     width: 180px;
     /* 右メニュー背景にカウンタ画像を追加 */
     /* 画像の高さ＋10pxの余白を上部に追加 */
     padding: 30px 0px 0px 0px;
     /* あなたのカウンタ画像のURL */
     background-image:
       url("http://your_counter.jp/counter_url");
     /* 中央上部10pxの位置に配置 */
     background-position: center 10px;
     /* 繰り返し無し */
     background-repeat: no-repeat;
   }
   

＃ 勿論、gooブログアドバンスならテンプレートを編集できるので、こんな方法で無理矢理設置する必要はありません

また、gooブログではセキュリティ上の問題からscriptタグは使用できませんので、カウンタは「画像形式」のものを使用してください。

画像形式カウンタはご自分で作成されても構いませんが、アクセスカウンタは無償レンタルすることもできますので、プログラミングができない方でもアクセスカウンタ設置はできます。

● カウンタ画像URL（http://your_counter.jp/counter_url）の例
青字部分は指定された値を使ってください。

1. よろづカウンター(忍者TOOLS)の例
   http://ct#.shinobi.jp/xx/カウンタのID
   「カウンタの設置（カウンタ用HTMLソースの貼り方）」にあるimgタグのsrc属性の値です。
   

2. アクセスタウンタ(Wanzネット)の例
   http://www.wanz.net/counter/counter.cgi?カウンタのID
   「画像カウンタをイメージタグで表示する場合」にあるimgタグのsrc属性の値です。
   

● よくある間違い
background-image: url() の（）の中には、border="0"やalt="文字列"など、src属性の値以外を付加してはいけません。

【指定されたimgタグの例】
<img src="http://ct#.shinobi.jp/xx/カウンタのID" border="0" alt="文字列" />

【誤】
background-image: url("http://ct#.shinobi.jp/xx/カウンタのID" border="0" alt="文字列");
　↓
【正】
background-image: url("http://ct#.shinobi.jp/xx/カウンタのID");

---

質問 カウンターについて - goo ブログサークル
タイトル背景とカウンタ設置 シンプル系テンプレートでのタイトル部分設置例
カスタムメタルでカウンタ設置 カスタムメタルでのタイトル部分設置例
クリアミントのCSS
よろづカウンター - 忍者TOOLS (レンタルカウンタ)
アクセスタウンタ設置 - Wanzネット (レンタルカウンタ)