テンプレートの変更。

横長のＰＣ用ディスプレーの買換えに伴いＢｌｏｇの表示が間延びするようになり、テンプレートＣＳＳ設定を変更しました。
全画面表示を、左右に余白を持たせたレイアウトとなりました。

テンプレート変更テスト

横長モニターに対応できるように変更を模索中。

トップ画像他の変更

ブログトップ画像を、２００７年残雪期の穂高稜線に変更して・・。
#container、#contentの要素を変更しました。

合わせて『ｇｏｏブログヘッダ（ブログ・ランダム・ブログを作成）』の要素を非表示にしてみました。

和風の落ち着いた雰囲気になっているでしょうか？

トップ画像の変更。

ブログトップ画像を変えてみました。
２００７年・・残雪期の穂高稜線。

トップ画像の変更。

黎明・残雪期の槍ヶ岳。
ブログトップ画像と配色を変えてみました。



元の画像は西穂独標。

テンプレートの配置を元に戻してみました。

ブログの配置を元に戻してみました。

テンプレートの変更

ブログのテンプレートを変更してみました。



メニューを左に持ってきて、各項目のオーバーフロータグを追加しました。

テンプレートの変更

ブログトップ画像を変えてみました。



元の画像、西穂独標。

テンプレートの変更

ブログトップ画像と左右余白の配色を変えてみました。

テンプレートのＣＳＳ大公開、その２・・。

分割した続きのＣＳＳになります。


ここからがＣＳＳとなり、皆さまが分かりやすいようメモを書き込んでください。


/* メニューの各見出し */
.menuBar {
margin-left: 6px ; /* */
margin-right: 6px ; /* */
margin-bottom: 5px; /* */
padding: 0px 0px 0px 20px ; /* */
color: #000080 ; /* */
font-size: ;
font-weight: bold; /**/　
text-align: left; /* */
text-indent: 3px ; /* */
background-image: url(★);/* */
background-position: left ; /* */
background-repeat: no-repeat ; /* */
border-bottom:1px solid #6666CC ; /* */
}
/* メニューのリスト背景 */
.menuBg {
padding: 0% 0% 0% 1.5%;/* */
text-align: left;
}
/* カレンダー、プロフィール背景 */
.menuBgCen {
padding: 0px 0px 30px 0px;/* */
}
/* 左メニューのリスト内のテーブル位置 */
.menuBgCen table {
text-align: center;
}
/* 「ブログの作成・編集」 */
.adminLink {
color: ;
font-size: ;
}
/* テーマサロンのリストの「・」「携帯からもアクセス」「QRコード（）」 */
.gooText {
color: ;
}
/* ログアウト時、ログインフォームの文字 */
.lgText {
color: ;
font-size: ;
}
/* ログアウト時、ログインフォーム下の区切り線 */
.lgRule {
background-color: #ababab;
}
/* 過去の投稿（ENTRY ARCHIVE）のリスト */
.arcLink {
color: ;
font-size: ;
text-decoration: none ; /* */
}
/* カテゴリー（cotegory）のリスト */
.catLink {
color: ;
font-size: ;
text-decoration: none ; /* */
}
/* 最新の投稿（RECENT ENTRY）のリスト */
.entLink {
color: ;
font-size: ;
text-decoration: ;
}
/* 最新のコメント（RECENT COMMENT）のリスト */
.comLink {
color: ;
font-size: ;
text-decoration: ;
}
/* 最新のコメント（RECENT COMMENT）のリスト：投稿者名 */
.comText {
color: ;
font-size: ;
}
/* 最新のトラックバック（RECENT TRACKBACK）のリスト */
.traLink {
color: ;
font-size: ;
text-decoration: ;
}
/* 最新のトラックバック（RECENT TRACKBACK）リスト：ブログ名 */
.traText {
color: ;
font-size: ;
text-decoration: ;
}
/* ブックマーク（bookmark）のリンク：サイト名 */
.bmLink {
color: ;
font-size: ;
text-decoration: none ; /* */
}
/* ブックマーク（bookmark）リスト：説明 */
.bmText {
color: ;
font-size: ;
}
/* プロフィールの見出し */
.pfTitle {
background-color: #F0F8FF; /* */
border: 1px solid #00447e; /* */
font-weight:bold; /**/　
color: #000080; /**/
display:block; /* */
padding: 2px 2px 2px 4px; /* */
}
/* プロフィールの内容 */
.pfText {
border: 1px solid #00447e; /* */
display:block; /* */
color: #00447e; /* */
padding: 2px 2px 2px 4px; /* */
}
/* 「URLを送信する」 */
.miscLink {
font-size: ;
text-decoration: ;
}
/* 「（for PC & MOBILE）」 */
.miscText {
color: ;
background-image: url()*/

}

