カスタムフリーの隠し？クラス

とりあえず今日は、「横幅固定の２段テンプレート」を作る前に、
「横幅可変の２段テンプレート（赤×クリーム）」を作ってみることにしました。

こちらでっす。

で、これを実現する為に色々と大変な事がありましたので、とりあえずメモしておきますね。

１：コメントの区切り線用に、サンプルにない隠しクラス「etRule」があります
２：右メニューバーと左メニューバーでは、同じwidth幅を指定しても揃わない場合があります。その場合、右メニューバーにだけ用意されている隠しクラス「cont_center」で、微調整を行なうとよいようです。

ま、そんなこんなでcssを作ってみましたので、興味がある方は、
１：以下のcssを、丸ごとコピー（トリプルクリックで選択できます）
２：カスタムフリーのテンプレートを選択
３：cssの編集のところで貼り付け

って感じでいじってみちゃってくださいねっ♪

/* ページ全体の背景と余白と各メニューリスト以外の文字 */
BODY {
	color: #E9090F;
	background-color: #FFF6C1;
	}

/* 各メニューのリストの文字 */
TD{
}
/* ブログタイトル、ブログ概要、記事タイトルの文字飾りの指定 */
h1{
	font-size:100%;
	line-height:100%;
	font-weight:normal;
	height:20px;
}
h2, h3 {
	font-size:100%;
	line-height:100%;
	font-weight:normal;
}

/* 全体のリンク飾り */
A {
	text-decoration: underline;
	}

/* リンク（まだ見ていない状態） */
A:link {
	color: #0F92D9;
	}

/* リンク（マウスポインタを乗せた状態） */
A:hover {
	color: #47C6F2;
}

/* リンク（クリックされた状態） */
A:active {
	color: #47C6F2;
}

/* リンク（すでに見た状態） */
A:visited {
	color: #47C6F2;
}

/* ページの指定　*/
/*	margin-right: auto;
	margin-left: auto;
*/
#content {
	text-align: left;
	margin:0px;
	padding:0px;
	width:100%;
	}

/* ヘッダーの指定　*/
#header {
	height:90px;
	width:100%;
	background-color: #E9090F;
	border-bottom:2px solid #FFB362;
	padding:1px;
	margin:0px;
}

/* 記事部分の指定　*/
#center {
	position: absolute;
	left: 200px;
	top: 90px;
	margin:0px;
	padding-right:20px;
	}

/* 左メニューの指定　*/
#menu {
	padding-top:10px;
	
	margin:0px;
	width: 180px;
	background-color: #FFFBEB;
	}

/* 右メニューの指定　*/
/*	overflow: hidden;*/
/* float: left;*/
#menu2 {
	padding:1px;
	width: 180px;
	background-color: #FFFBEB;
	}

/* 左右のメニュースペースの余白 */
.sidebar {}

.cont_center{
width: 160px;}


/* ブログのタイトル */
.bTitle {
	position: absolute;
	top:15px;
	left:20px;
	color: #ffffff;
	font-size: 26px;
	line-height:30px;}

/* ブログタイトルのリンク（で使用） */
.bTitleLink{
	text-decoration: none;
}

/* ブログの概要 */
.bDesc {
	position: relative;
	top:5px;
	left:20px;
	color: #ffffff;font-size: 13px;
	line-height:16px;
}

/* カレンダー背景 */
.calendar {
	width:160px;
}

/* カレンダー年月 */
.calMonth {
	font-size:80%;
	font-weight:bold;
}

/* カレンダー曜日 */
.calWeek {
	color: #022F81;
	font-size:80%;
	font-weight: bold;
}

/* カレンダー日付 */
.calDay {
	font-size:80%;
}

/* カレンダー日付のリンク */
.calDayLinked {
	text-decoration: underline;
	font-weight: bold;
}

/* カレンダー前月、翌月 */
.calLink {
	font-size:80%;
}

/* カレンダー内の区切り */
.calRule {
	background-color:#E9090F;
}

/* 左メニューの各見出し */
.menuBar {
	font-size:80%;
	font-weight:bold;
	padding:3px;
	margin-left:6px;
	margin-right:6px;
	text-align:center;
	border-bottom:2px solid #E9090F;
}

/* 左メニューの背景 */
.menuBg {
	margin-left:8px;
	margin-right:8px;
}

/* 右メニューの背景 */
.menuBg2 {
	margin-left:8px;
	margin-right:8px;
}

/* 右メニューの各見出し */
.lgBar {
	font-size:80%;
	font-weight:bold;
	padding:3px;
	margin-left:6px;
	margin-right:6px;
	text-align:center;
	border-bottom:2px solid #E9090F;
}

/* エントリータイトル枠飾り */
.entryTitle {
	position:relative;
	top:-52px;
	border-top:2px solid #E9090F;
	padding-top:50px;
}

/* 過去の投稿（ENTRY ARCHIVE）のリスト */
.arcLink {
	font-size: 80%;
	font-weight: bold;
}

/* 最新の投稿（RECENT ENTRY）のリスト */
.entLink {
	font-size: 80%;
}

