「【No.003】公式のタイプ２風テンプレート【ソース配布】」のカスタマイズ補助と、解説になります。

・カスタマイズエリアについて
・カテゴリタブのサイズ変更
・カテゴリタブの角を丸くする
・骨組み

▼カスタマイズエリアについて
色変え・サイズ変更等の簡単なカスタマイズが行いやすいよう
【一覧】用ソースの422行目
【詳細】用ソースの494行目
に、「カスタマイズエリア」なるものを用意しました。
簡単な色変えだけで良い方、CSS見ると眠くなるという方はご利用ください。
以下のソースをお好みで編集し、カスタマイズエリアにぶち込んで下さい。
テンプレートに編集内容が反映されます。

/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼カスタマイズエリア▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

/********************************/
/*	基本設定		*/
/********************************/
body {
	font-size: 11px;	/*文字サイズ（10px～13px推奨）*/
	color: #444444;		/*文字色*/
	background: #ecece7;	/*背景色（全体）*/
}
a,
a span {
	color: #444444;		/*リンク・文字色*/
}
a:hover,
a:active,
a span:hover,
a span:active {
	color: #aaaaaa;		/*リンク・カーソルを乗せた時の文字色*/
	font-weight: normal;	/*リンク・カーソルを乗せた時の文字の太さ*/
}
#contents {
	float: left;		/*コンテンツとサイドメニューの左右を入れ替える・初期値【left】*/
}
#side {
	float: right;		/*コンテンツとサイドメニューの左右を入れ替える・初期値【right】*/
}
#contents-list,
#contents-inner,
.s-section {
	background: #ffffff;	/*コンテンツ、サイドメニューの背景色*/
}
#contents-list,
#contents-inner,
.Category a,
.s-section {
	border-width: 1px;	/*コンテンツ、カテゴリタブ、サイドメニューの枠幅（0px～1px推奨）*/
	border-color: #cccccc;	/*コンテンツ、カテゴリタブ、サイドメニューの枠色*/
}
.Category #Category$categoryId {
	color:;			/*カテゴリタブ（選択）の文字色*/
	background: #ffffff;	/*カテゴリタブ（選択）の背景色*/
}
.Category a {
	color:;			/*カテゴリタブ（未選択）の文字色*/
	background: #cccccc;	/*カテゴリタブ（未選択）の背景色*/	
}
.Category a:hover {
	color:;			/*カテゴリタブ（未選択）カーソルを乗せた時の文字色*/
	background: #ffffff;	/*カテゴリタブ（未選択）カーソルを乗せた時の背景色*/	
}

/********************************/
/*	ヘッダー設定		*/
/********************************/
a#blog-id {
	font-size: 22px;	/*ブログタイトル・文字サイズ*/
	line-height: 4;		/*ブログタイトル・行の高さ*/
	font-weight: normal;	/*ブログタイトル・文字の太さ*/
	font-family; "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;	/*ブログタイトル・文字フォント*/
	color:;			/*ブログタイトル・文字色*/
}
a#blog-id:hover,
a#blog-id:active {
	color:;			/*ブログタイトル・カーソルを乗せた時の文字色*/
}
#MenuBar #MenuBarLeft a {
	color:;			/*メニューバー・文字色*/
}
#MenuBar #MenuBarLeft a:hover,
#MenuBar #MenuBarLeft a:active {
	color:;			/*メニューバー・カーソルを乗せた時の文字色*/
}

/********************************/
/*	記事設定（一覧画面用）	*/
/********************************/
.blogthumb .article {
	border-color: #cccccc;	/*サムネイル画像の枠色*/
}
.blogthumb .article,
.blogthumb .blogimg {
	height: 160px;		/*サムネイル画像の高さ*/
}
.blogthumb .info {
	top: 62px;		/*投稿情報の上からの距離。参考→【サムネイル画像の高さ：ここの値】【160px：62px】【140px：52px】【120px：42px】*/
}

/********************************/
/*	記事設定（詳細画面用）	*/
/********************************/
#right-area .date-4 img {
	border-color: #cccccc;	/*使用タグ・テンプレの枠色*/
}
#date-title {
	font-size: 16px;	/*記事タイトルの文字サイズ*/
	line-height: 24px;	/*記事タイトルの行の高さ*/
	font-weight: normal;	/*記事タイトルの文字の太さ*/
}
.BlogThumbFull .BlogDetail,
.CommentDetail .CmtImg {
	border-color: #cccccc;	/*記事とコメント欄の枠色*/
}
.CommentDetail,
.CommentName,
.CommentName a {
	text-align: left;	/*コメント情報の位置*/
	color:;			/*コメント情報の色*/
}

/********************************/
/*	サイドメニュー設定	*/
/********************************/
.s-title {
	font-size: 16px;	/*メニュータイトルの文字サイズ*/
	line-height: 1.7;	/*メニュータイトルの行の高さ*/
	font-weight: bold;	/*メニュータイトルの文字の太さ*/
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;	/*メニュータイトルの文字フォント*/
}
.s-unit {
	border-bottom: 1px dotted #cccccc;	/*メニュー内仕切り（横線）ボーダー設定*/
}
#myimg {
	border-color: #cccccc;	/*プロフィール画像の枠色*/
}
#myimg,
#myimg img {
	width: 180px;		/*プロフィール画像の幅*/
	height: 180px;		/*プロフィール画像の高さ*/
}
.mycmd .cmdbutton,
.mycmd .cmdbuttondisable {
	border-color: #cccccc;	/*お気に入り・友達申請・メッセージ・RSSボタンの枠色*/
}
.mycmd .cmdbuttondisable {
	color: #ffffff;		/*お気に入り・友達申請・メッセージ・RSSボタン、選択済みボタンの文字色*/
	background: #cccccc;	/*お気に入り・友達申請・メッセージ・RSSボタン、選択済みボタンの背景色*/
}
.BlogTag {
	border-color: #cccccc;	/*タグリストの枠色*/
}

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲カスタマイズエリア▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

▼カテゴリタブのサイズ変更

使用しているカテゴリ数に合わせて幅の調整をできます。

【一覧】用ソース171行目、【詳細】用ソース176行目にある

.Category {
	float: left;
	width: 15.5%;
	margin-right: 5px;
}

の部分をお好みで編集してください。
widthがカテゴリタブの幅、margin-rightがタブ間の余白になります。

（↓例：カテゴリ８個の場合）

.Category {
	float: left;
	width: 11.8%;
	margin-right: 4px;
}

▼カテゴリタブの角を丸くする

（※IE8以下のブラウザは対応していません。）

カスタマイズエリア内に下の三行を追加してください

.Category a {
	border-radius: 5px 5px 0 0;
}

ついでにコンテンツとメニューの角も丸くしたい場合はこちらを更に追加

#contents-list,
#contents-inner {
	border-radius: 0 5px 5px 5px;
}
.s-section {
	border-radius: 5px;
}

▼骨組み
【一覧/詳細】共通です。