/* 崩れ防止 */
.Clear-Both {
clear:both; /* */
height:1px; /* */
font-size:1px;
overflow:hidden;
}
/*** gooAd ***/

/* iframeの設定 */
.gooAd_iframe {
padding: 0px 0px 30px 0px;
}

/* テーブル全体 */
.gooAd {
cursor: hand;
}

/* テーブル個別セル設定 */

/* スポンサーリンクセル */
TD.gooAd_sponsor_td {
font-size: 9px;
padding: 3px 3px 2px 3px;
text-align: left;
color: #999 !important;
}

/* タイトルセル */
TD.gooAd_title_td {
font-size: 11px;
padding: 4px 3px 0px 3px;
text-align: left;
}

/* URLセル */
TD.gooAd_url_td {
font-size: 10px;
padding: 4px 3px 0px 3px;
text-align: right;
}

/* テキストセル */
TD.gooAd_text_td {
font-size: 8px;
padding: 3px 3px 3px 3px;
text-align: left;
}

/* スペーサーセル */
TD.gooAd_btm_td {
font-size: 20px;
padding: 3px 3px 3px 3px;
}

/* 文字個別設定 */

/* スポンサーリンク文字 */
a.gooAd_sponsor {
text-decoration: none !important;
color: #999 !important;
}

/* タイトルリンク文字 */
a.gooAd_title {
font-weight: bold !important;
text-decoration: underline !important;
color: #666 !important;
}

/* URLリンク文字 */
a.gooAd_url {
text-decoration: none !important;
color: #666 !important;
}

/* テキストリンク文字 */
a.gooAd_text {
text-decoration: none !important;
color: #333 !important;
}

ＣＳＳを二つの記事に分けて記載しましたが、ＣＳＳ編集では結合させてください。

最後に、ＨＴＭＬとＣＳＳを完全に理解している訳ではありませんが、参考にして頂ければ幸いです。
もし間違い等があるようでしたらコメントをいただければありがたいですね・・。

テンプレートのＣＳＳ大公開、その１・・。

３月１日にテンプレートが完成した後にも、本サイトには一日１０～２０ＩＰのアクセスがあり、テンプレート・カスタマイズ・ＣＳＳ・Ｗｅｂデザインなどのキーワードで検索されてお手を運んで頂いているようです。
ポイント別に約１０回の記事を書いてきましたが、系統立てたＣＳＳにはなっていません。

そこで、このサイトにお手を運んで頂いた方々にテンプレートのＣＳＳを公開します。
基本のテンプレートは「クリアホワイト左メニュー」になります。


Ｇｏｏブログの記事では文字数の制限があるので、詳細は消し込みしました。
ここからがＣＳＳとなり、皆さまが分かりやすいようメモを書き込んでください。

