カテゴリと記事数に隙間を設けるCSSカスタマイズ

去る2005年8月25日から、gooブログの「カテゴリ(CATEGORY)」にリンクされたカテゴリ名に加えてそのカテゴリに属する記事数が追加されました。
しかし、カテゴリ名と記事数がくっついている上、シンプル系テンプレート（クリアオレンジとかクリアブルーとか）では不要な下線までついています。

ということで、カテゴリ名とその記事数の間に隙間を設け、不要な下線も消してみましょう。 カスタムマークの付いているテンプレート（シンプル系18種、カスタム系3種）を使っていればやり方は簡単で、CSS編集で .catLink のセレクタに手を加えるだけいいんです。
＃ カテゴリの記事数を消したい場合は、「カテゴリ記事数非表示のCSSカスタマイズ改」を参照のこと

CSSの修正・追加箇所は、以下の通りです。

/* カテゴリー（category）のリスト */
.catLink {
  color: ;
  font-size: ;
  text-decoration: underline; /* シンプル系の場合 */
}

↓

/* カテゴリー（category）のリスト */

/* カテゴリー（category）の名称 */
A SPAN.catLink {
  margin-left: 0em; /* 左隙間なし */
}

/* カテゴリー（category）の名称・記事数 */
.catText,
.catLink {
  color: ;
  font-size: ;
  text-decoration: ; /* シンプル系の場合はunderlineを削除 */
  margin-left: 0.3em; /* 左隙間0.3文字分 */
}

セレクタ .catLnik は「カテゴリ記事数」と「カテゴリ名称」の両者に影響し、セレクタ A SPAN.catLink は「カテゴリ名称」のみに影響します。左隙間の margin-left: 0.3em （0.3文字分）という値は一例です。0.2em や 0.5em など、お好みの値を指定してください。
また、「カテゴリ記事数」のために catText というクラスを新設していただけることを信じて .catText のセレクタも記述しています。

このCSSカスタマイズの適用イメージは、以下の通り。

【通常】

カテゴリ

Moblogs(25)
BaseNotes(10)

↓
【カスタマイズ後】

カテゴリ

Moblogs(25)
BaseNotes(10)

この方法で変更できるテンプレート（対象テンプレート）は、以下の通り。

• カスタムブルー　同メタル　同フリー
• クリアオレンジ左右　同左　同右
• クリアグレー左右　同左　同右
• クリアパープル左右　同左　同右
• クリアピンク左右　同左　同右
• クリアブルー左右　同左　同右
• クリアホワイト左右　同左　同右
• クリアミント左右　同左　同右（わは）

なおこのブログは、記事数を期間限定で太字に（してFirefoxやOperaなら更に色も）変更してみました（わは）。また、指定されているクラスが catText に変更されれば記事数の色がグレイになる筈です。
＃ 以前の記事と殆んど違わないことは、内緒です

● カテゴリーの横に記事数を表示しました - gooブログ スタッフブログ 2005年08月25日18:24
● カテゴリ記事数非表示のCSSカスタマイズ改 2005年09月15日00:01

カテゴリと記事数に隙間を設けるCSSカスタマイズ (冒頭)

去る2005年8月25日から、gooブログの「カテゴリ(CATEGORY)」にリンクされたカテゴリ名に加えてそのカテゴリに属する記事数が追加されました。
しかし、カテゴリ名と記事数がくっついている上、シンプル系テンプレート（クリアオレンジとかクリアブルーとか）では不要な下線までついています。

ということで、カテゴリ名とその記事数の間に隙間を設け、不要な下線も消して. . . ..続き(次の記事)を読む
コメントは本文(次の記事)にお願いします