車馬鹿の手記

てなわけで、
風景写真の2カラムを少しばかりいじりまして・・
こちら
そのいじるためのスタイルシートのざっくり解説付きを公開
細部のコマンドは、リンクにあるスタイルシートの
リファレンスより調べてね。

本日、少しだけスタイルシートに解説付けました。
さらに、説明少しだけ追加

@charset "UTF-8";/*文字コード指定*/
/* lake */
/*使用フォント指定*/
*{font-family: "verdana", "helvetica", "osaka", "ＭＳ Ｐゴシック", sans

-serif;
}
textarea {font-family: "ヒラギノ明朝 Pro W6", "Osaka", "ＭＳ Ｐゴシッ

ク", "trebuchet MS", "trebuchet", "verdana", "arial", "sans-serif";
}
/*ベースの設定*/
body{
color :#000;/*文字色黒*/
margin :0px;/*領域外余白0*/
text-align :center;/*中央寄せ*/
background-color:#FFF5EE;/*背景色両サイドのもの*/
/* background :#000 url(/usr/%blog_id%/original.jpg);
padding :0px 0px 0px 0px;
*/
}
/*background の指定を下のものと入れ替えると、サイドを画像で埋められる*/
/*コメントおよびトラックバックフォームの設定*/
/*影響度不明？*/
form{
margin :0px;/*領域外余白*/
padding :0px;/*領域内余白*/
}
/*フォーム部分の配置設定*/
/*フォーム部分はこちらが優先*/
table.form{
margin :25px 0px 0px 13px;/*領域外余白　上と左が設定*/
}
/*ブログ内イメージの表示設定*/
img {
border :none;/*周囲の線を変更可能　doubleなど*/
}
/*これよりRSSがらみのセレクター*/
ul.rss{
margin : 0px;
padding : 0px;
width : 100%;
text-align : center;
}

ul.rss li{
border-right : #999 1px solid;
display : inline;
font-size : 90%;
font-style : normal;
font-weight : bold;
letter-spacing : 0.2px;
margin-right : 0.3em;
padding-right : 0.5em;
padding-left : 0.2em;
}