/*Ｗｅｂデザインで脳内活性のＣＳＳ 2007.02.22スタート 03.01完成*/
/* クリアホワイト左メニューのCSS */
/* ページ全体共通指定 */
/* ページ全体の背景と余白 */
body {
margin:0%; /* */
padding:0% 0%; /* */
background-image: url();
background-repeat: ;
background-position: ;
background-color: #DCE3A1 ; /* */
text-align:center; /* */
line-height: 1.4 ; /* */
}
/* ページ全体の文字　*/
BODY,TD,DIV {
color: #00447e ; /* */
font-size: SMALL ; /* */
}
/* タイトル、見出し関連初期設定　*/
h1, h2, h3 {
margin: 0px ; /* */
padding: 0px ; /* */
font-size: 100% ; /* */
font-weight: normal ; /* */
line-height: 1.4 ; /* */
}
/* ページの幅　*/
#container{
padding:0% 1%; /* */
text-align: center; /**/
background-color: #191970 ; /* */
}
/* ページの幅　*/
#content{
margin-left:auto; /* */
margin-right:auto; /* */
width: 98%; /* */
text-align:left; /* */
border-right: 1px solid #FF6633 ; /* */
border-left: 1px solid #FF6633 ; /* */
}
/* ボディの囲み */
#main {
margin:0px; /* */
width: 100%; /* */
text-align: left; /* */
background-image: url(★）; /* */
background-repeat: repeat ; /* */
border-top: 1px solid #FF6633 ; /* */
}
/* 全体のリンク飾り */
A {
color: #0000FF ; /* */
text-decoration: none ; /* */
}
* リンク（まだ見ていない状態） */
A:link {
color: #0000FF ; /* */
text-decoration: none ; /* */
}
/* リンク（マウスポインタを乗せた状態） */
A:hover {
color: #47C6F2 ; /* */
text-decoration: underline ; /* */
}
/* リンク（クリックされた状態） */
A:active {
color: #47C6F2 ; /* */
text-decoration: none ; /* */
}
/* リンク（すでに見た状態） */
A:visited {
color: #7CFC00 ; /* */
text-decoration: none ; /* */
}
/* ヘッダーの指定　*/
#header {
margin: 0px ; /* */
padding: 0px ; /* */
text-align: left; /* */
background-repeat: no-repeat ; /* */
background-position: center ; /* */
background-color: #E6E6FA ;/* */
width: 100% ; /* 　*/
height: 220px ; /* */
background-image: url(★)/* */
}
/* ブログのタイトル */
.bTitle {
position: absolute ; /* */
top: 60px ; /* */
left: 80px ; /* */
color: #00447e ; /* */
text-align: left; /* */
font-size: 220% ; /* */
font-weight: bolder ; /* */
font-family: "HG正楷書体-PRO","HGP明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝", 細明朝,'MS P ゴシック',Century Gothic,Verdana,Helvetica,Airal,sans-serif,Osaka ;/*■ 文字種類 */
line-height: 30px ; /* */
}
/* ブログタイトルのリンク（<a href="#" class="etTitleLink">で使用） */
.bTitleLink {
text-decoration: underline ; /* */
}
/* ブログの概要 */
.bDesc {
position: absolute ; /* */
top: 100px ; /* */
left: 86px ; /* */
text-align: left; /* */
font-size: 90% ; /* */
font-weight: normal ; /* */
font-family: Century Gothic,Verdana,Helvetica,Airal,sans-serif,"HG正楷書体-PRO","HGP明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝", 細明朝,'MS P ゴシック',Osaka ;/*■ 文字種類 */
line-height: 1.4 ; /* */
}
/* エントリーレイアウト用　*/
#center{/* エントリー幅 entryの内側 */
height:100%;
}
/* メニューレイアウト用　*/
#sideBar {
margin: 2% 1% 1% 1%; /* */
padding:0% 0%; /* */
}
/* エントリーレイアウト用 */
.oneEntry {
}
/* エントリー背景　*/
#entry{/* エントリー大外幅 */
float:right; /* */
width : 72%; /* */
margin: 1% 1.5% 2% 0% ; /* */
padding: 0%; /* */
overflow: hidden ;/* */
height:100%;
}
/* エントリータイトル */
.etTitle {
margin-left: 12px ; /* */
color: #000080 ; /* */
font-size: large ; 　/* */
font-weight: bold ; /**/　
}
/* エントリータイトル下点線 */
.etTitleKazari {
margin-top: 20px ; /* */
padding: 4px 0px; /* */
font-weight: bold ; /**/　
background-color: #ECEEDD ; /* */
border-bottom: 1px ridge #A9A9A9 ; /* */
border-left: 6px ridge #ADD8E6 ; /* */
}
/* エントリータイトルの飾り（<a href="#" class="etTitleLink">で使用） */
.etTitleLink {
text-decoration: none;
}
/* エントリー本文 */
.etBody {
color: #808000 ; 　　/* */
font-size: 110% ; 　/* */
line-height: 1.4 ; /* */
word-break: break-all ; /* */
text-align: left ; /* */
}
/* エントリー本文背景 */
.entryBg{
margin:0px 0px 0px 0px;/* */
padding: 10px; /* */
background-color: ; /* */
}
/* エントリー本文上の情報レイアウト用 */
.entryHead{
padding: 10px 0px 0px 0px;/* */
font-size: ;
}
/* エントリー本文上の情報のリンク */
.entryHead a{
text-decoration: ;
}

