gooブログのシンプル系テンプレート(クリアオレンジ、クリアグレー、クリアパープル、クリアピンク、クリアブルー、クリアホワイト)のメニュー上部にアクセスカウンタを設置するサンプルです。
ブログタイトル部分にアクセスカウンタを設置する場合は、「タイトル背景とカウンタ設置」の記事をご覧ください。
gooブログで背景画像を設定(変更)するためにはCSSの編集が必要なので、使用できるテンプレートは の付いているものに限定されます。また、カウンタ画像を貼り付けることができる「場所」が必要です。
今回は、シンプル系テンプレートにある#sideBar、#menu1、#menu2といったメニューを囲んでいるID(場所)を利用します。
シンプル系テンプレート(クリアピンク左など)での設定例は、以下の通り。
- シンプル系左テンプレート/シンプル系右テンプレートの場合
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; }
- シンプル系左右テンプレート-左メニュー上部に配置する場合
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; }
- シンプル系左右テンプレート-右メニュー上部に配置する場合
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)の例
青字部分は指定された値を使ってください。
- よろづカウンター(忍者TOOLS)の例
http://ct#.shinobi.jp/xx/カウンタのID
「カウンタの設置(カウンタ用HTMLソースの貼り方)」にあるimgタグのsrc属性の値です。
- アクセスタウンタ(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ネット (レンタルカウンタ)
ブログタイトル部分にアクセスカウンタを設置する場合は、「タイトル背景とカウンタ設置」の記事を. . . ..続き(次の記事)を読む
コメントは本文(次の記事)にお願いします
足跡がてら、
# 7月前半のノートは、クローズしました。
【お願い・お知らせ】 gooブログをお持ちの方へ
- junk.test.gooカテゴリを新設しました。 gooブログに関する実験記事(非公開タグ、画像配置サンプル、カウンタ設置などのCSSカスタマイズ)は、このカテゴリをご覧ください。
- 6/8にリリースされた「HTMLエディター」と「おえかきツール」の動作環境・動作しない環境や使い勝手を教えてください。 もしかしたら、動作させるためのヒントになるかも知れません。
- Sleipnir、Lunascape、goo RSSリーダなどで「おえかきツール」が使えない方は、『タブブラウザで「おえかきツール」が使えない?』を試してみてください。
- 「TEXTエディター」の新規投稿ができなかったり再編集した内容が破棄されるバグは、6/17 11:00に修正版がリリースされました。