ul.rss a:link {color: #333333;text-decoration:none;}
ul.rss a:visited{color:#333333;text-decoration:none;}
ul.rss a:hover {color:#999999;text-decoration:none;}
ul.rss a:active {color:#333333;text-decoration:none;}
/*標準のリンクアンカーセレクター*/
/*font色、アンダーラインの有無*/
a{color:#336633;text-decoration:none;}/*通常時*/
a:link{color:#336633;text-decoration:none;}/*標準リンク時*/
a:visited{color:#CC3300;text-decoration:none;}/*訪問済み時*/
a:active{}/*クリック時、未設定*/
a:hover{color:#FF33CC;text-decoration:underline}/*マウスオーバー時*/
/*この部分ブログに使われていないので、コメントアウト済み
a.acalendar{color:#00FF66;text-decoration:none;}
a.acalendar:link{color:#00FF66;text-decoration:none;}
a.acalendar:visited{text-decoration:none;}
a.acalendar:active{}
a.acalendar:hover{color:#00FF66;text-decoration:underline}
*/
/*続きを読むのリンクアンカーセレクター　上の標準と同様*/
a.acontinues{color:#9400D3;text-decoration:none;}
a.acontinues:link{color:#9400D3;text-decoration:none;}
a.acontinues:visited{color:#B22222;text-decoration:none;}
a.acontinues:active{}
a.acontinues:hover{color:#FF00FF;text-decoration:underline overline}/*ア

ンダーラインとオーバーライン併用*/
/*記事下部のメニュー部分リンクアンカーセレクター*/
/*前ぺーじ、次ページの部分　並びは同様*/
/*これらは、文字色、装飾のみ記述されてます*/
a.amenu{color:#00FF7F;text-decoration:none;}
a.amenu:link{color:#DBA500;text-decoration:none;}
a.amenu:visited{color:#503830;text-decoration:none;}
a.amenu:active{}
a.amenu:hover{color:#3300CC;text-decoration:underline}
/*バナーやブログ記事本体、サイドバーが載っている部分設定*/
/*今回bodｙの背景色にあわせて左右に太い罫線あり*/
/*配色変更のほか、罫線スタイルの変更も可能*/
#container{
font-size :90%;/*fontサイズ*/
width :800px;/*全体ブロック幅Ａ*/
background-color:#ffffff;/*この部分の背景色*/
margin :0px auto;/*領域外余白、上下0　左右は自動調整*/
border-top-width:1px;/*上部罫線幅*/
border-right-width:10px;/*右罫線幅*/
border-bottom-width:1px;/*下部罫線幅*/
border-left-width:10px;/*左罫線幅*/
border-right-style:solid;/*右罫線形式*/
border-left-style:solid;/*左罫線形式*/
border-top-color:#ffffff;/*上部罫線色*/
border-right-color:#FFF5EE;/*右罫線色*/
border-bottom-color:#ffffff;/*下部罫線色*/
border-left-color:#FFF5EE;/*左系染色*/
text-align :left;/*左寄せ*/
}
/*トップのバナーの設定*/
#banner,#subbanner{
background :#000 url(/_img/lake/lake_bnr.jpg) top center

no-repeat;/*バナー背景色黒、画像指定、urlの入れ替えで変更可能　上部中央

揃え、反復なし*/
padding :0px 0px 0px 0px;/*領域内余白*/
height :250px; /*領域高*/
}
/*トップのブログタイトルのリンクアンカー指定*/
/*配色と文字装飾の設定が表示*/
#banner a{color:#FFFFFF;text-decoration:none;}
#banner a:link{color:#FFFFFF;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#FF0000;text-decoration:underline;}/*underline追加

、色変更*/
/*サブの設定ですが、仕様部位不明？削除可能？*/
#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{text-decoration:none;}
#subbanner a:active{}
#subbanner a:hover{color:#fff;text-decoration:none;}
/*タイトルや、日付、記事タイトルなどのセレクター*/
/*実質あまり使われてませんが、削除は不可能*/
h1,h2,h3{margin:0px;padding:0px;}
/*トップバナー内ブログタイトルの設定*/
/*paddingによって、配置設定*/
.blogtitle{
font-size :180%;/*fontサイズ*/
font-weight :bold;/*太字指定*/
padding :135px 0px 0px 10px;/*領域内余白→表示位置の指定

*/
text-align :left;/*左寄せ*/
letter-spacing :2px;/*文字間隔*/
}
/*ブログ概要の設定*/
.description{
color :#FFFBB2;/*文字色*/
font-size :90%;/*fontサイズ*/
padding :5px 0px 0px 10px;/*領域内余白→表示位置の指定*/
text-align :left;/*左寄せ*/
letter-spacing :2px;/*文字間隔*/
width :auto;/*領域幅自動設定*/
}
/*ブログ記事列の外枠設定*/
#content{
width :600px;/*領域幅Ｂ*/
margin :0px 0px 0px 0px;/*領域外余白*/
float :left;/*左配置*/
}
/*サイドバー部分の外枠設定*/
#links{
width :185px;/*領域幅Ｃ*/
float :right;/*右配置*/
text-align :left;/*左寄せ*/
margin :0px 5px 0px 0px;/*領域外余白右にに5px*/
padding :20px 0px 0px 0px;/*領域内余白上に20px*/
overflow :hidden;/*はみ出し処理は不可視*/
}
/*Ａ≧Ｂ+Ｃとなるような設定が必要*/
/*linksは右余白５なので190px右側を使用*/
/*フッター部分の指定*/
#footer{
clear :both;/*指定の解除*/
}
/*コピーライト部分の指定*/
#copyright{
background :#724526 bottom;/*背景色指定*/
width :100%;/*領域幅*/
height :20px;/*領域高*/
font-size :85%;/*fontサイズ*/
font-weight :normal;/*fontの太さ普通*/
color :#FFFBB2;/*fontの色*/
margin :0px;/*領域外余白0*/
padding :0px;/*領域内余白0*/
line-height :18px;/*行の高さ*/
text-align :center;/*中央寄せ配置*/
border-top :1px none #DBA500;/*上部罫線非表示*/
border-bottom :1px none #DBA500;/*下部罫線非表示*/
}
/*ブログ記事の枠指定*/
.blog{
margin :20px 10px 0px 15px;/*領域外余白上右下左

20.10.0.15px*/
}
/*日付部分の設定*/
/*gifより背景色の指定に変更しているので、ゴミ多数あり*/
.date{
background :#EEE8AA;/*背景色*/
background-repeat:no-repeat;/*画像反復なし*/
background-position:top center;/*上部中央そろえ*/
height :16px;/*領域高*/
background-position:1px 1px;
color :#008080;/*文字色*/
font-size :80%;/*fontサイズ*/
font-weight :bold;/*太字*/
letter-spacing :2px;/*文字間隔*/
padding :0px 0px 0px 0px;/*領域内余白なし*/
text-align :center;/*中央揃え*/
border-bottom :1px none #0000CC;/*罫線なし*/
border-top :1px none #0000CC;
}
/*ブログ記事枠内部分の指定*/
.blogbody{
background :#FFFFDD;/*背景色*/
margin :0px 0px 10px 0px;/*領域外余白下に10px*/
padding :8px;/*領域内余白*/
border-left :1px none #0000CC;
border-right :1px none #0000CC;
border-bottom :1px solid #0000CC;/*下罫線色指定*/
border-top :1px nole #0000CC;
}
/*個別記事のタイトル指定*/
.title{
background-image: url(/_img/lake/lake_title.gif);/*タイトル前の

アイコンの指定、入れ替え可能*/
background-repeat: no-repeat;/*アイコンの反復表示なし*/
background-position: left center;/*左側で上下中央寄せ指定*/
color:#0000CC;/*文字色*/
font-size :98%;/*fontサイズ*/
font-weight :bold;/*太字*/
height :25px;/*領域高*/
padding-left :40px;/*左余白、これでアイコンと重なるのを避けて

いる*/
padding-top :12px;/*上部領域内余白*/
text-align :left;/*左そろえ*/
}
/*記事表示部分の設定*/
/*Ｂ≧Ｄ+左右マージン*/
.main{
width :530px;/*記事部分の幅Ｄ*/
color :#000;/*文字色黒*/
font-size :90%;/*fontサイズ*/
margin :16px 10px 15px 20px;/*領域外余白*/
overflow :auto;/*はみ出しは自動処理*/
line-height :150%;/*行の高さ→行高*/
/* background :#FFFFFF;*/
/*上記コメントアウト部分は、背景色指定用*/
/* border-left :1px solid #ff0000;
border-right :1px solid #ff0000;
border-bottom :1px solid #ff0000;
border-top :1px solid #ff0000;*/
/*この上記コメントアウト部分は、記事部分領域表示用罫線指定*/
}
/*記事中の画像処理(表示)の方法指定*/
/*ここでborderしてすると、記事内画像はすべてその形式となる*/
/*　border:doubleなど*/
.main img{
margin :0px 10px 20px 0px;
}
/*続きはこちらの部分のfont指定*/
/*ここで指定しても、リンクアンカー部のほうが優先される*/
.main-continues{
font-size :100%;
}
/*記事内下部の、コメント･トラックバックなどの行の指定*/
/*この部分はリンクアンカーがあるので、其方が優先*/
.posted{
color :#DBA500;/*文字色*/
font-size :85%;/*文字サイズ、リンクアンカーに指定あり*/
text-align :right;/*右そろえ*/
margin :0px 0px 15px 0px;/*領域外余白、下に15px*/
width :530px;/*領域幅*/
}
/*上記の部分のリンクアンカー指定*/
/*fontサイズなど、こちらが優先される*/
a.aposted{color:#000000;text-decoration:none;font-size:85%;}/*通常時*/
a.aposted:link{color:#000000;text-decoration:underline;}/*リンク時*/
a.aposted:visited{color:#1E90FF;text-decoration:none;}/*訪問済み時*/
a.aposted:active{color:#FF1493;text-decoration:none;}/*クリック時*/
a.aposted:hover{color:#FF1493;text-decoration:underline;font-

weight:bold;}/*マウスオーバー時、太字指定追加済み*/
/*一番下の、前頁、次ページの列の指定*/
/*こちらも、リンクアンカーの指定のほうが優先される*/
/*アンカーは最初の方に記載済み*/
.menu{
color :#000;/*文字色*/
font-size :90%;/*fontサイズ*/
text-align :right;/*右寄せ*/
}
/*これよりコメント設定部分*/
/*コメント記事の部分の設定トラックバックＵＲＬの下部分*/
/*この記事へのこめんと　と書かれた部分*/
.comments-head{
color :#000;/*font色*/
font-size :90%;/*サイズ*/
font-weight :bold;/*太字*/
padding :0px 0px 0px 0px;/*領域内余白なし*/
height :10px;/*領域高*/
}
/*コメント記事本文部分の設定*/
.comments-body{
font-size :90%;/*fontサイズ*/
line-height :135%;/*行間指定*/
margin :20px 0px 15px 13px;/*領域外余白指定*/
}
/*コメントの投稿者、時間の表示されている行の設定*/
.comments-post{
color :#000;/*font色*/
font-size :90%;/*fontサイズ*/
text-align :right;/*右寄せ配置*/
margin :0px 0px 25px 0px;/*領域外余白下に25px*/
}
/*トラックバックＵＲＬの表示部分の設定*/
.trackback-url{
color :#691815;/*文字色*/
font-size :90%;/*fontサイズ*/
font-weight :bold;/*太字指定*/
margin :20px 0px 15px 13px;/*領域外余白*/
width :500px;/*領域幅*/
}
/*トラックバック本文の設定*/
.trackback-body{
font-size :90%;/*fontサイズ*/
line-height :135%;/*行間*/
margin :20px 0px 15px 13px;/*領域外余白*/
width :500px;/*領域幅*/
}
/*トラックバック元の表示列の設定*/
.trackback-post{
color :#000;/*font色黒*/
font-size :90%;/*fontサイズ*/
text-align :right;/*右寄せ配置*/
margin :0px 0px 25px 0px;/*領域外余白*/
width :500px;/*領域幅*/
}
/*トラックバック元リンクアンカーの設定*/
a.atrackback-post{color:#DBA500;text-decoration:none;}
a.atrackback-post:link{color:#DBA500;text-decoration:none;}
a.atrackback-post:visited{text-decoration:none;}
a.atrackback-post:active{font-weight:bold;}
a.atrackback-post:hover{color:#DBA500;text-decoration:underline}
/*コメント入力フォームの項目題名の設定*/
label{
font-size :85%;/*fontサイズ*/
font-weight :bold;/*太字指定*/
/* font-style :Italic;*/
/*上記コメントアウトをはずすと、イタリック体になります*/
}
/*コメント入力フォームの各枠の設定*/
#author{width:200px;border:1px solid #CCCCCC;}/*名前用の枠*/
#email{width:200px;border:1px solid #CCCCCC;}/*メール用の枠*/
#url{width:200px;border:1px solid #CCCCCC;}/*ＵＲＬ用の枠*/
#text{font-size:90%;width:400px;height:200px;border:1px solid #CCCCCC;}
/*コメント用の枠*/
/*このページの上への部分の指定*/
.pagetop{
font-size :85%;/*fontサイズ*/
text-align :right;/*右寄せ配置*/
margin :0px 0px 25px 0px;/*下余白25px*/
}
/*上記のリンクアンカー指定→これは独自に追加htmlも変更が必要*/
/*本来、apostedの指定であったので、fontサイズが強制的に決められていた*/
/*又配色も同じとなるので、変えたい場合は追加が必要*/
a.apagetop{color:#0033FF;text-decoration:none;font-weight: bold;}/*太字

指定*/
a.apagetop:link{color:#0033FF;text-decoration:none;}
a.apagetop:visited{color:#000099;text-decoration:none;}
a.apagetop:active{color:#FF1493;text-decoration:none;}
a.apagetop:hover{color:#FF1493;text-decoration:underline}
/*この下は、カレンダー設定部分*/
.calendarhead{
border-top :1px solid #917058;/*罫線指定*/
border-left :1px solid #917058;
border-right :1px solid #917058;
background :#EEE8AA;/*背景色指定*/
background-repeat:no-repeat;/*背景gif使用時に必要*/
background-position:left center;/*上に同じ*/
color :#008080;/*文字色*/
font-size :90%;/*fontサイズ*/
font-weight :normal;/*文字の太さ普通*/
letter-spacing :2px;/*文字送り*/
/* padding :0px 0px 2px 0px;領域内余白下に2px*/
/*明らかに上記の領域内余白はバグですね、下の設定で上書きされます*/
text-align :center;/*中央寄せ指定*/
padding :3px 0px 3px 5px;/*実際の領域内余白*/
}
/*カレンダーの枠組み形式設定*/
.calendartable{
margin :0px auto 20px auto;
width :100%;
text-align :left;
background :#FFF5EE;
border-top :1px solid #917058;
border-left :1px solid #917058;
border-right :1px solid #917058;
border-bottom :1px solid #917058;
}
/*週の設定？？*/
.calendarweek{
color :#000;/*font色*/
font-size :85%;
font-weight :bold;
}
/*曜日のマスの設定、ここでＢＧを下手につけると見づらい*/
.calendarwd{
background :#fff url();
color :#fff;
font-size :85%;
font-weight :bold;
letter-spacing :2px;
padding :2px 0px 2px 7px;
/* text-align :center;*/
/*上に書かれている、paddingで調整も可能ですが、中央寄せで曜日が真ん中に

表示されます*/
}
/*日付部分表示設定*/
/*尚、日付のリンク色は、標準のリンクアンカーと同じとなる*/
.calendard{
empty-cells :show;/*空白セルの表示*/
border-top :1px solid #efefef;/*罫線色指定*/
border-right :1px solid #efefef;
text-align :center;/*文字の中央寄せ*/
}

.calendardbg{}

.calendar{
font-size :90%;
padding :2px 2px;
position :center;
}
/*これよりサイドバー部分の設定*/
/*サイドバー見出し部分、カテゴリー、最近の記事など*/
.sidetitle{
border-top : 1px sorid #917058;/*罫線色指定ですが、表示され

ず・・・*/
border-left : 1px sorid #917058;/*バグかな？*/
border-right : 1px sorid #917058;
border-bottom : 1px sorid #917058;
background : #EEE8AA;/*背景色、追加*/
/* background-repeat:no-repeat;
background-position:right center;*/
/*上記は背景gif指定時用*/
color : #008080;/*サイドタイトルfont色*/
font-size : 90%;/*fontサイズ*/
font-weight : normal;/*太さは標準*/
letter-spacing : 2px;/*文字送り*/
padding : 4px 0px 3px 15px;/*領域内余白*/
}
/*サイドバーの各コンテンツ内の文字指定？*/
.side{
font-size :90%;/*fontサイズ*/
line-height :140%;/*行間指定*/
margin :0px 0px 10px 0px;領域外余白
padding :8px;/*領域内余白*/
}
/*サイドバーの各コンテンツ内の文の横幅指定*/
.side .text{
width :80px;
}

a.arss{color:#001F79;text-decoration:underline;}
a.arss:link{color:#001F79;text-decoration:underline;}
a.arss:visited{text-decoration:underline;}
a.arss:active{}
a.arss:hover{color:#001F79;text-decoration:none;}

/*サイドバー内の写真部分？*/
.photo{text-align:center;}
/*プロフィールの文字設定など*/
.nickname{
color :#FFFF99;/*文字色*/
font-weight :bold;/*太字指定*/
margin :10px 0px;/*領域外余白*/
text-align :center;/*中央揃え*/
}
/*プロフィールメッセージ部分の指定*/
.message{
font-size :85%;
color :#333;
padding :4px;
background :#ffefd5;
border :1px solid #dcdcdc;
}

.quotetable{}

.quote{
color :#000;
font-size :85%;
padding :1px;
}

.blogtimes{
margin :0px 0px 16px 0px;
text-align :center;
}

.powered{
text-align:center;
margin:0px 0px 10px 0px;
}

.syndicate{
font-size :85%;
text-align :center;
}

.checkers{
font-size :85%;
margin-top :10px;
}

a.adtitle{font-weight:bold;text-decoration:underline;}
a.adtitle:link{font-weight:bold;text-decoration:underline;}
a.adtitle:visited{font-weight:bold;text-decoration:underline;}
a.adtitle:active{font-weight:bold;text-decoration:underline;}
a.adtitle:hover{font-weight:bold;text-decoration:underline;}

a.addescription{color:black;text-decoration:none;}
a.addescription:link{color:black;text-decoration:none;}
a.addescription:visited{color:black;text-decoration:none;}
a.addescription:active{color:black;text-decoration:none;}
a.addescription:hover{color:black;text-decoration:none;}

a.adurl{color:blue;text-decoration:none;}
a.adurl:link{color:#0000FF;text-decoration:none;}
a.adurl:visited{color:#0000FF;text-decoration:none;}
a.adurl:active{color:#0000FF;text-decoration:none;}
a.adurl:hover{color:#0000FF;text-decoration:none;}

a.adld{text-decoration:underline;}
a.adld:link{text-decoration:underline;}
a.adld:visited{text-decoration:underline;}
a.adld:active{text-decoration:underline;}
a.adld:hover{text-decoration:underline;}
body.ad{background:#f7p39f;}
/*最上段、ナチュラムブログ関係のリンクバーの設定*/
/*bottomの罫線の色を変えるとアクセントになります*/
#bar{
width:100%;/*領域幅*/
height:28px;/*領域高*/
background:#EFEFEF url(_img/cust/bloghead.gif) left top;/*背景

gifの指定*/
border-bottom:1px solid #FF66FF;/*下部罫線アクセントに色変更済み

*/
text-align:right;/*右寄せ配置*/
}
/*最上段のバー内のテキストの設定*/
.blogbartext{
font-size:12px;
line-height:26px;
}
/*同じくそのリンクアンカー設定*/
/*マウスオーバー時に色が変わるだけではなく、強調文字になるように改変*/
.blogbartext{color:#666666;text-decoration:underline;}
.blogbartext:link{color:#666666;text-decoration:underline;}
.blogbartext:visited{color:#666666;text-decoration:underline;}
.blogbartext:active{color:#0000FF;text-decoration:none;}
.blogbartext:hover{color:#0000FF;text-decoration:none;font-

weight:bold;}/*fontが太字になるように追加*/