/* エントリー本文下の情報レイアウト用 */
.entryFoot{
padding: 20px 0px 0px 0px;/* */
font-size: ;
clear:left; /* */
}
/* エントリー本文下の情報のリンク */
.entryFoot a{
text-decoration: ;
}
/* エントリーに表示されているカテゴリ */
.etCategory {
color: ;
font-size: ;
}
/* エントリーに表示されている日時 */
.etTime {
color: ;
font-size: ;
}
/* エントリーに表示されている「コメント（）」 */
.etCommentLink {
color: #808000 ;　/* */
font-size: ;
}
/* エントリーに表示されているコメントの数字 */
.etCommentLink A {
color: #808000 ;　/* */
font-size: ;
}
/* エントリーに表示されている「トラックバック（）」 */
.etTBLink {
color: #808000 ;　/* */
font-size: ;
}
/* エントリーに表示されているトラックバックの数字 */
.etTBLink A {
color: #808000 ;　/* */
font-size: ;
}
/* エントリーに表示されているカテゴリー、時間などの「/」や「｜」 */
.etText {
color: #808000 ;　/* */
font-size: ;
}
/* 各エントリー、コメント、トラックバックの区切り線 */
.etRule {
}
/* 前のページ、次のページ */
.etNextPrev {
padding-top: 20px ; /* */
color:;
font-weight: bold; /**/　
}
/* エントリー内の画像位置 */
.thumbnail {
padding: 0px 10px 0px 0px;/* */
float: left ; /* □ 左フロート*/
}
/* コメント、トラックバック背景（エントリー下） */
#comment-trackback {
margin: 0px 0px 20px 0px ; /* */
}
/* コメント背景（別ウィンドウ、エントリー下ともに） */
.comment {
background-image: url(★）; /* */
border: 1px solid #6666CC ; /* */
}

/* コメントの囲み（別ウィンドウ、エントリー下ともに） */
.comment .comment {
background-color:#fff;
border:1px solid #D7D7D7; /* */
padding:5px;/* */
}
/* エントリー下の「コメント」 */
.cmHeadText {
color: ;
background-color: ;
font-weight: bold; /**/　
font-size: 106% ; 　　　/* */
}
/* エントリー下の「コメント」の囲み */
.cmHeadFrame {
background-color: ;
}
/* エントリー下「コメントを投稿する」、別ウィンドウ「コメント」「コメントを投稿する」 */
.cmText {
color: ;
font-size:12px;
font-weight: bold;/**/　
}
/* コメントタイトル（エントリー下、別ウィンドウともに） */
.cmTitle {
color: ;
font-size: 106% ; 　/* */
font-weight: bold ; /**/　
}
/* コメント投稿者名（エントリー下、別ウィンドウともに） */
.cmName {
font-size: 106% ; 　/* */
}
/* コメント投稿日時（エントリー下、別ウィンドウともに） */
.cmDate {
font-size: 106% ; 　/* */
}
/* コメント見出しの各タイトル（エントリー下、別ウィンドウともに）と規約導入の文字 */
.cmForm {
color: ;
font-size:12px;
}
/* コメント本文（エントリー下、別ウィンドウともに） */
.cmBody {
color: #808000 ; 　　/* */
font-size: 106% ;　　/* */
text-align: left ; /* */
line-height: 1.4 ; /* */
word-break: break-all ; /* */
}
/* トラックバックの背景（エントリー下、別ウィンドウともに） */
.trackback {
background-color: ;
}
/* トラックバックの囲み（別ウィンドウ、エントリー下ともに） */
.trackback .trackback {
background-color:#fff;
border:1px solid #D7D7D7;
padding:5px;/* */
}
/* エントリー下の「この記事のTrackback Ping-URL」 */
.tbHeadText {
color: ;
background-color: ;
font-size:12px;
font-weight: bold;/**/　
}
/* エントリー下の「この記事のTrackback Ping-URL」の囲み */
.tbHeadFrame {
background-color: ;
}
/* 別ウィンドウの「この記事のTrackback Ping-URL」 */
.tbtrackback {
color: ;
font-size:12px;
font-weight: bold;/**/　
}
/* トラックバックURL（エントリー下、別ウィンドウともに） */
.tbUrl {
color: ;
font-size:9px;
white-space: nowrap;
}
/* トラックバックされた方のサイト名（エントリー下、別ウィンドウともに） */
.tbBTitle {
font-size:12px;
}
/* トラックバックされた記事名（エントリー下、別ウィンドウともに） */
.tbETitle {
color: ;
font-size:12px;
font-weight: bold;/**/　
}
/* トラックバック本文（エントリー下、別ウィンドウともに） */
.tbDesc {
font-size:12px;
line-height: 150%;
}
/* カレンダー背景 */
.calendar {
font-size: ;
}
/* カレンダー年月 */
.calMonth {
color: ;
font-weight: bold; /**/　
}
/* カレンダー曜日 */
.calWeek {
color: ;
font-weight: bold; /**/　
}
/* カレンダー日付 */
.calDay {
}
/* カレンダー日付のリンク */
.calDayLinked {
font-weight: bold; /**/　
text-decoration: none ; /* */
}
/* カレンダー前月、翌月 */
.calLink {
font-size: ;
font-weight: bold; /**/　
text-decoration: none ; /* */
}
/* カレンダー内の区切り */
.calRule {
background-color: #a0a1ad;
}
/* gooお奨めリンク内「携帯」 */
.lgBar {
color: #333333;
font-size: ;
font-weight: bold;
text-align: left;
background-image: url(/images/tmp_sm_wh_l/menu_icon.gif);
background-position: left center;
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
margin-bottom: 5px;
}
/* メニュー背景 */
#menu {
float:left; /* □ 左フロート*/
margin: 0% 2% 2% 0% ; /**/
padding: 0px; /* */
background-color: #E6E6FA ;/* */
width:20%; /* */
}
/* メニュー全体の文字　*/
#sideBarW, #sideBarW td ,#sideBarW td div,#sideBarW, #sideBarW td {
color: ;
font-size: ;
}
/* メニューのリンク（まだ見ていない状態）　*/
#sideBarW a, #sideBarW td a {
color: ;
font-size: ;
}