/* 最新のコメント（RECENT COMMENT）のリスト */
.comLink {
	font-size: 80%;
}

/* 最新のコメント（RECENT COMMENT）のリスト：投稿者名 */
.comText {
	font-size: 80%;
}

/* 最新のトラックバック（RECENT TRACKBACK）のリスト */
.traLink {
	font-size: 80%;
}

/* 最新のトラックバック（RECENT TRACKBACK）リスト：ブログ名 */
.traText {
	font-size: 80%;
}

/* カテゴリー（cotegory）のリスト */
.catLink {
	font-size: 80%;
	font-weight: bold;
}

/* ブックマーク（book mark）のリンク：サイト名 */
.bmLink {
	font-size: 80%;
	font-weight: bold;
}

/* ブックマーク（book mark）リスト：説明 */
.bmText {
	font-size: 80%;
}

/* プロフィールの見出し */
.pfTitle {
	color: #022F81;
	font-size:80%;
	font-weight: bold;
}

/* プロフィールの内容 */
.pfText {
	font-size:80%;
}

/* プロフィール、search下の区切り */
.rule {
	background-color:#E9090F;
}

/* 「URLを送信する」 */
.miscLink {
	font-size:80%;
}

/* 「（for PC & MOBILE）」 */
.miscText {
	font-size:80%;
}

/* 「ブログの作成・編集」 */
.adminLink {
	font-size:80%;
}

/* テーマサロンのリストの「・」「携帯からもアクセス」「QRコード（）」 */
.gooText {
	font-size:80%;
}

/* ログアウト時、ログインフォームの文字 */
.lgText {
	font-size:80%;
}

/* ログアウト時、ログインフォーム下の区切り線 */
.lgRule {
	background-color:#E9090F;
}

/* エントリーの背景 */
.entry {
}

/* エントリータイトル */
.etTitle {
	color: #E9090F;
	font-size: 110%;
	font-weight: bold;
}

/* エントリータイトルの飾り（で使用） */
.etTitleLink {
	text-decoration: none;
}

/* エントリー本文 */
.etBody {
	position:relative;
	top:-30px;
	font-size: 80%;
	line-height: 160%;}

/* エントリーに表示されているカテゴリ */
.etCategory {
}

/* エントリーに表示されている日時 */
.etTime {
	font-size:80%;
}

/* エントリーに表示されている「コメント（）」 */
.etCommentLink {
	font-size:80%;
}

/* エントリーに表示されている「トラックバック（）」 */
.etTBLink {
	font-size:80%;
}

/* エントリーに表示されているカテゴリー、時間などの「/」や「｜」 */
.etText {
	font-size:80%;
}

/* 前のページ、次のページ */
.etNextPrev {
	font-size:80%;
	border-top:2px solid #E9090F;
	padding-top:10px;
}

.etRule {
	background-color: #E9090F;
}

/* エントリー内の画像位置 */
.thumbnail {
}

/* --エントリー枠固定用（変更不可）-- */
.Posi{
 text-align: left;
 width: 100%;
}

/* コメントの背景（別ウィンドウ、エントリー下ともに） */
.comment {
}

/* エントリー下の「コメント」 */
.cmHeadText {
	font-size:80%;
}

/* エントリー下の「コメント」の囲み */
.cmHeadFrame {
}

/* エントリー下「コメントを投稿する」、別ウィンドウ「コメント」「コメントを投稿する」 */
.cmText {
	font-size:80%;
}

/* コメントタイトル（エントリー下、別ウィンドウともに） */
.cmTitle {
	font-size:80%;
	font-weight:bold;
}

/* コメント投稿者名（エントリー下、別ウィンドウともに） */
.cmName {
	font-size:80%;
}

/* コメント投稿日時（エントリー下、別ウィンドウともに） */
.cmDate {
	font-size:80%;
}

/* コメント見出しの各タイトル（エントリー下、別ウィンドウともに）と規約導入の文字 */
.cmForm {
	color: #022F81;
	font-size:80%;
}

/* コメント本文（エントリー下、別ウィンドウともに） */
.cmBody {
	font-size:80%;
}

/* トラックバックの背景（エントリー下、別ウィンドウともに） */
.trackback {
}

/* エントリー下の「この記事のTrackback Ping-URL」 */
.tbHeadText {
	color: #022F81;
	font-size:80%;
	font-weight:bold;
}

/* エントリー下の「この記事のTrackback Ping-URL」の囲み */
.tbHeadFrame {
}

/* 別ウィンドウの「この記事のTrackback Ping-URL」 */
.tbtrackback {
	color: #022F81;
	font-size:80%;
	font-weight:bold;
}

/* トラックバックURL（エントリー下、別ウィンドウともに） */
.tbUrl {
	font-size:80%;
}

/* トラックバックされた方のサイト名（エントリー下、別ウィンドウともに） */
.tbBTitle {
	font-size:80%;
}

/* トラックバックされた記事名（エントリー下、別ウィンドウともに） */
.tbETitle {
	font-size:80%;
	font-weight:bold;
}

/* トラックバック本文（エントリー下、別ウィンドウともに） */
.tbDesc {
	font-size:80%;
}