やはり、文字制限で・・約９，０００文字近くになりました・・。

Gooブログでは一つの記事が１０，０００文字の制約が有り、全てのＣＳＳを一つの記事で表示しきれないので・・これ以降は、分割します・・・。

テンプレートのカスタマイズが完了しました・・。

２月２２日にこのサイトを開設して、本日ようやくテンプレートのカスタマイズが完了しました。
黎明彩香_Blogのテーブルが崩れて、あれこれと手を尽くすものの行き場を失いかけていましたが・・。
このサイトに記述したように、元のＣＳＳを忠実に手を加え、ここまで来れたようです。

ディスプレイの解像度に関しても、今現在の調査で、もっとも使われている解像度が、1,024×768ドット（XGA）と1,280×1,024ドット（SXGA）を合わせると８０％近くとなっているようで、そのことも頭に叩き込んで解析を続けました。
最も苦労したのは、やはりテーブルの崩れ（カラム落ち）でした。
クリアホワイト・左メニューでは、メニューを左に寄せて、エントリーを左に寄せる設定でＣＳＳが書かれています。
その設定を最終的に上手く解除しないとカラム落ちの原因にもなり気をつけました。
/* メニュー背景 */
#menu {
float:left; /* □ 左フロート*/
}
/* エントリー背景　*/
#entry{/* エントリー大外幅 */
float:right; /* □ 左フロートを使わず右フロートを設定する */
}
/* エントリー本文下の情報レイアウト用 */
.entryFoot{
clear:left; /* □ 左フロートの解除*/
}
/* エントリー内の画像位置 */
.thumbnail {
float: left ; /* □ 左フロート*/
}

/* 崩れ防止 */
.Clear-Both {
clear:both; /* □ 全てのフロート解除*/
}
左右の float 途中の clear そして最後に崩れ防止のセレクターで全ての float を解除することによってカラム落ちを防いでいるようです。


完成したＣＳＳの反映状況を２つのブラウザで確認すると、Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒも・・。

Ｍｏｚｉｌｌａ Ｆｉｒｅｆｏｘでも上手く表示されています。


いかがでしたでしょうか？
ＨＴＭＬとＣＳＳを完全に理解している訳ではありませんが、参考にして頂ければ幸いです。

また折を見て別のテンプレートにも再挑戦してみようかとも考えています。

クリアホワイト左メニューのＣＳＳ－９

クリアホワイト・左メニューテンプレートのカスタマイズが完成間近です・・。

今回は、左メニュープロフィール欄の設定。

ＣＳＳの反映状況を２つのブラウザで確認すると、Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒも・・。

Ｍｏｚｉｌｌａ Ｆｉｒｅｆｏｘも上手く表示しました。


クリアホワイト系では、プロフィール欄に装飾が施すことが出来て、枠線や背景色の設定も可能です。
/* プロフィールの見出し */
.pfTitle {
background-color: #F0F8FF; /*■ 背景・AliceBlue色 */
border: 1px solid #00447e; /*■ 下線・ブルー系色 */
font-weight:bold; /*■ 文字の太さ・bold 一般的な太さ*/　
color: #000080; /*■ 文字・#000080 navyブルー系色 */
display:block; /*□ 指定要素をブロックレベルで表示 */
padding: 2px 2px 2px 4px; /* ■ コンテンツの内側の余白 */
}

/* プロフィールの内容 */
.pfText {
border: 1px solid #00447e; /*■ 下線・ブルー系色 */
display:block; /*□ 指定要素をブロックレベルで表示 */
color: #00447e; /*■ 文字色・ブルー系 */
padding: 2px 2px 2px 4px; /* ■ コンテンツの内側の余白 */
}

これでテンプレートが出来上がりました。
いかがでしたでしょうか？

今回は ＨＴＭＬ との関連性は複雑になるので記述はしませんでした。
・・・と、言うより、、私自身もＣＳＳやＨＴＭＬの専門知識に乏しいからなのですが・・・
ページの最下部に一部枠線を残していますが、、次の記事に委ねたいと思います。

クリアホワイト左メニューのＣＳＳ－８

クリアホワイトＣＳＳの設定が間違ったのか・・一度、テーブルが崩れ、
改めてＣＳＳを書き換えたら２つのブラウザに上手く反映されました。

今回は、
１．左メニューの文字設定。
２．エントリーの文字設定。
おまけ・・ブログタイトル＆概要の設定。

ＣＳＳの反映状況を２つのブラウザで確認すると。

Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒも・・。

Ｍｏｚｉｌｌａ Ｆｉｒｅｆｏｘも上手く表示しました。


左メニューの文字設定をしますが「ページ全体の文字」設定の色と大きさが継承されます。
/* ページ全体の文字　*/
BODY,TD,DIV {
color: #00447e ; /* ■ 文字色・ブルー系色 */
font-size: SMALL ; /* ■ 文字の大きさ SMALL-100% */
}

/* カレンダー年月 */
.calMonth {
color: ;
font-weight: bold; /*■ 文字の太さ・bold 一般的な太さ*/　
}

/* カレンダー曜日 */
.calWeek {
color: ;
font-weight: bold; /*■ 文字の太さ・bold 一般的な太さ*/　
}

/* カレンダー日付のリンク */
.calDayLinked {
font-weight: bold; /*■ 文字の太さ・bold 一般的な太さ*/　
text-decoration: none ; /* ■ 通常時のハイパーリンクの設定 underline → none */
}

/* カレンダー前月、翌月 */
.calLink {
font-size: ;
font-weight: bold; /*■ 文字の太さ・bold 一般的な太さ*/　
text-decoration: none ; /* ■ 通常時のハイパーリンクの設定 underline → none */
}

/* メニューの各見出し */
.menuBar {
margin-left: 6px ; /* ■ コンテンツの外側の余白 左マージン 6px */
margin-right: 6px ; /* ■ コンテンツの外側の余白 右マージン 6px */
margin-bottom: 5px; /* ■ コンテンツの外側の余白*/
padding: 0px 0px 0px 15px ; /* ■ コンテンツの内側の余白 3px →0px */
color: #000080 ; /* ■ 文字・#000080 navyブルー系色 */
font-size: ;
font-weight: bold; /*■ 文字の太さ・bold 一般的な太さ*/　
text-align: left; /* ■ 文字の左寄せ */
text-indent: 3px ; /* ■ 文字の段落、インデント幅・16px*/
background-image: url("▲.png");/*■ 画像のＵＲＬ */
background-position: left ; /* ■ 画像の表示位置・左 */
background-repeat: no-repeat ; /* ■ 画像繰り返し・無し */
border-bottom:1px solid #6666CC ; /* ■ 下枠色・#6666CC ブルー系色・普通の線 */
}

エントリーの文字設定で、タイトル部分に付箋紙っぽい枠線を入れてみました。
* エントリータイトル */
.etTitle {
margin-left: 12px ; /* ■ コンテンツの外側の余白・左マージン12px */
color: #000080 ; /* ■ 文字・#000080 navyブルー系色 元 #E9090F */
font-size: large ; 　/* ■ 文字の大きさ・130% */
font-weight: bold ; /* ■ 文字太さ・太く */
}

/* エントリータイトル下点線 */
.etTitleKazari {
margin-top: 20px ; /* ■ コンテンツの外側の余白・上マージン12px */
padding: 4px 0px; /* ■ コンテンツの内側の余白 文字位置・padding-top: 6px */
font-weight: bold ; /* ■ 文字太さ・太く */
background-color: #ECEEDD ; /* ■ タイトル背景色・創作色 */
border-bottom: 1px ridge #A9A9A9 ; /* ■ 枠色・DarkGray・山型の線 */
border-left: 6px ridge #ADD8E6 ; /* ■ 付箋紙っぽい縦枠色線・LightBlue ADD8E6 */
}

/* エントリー本文 */
.etBody { /*本文の文字設定・背景範囲には影響せず*/
color: #808000 ; 　　/* ■ 文字色・olive */
font-size: 110% ; 　/* ■ 文字の大きさ */
line-height: 1.4 ; /* ■ 文字の行間・フォントの1.4=140% 一番読みやすいと言われている行間設定 */
word-break: break-all ; /* ■ 禁則処理なしでの改行 */
text-align: left ; /* ■ 文字の左寄せ */
/*border: 2px solid #006400; ★ ダークグリーン色*/
}

/* エントリー本文背景 */
.entryBg{/* エントリー幅 entry→center→oneEntryの内側 */
padding: 15px;
background-color: ; /* ■ 背景色・なし */
margin:0px 0px 10px 0px;
/*border: 2px solid #FFFF00; ★ 黄色*/
}

おまけで、ブログタイトル＆概要の設定をしてみます。
position: absolute の絶対位置への配置を設定して、タイトルと概要の上下を入れ替えてみました。
/* ブログのタイトル */
.bTitle {
position: absolute ; /* ■ 絶対位置への配置 */
top: 60px ; /* ■ 文字位置 60px */
left: 80px ; /* ■ 文字位置 */
color: WhiteSmoke ; /* ■ 文字色・白色系 #ffffff */
text-align: left; /* ■ 文字の左寄せ */
font-size: 220% ; /* ■ 文字の大きさ */
font-weight: bolder ; /* ■ 文字太さ・極太 */
font-family: "HG正楷書体-PRO","HGP明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝", 細明朝,Osaka ;/*■ 文字種類・引続き使用 */
line-height: 30px ; /* ■ 行の間隔 */
}

/* ブログの概要 */
.bDesc {
position: absolute ; /* ■ 絶対位置への配置 */
top: 100px ; /* ■ 文字位置 60px */
left: 86px ; /* ■ 文字位置 4520px→70px */
color: WhiteSmoke ; /* ■ 文字色・白色系 */
text-align: left; /* ■ 文字の左寄せ */
font-size: 90% ; /* ■ 文字の大きさ・80% 元13px */
font-weight: normal ; /* ■ 文字太さ・細く */
font-family: "HG正楷書体-PRO","HGP明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝", 細明朝,Osaka ;/*■ 文字種類・引続き使用 */
line-height: 1.4 ; /* ■ 行の高さ・フォントの1.4=140% 一番読みやすいと言われている行間設定 */
}

これでほぼ全体のテンプレートが出来上がりに近づきました、次は残り部分の細部調整を掲載します。

クリアホワイト左メニューのＣＳＳ－７

クリアホワイトＣＳＳの設定が今のところ２つのブラウザに上手く反映されています。

今回は、
１．左メニューに背景色を付けて配置の調整。
２．エントリーに背景画像を付る。
３．全体の背景色を付ける。

ＣＳＳの反映状況を２つのブラウザで確認すると。

Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒも・・。

Ｍｏｚｉｌｌａ Ｆｉｒｅｆｏｘも上手く表示しました。


左メニューの背景色にラベンダーを指定し、margin 指定で配置の調整を行います。
/* メニューレイアウト用　*/
#sideBar {
margin: 1% 2% 2% 2%; /* ■ コンテンツの外側の余白 */
padding:0% 0%; /* ■ コンテンツの内側の余白 0% 2% - 0%*/
border: 2px solid #FF0000; /* ★ 赤色*/
}

/* メニュー背景 */
#menu {
float:left; /* □ 左フロート*/
margin: 0% 2% 2% 0% ; /* ■ コンテンツの外側の余白 0px-0% 2% 2% 2% 単位を%に*/
padding: 0px; /* ■ コンテンツの内側の余白 widthを指定しているので 15px 0px 15px 10px-0px */
background-color: #E6E6FA ;/* ■ 背景色・ラベンダーLavender */
width:20%; /* ■ 幅 170px-20%*/
border: 2px solid #00BFFF; /* ★ 青色*/
}

エントリーに背景画像を付ける。
淡いクレーの画像で見にくいかもかもしれません。
* ボディの囲み */
#main {/* 記事・メニューの背景囲み content幅と同じ */
margin:0px;
font-family: ;
/*border-right: 1px solid #D7D7D7;*/
/*border-left: 1px solid #D7D7D7;*/
/*border-top: 1px solid #D7D7D7;*/
width: 100%; /* ■ 幅 760px-96-99-100%*/
text-align: left;
background-image: url(▲.jpg); /*■ 全体画像のＵＲＬ */
background-repeat: repeat ; /* ■ 画像繰り返し・あり */
border: 2px solid #006400; /* ★ ダークグリーン色*/
}

全体の背景色を付けるのですが、body 背景色だけでも良いです。
もし背景色が濃い色だとコメントの別画面に反映されるので、レイヤーの重なりを利用して container に背景色を付けるのも一つの手です。
/* ページ全体の背景と余白 */
body {
background-image: url();
background-repeat: ;
background-position: ;
margin:0%; /* ■ コンテンツの外側の余白 */
padding:0% 0%; /* ■ コンテンツの内側の余白 0% 2% - 0%*/
background-color: #DCE3A1 ; /* ■ 全体の背景色*/
text-align:center; /*■ IEのmargin:auto対応：ブロック要素のセンタリング */
/*border: 2px solid #FF0000; ★ 赤色*/
}

* ページの幅　*/
#container{ /*bodyの直ぐ内側・ページの大外幅　*/
/*margin: 0px auto;*/
padding:0% 1%; /* ■ コンテンツの内側の余白 */
text-align: center;
/*width: 100%; ■ 幅 100%*/
background-color: #577783 ; /* ■ 左右及び全体背景色*/
/*border: 2px solid #000080; ★ Navy色*/
}

これで全体の背景色と画像が決りましたので、次はメニューとエントリー部分の細部調整を掲載します。