⑤/*-----Footer-----*/

/*-----Footer-----*/

【フッター部分】
#footer{
width:770px;
margin:0 auto;
padding:20px 0;
clear:both;
}
幅　770px
margin 上下0　左右自動
padding　上下20px　左右0
回り込み解除



【一番右下】
.copyright{
padding:0;
margin:0;
font-size:x-small;
text-align:right;
}
So-netトップ - ブログ - ソネットポイントの部分
paddin 上下左右0
margin 上下左右0
文字の大きさ　x-small
テキスト　右側に配置

タグ：CSS ブログ カスタマイズ so-net

④/*-----Side-----*/

/*-----Side-----*/(サイドバー)

【サイドバー全体】
#side-a, #side-b {
width:202px;
color:#ffffff;
overflow:hidden;
}
幅202px
色ffffff(白)
スクロールバー非表示



【プロフィール・カレンダー・Nice!と思った人・月別表示など】
.sidebar {
width:202px;
overflow:hidden;
}
幅202px
スクロールバー非表示



【サイドバーのタイトル部分】
.sidebar-title {
margin:0;
padding: 2px 6px 2px 30px;
background:#c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top;
color: #c87a10;
font-size: x-small;
font-weight:normal;
}
margin 0
padding 上2px　右6px　下2px　左30px
背景画像/_common/skins/509/images/sidebar_h3_bg.gif
繰り返しなし・左側に配置(泡の画像です)
色　c87a10
文字の大きさ　x-small
文字の太さ　　標準



.sidebar-title a:link{ text-decoration: none; color:#ffffff; }
　サイドバータイトルの未訪問リンクの文字装飾なし・色ffffff(白)

.sidebar-title a:visited{ text-decoration: none; color:#ffffff; }
　サイドバータイトルの訪問済みリンクの文字装飾なし・色ffffff(白)

.sidebar-title a:active{ text-decoration: none; color:#ffffff; }
　その部分を選択しているときのリンク・文字装飾なし・色ffffff白

.sidebar-title a:hover{ text-decoration: underline; color:#ffffff; }
　サイドバータイトルにマウスが乗っている時、文字装飾下線・色ffffff(白)



【サイドバーの内容の部分】
.sidebar-body {
padding:6px 12px 3px 12px;
}
padding 上6px　右12px　下3px　左12px



【サイドバーの内容の部分の
ul li(=htmlタグ　非序列リスト)
dl dt dd (=htmlタグ　定義語)
form(=htmlタグ　入力フォームを作成する)】
.sidebar-body ul, .sidebar-body li, .sidebar-body dl, .sidebar-body dt, .sidebar-body dd, .sidebar-body form {
margin:0;
padding:0;
}
margin 上下左右0
padding　上下左右0



【サイドバーの内容の中の
liタグ(非序列リスト)】
.sidebar-body li {
margin-bottom:9px;
list-style-type:none;
line-height:1.3;
}
サイドバーの内容の中の
liタグ(非序列リスト)
margin下9px
リストマークなし
　※noneの部分は下図のマークを使用可能。

値
マーク
disc
黒丸
circle
白丸
square
四角形
decimal
10進数
lower-roman
小文字ローマ数字
upper-roman
大文字ローマ数字
lower-alpha
小文字アルファベット
upper-alpha
大文字アルファベット

行間1.3



【読んでいるブログ内のNEWの文字】
.new {
margin-left:6px;
color: #ff0000;
font-weight:bold;
}
margin左6px
文字の色ff0000(赤)
文字の太さ　太い



/*--Profile--*/(プロフィール)

【ブログオーナーの画像】
dt.profile-img {
float:left;
}
回り込み　左



【Nice!・記事(数)・テーマの部分】
dd.profile-status{
margin-left:85px;
line-height:1.8;
}
margin 左85px
行間1.8



【プロフィール内のプロフィールへのリンク】
#profile .profileLink{
padding-left:12px;
background: url("/_common/skins/509/images/arrowR_small.gif") no-repeat left center;
line-height:1.2;
}
padding 左12px
背景/_common/skins/509/images/arrowR_small.gif(右向き三角形二つの画像です)
繰り返しなし・左側に配置
行間1.2
 


【プロフィール内のNice!文字】
.nice {
margin:0;
padding:0 2px;
background:#ffd900;
border:1px solid #0090ff;
color:#0090ff;
}
margin 0
padding 上下0　左右2px
背景色　ffd900
枠線　太さ1px　単線　色0090ff
文字色　0090ff


/*--Calendar--*/(カレンダー)

【＜＜20xx年xx月＞＞の部分】
.calendar-date {
text-align:center;
}
テキスト配置　中央



【カレンダー（月単位）】　
#calendar table {
margin:3px auto;
text-align:center;
border-spacing:1px;
}
margin 上下3px　横自動
テキスト配置　中央
隣接するセルのボーダーとボーダーの間隔　1px



【カレンダーの日付のセル
th(htmlタグ　見出しをつける)】
#calendar th {
height:20px;
width:20px;
font-weight:normal;
}
高さ20px
幅　20px
文字の太さ　標準




【カレンダーの日付
td(htmlタグ　セルに入るデータ)】
#calendar td{
height:20px;
width:20px;
background:#ffffff;
color: #ffffff;
background: url("/_common/skins/509/images/calendar_bg.gif") no-repeat right center;
}
高さ20px
幅　20px
背景色ffffff(白)
背景画像/_common/skins/509/images/calendar_bg.gif
繰り返しなし・右に配置



【カレンダー日付のリンク（記事投稿があったとき）】
#calendar td.link {
background: url("/_common/skins/509/images/calendar_bg.gif") no-repeat right center;
font-weight:bold;
}
背景画像/_common/skins/509/images/calendar_bg.gif
繰り返しなし・右に配置
文字の太さ　太い



【カレンダーの日付のリンク（未訪問・訪問済み・オンマウスのとき）】
#calendar td a{
color:#c87a10;
文字色　c87a10
}


/*--Search--*/(検索)

【検索ボックス内の内容】
#search .sidebar-body {
padding-bottom:6px;
}
padding 下6px



【検索入力ボックス】
.search-tbox {
width:67%;
}
幅67％



/*--RSS Regist--*/
【RSS全体】
#rssRegist {
width:190px;
margin: 0 auto 6px auto;
padding:4px 0;
_padding-top:3px;
line-height:1;
background: #a0a0a0 url("/_common/skins/509/images/arrowR_large.gif") no-repeat left center;
text-align:center;
font-weight:bold;
}
幅190px
margin 上0　右自動　下6px　左自動
padding 上下4px　左右0
行間　1
背景画像/_common/skins/509/images/arrowR_large.gif
繰り返しなし・左に配置
テキスト　中央に配置
文字の太さ　太い



【読者になる(RSSに登録)部分】

#rssRegist a:link{ text-decoration:none; color:#ffffff; }
　RSSリンクの未訪問時のテキスト装飾なし・文字色ffffff(白)

#rssRegist a:visited{ text-decoration:none; color:#ffffff; }
　RSSリンクの訪問済み時のテキスト装飾なし・文字色ffffff(白)

#rssRegist a:active{ text-decoration:none; color:#ffffff; }
　その部分を選択しているときのリンク・文字装飾なし・色ffffff(白)

#rssRegist a:hover{ text-decoration:underline; color:#ffffff;}
　RSSのリンク部分にマウスが乗っている時の文字装飾下線・色ffffff(白)


/*--So-net--*/

【POWERED BY
So-netブログのロゴ】
#powered img {
padding:0 12px;
margin-bottom:6px;
}
padding 上下0　左右12px
margin 下6px



【RSS1.0|RSS2.0の部分】
#rssfeed {
padding:0 12px;
}
padding上下0　左右12px

タグ：CSS so-net ブログ カスタマイズ

③/*-----Entry-----*/

/*-----Entry-----*/(Nice!欄・コメント欄・トラックバック欄)

【Nice!欄・コメント欄・コメントを書く欄・トラックバック欄全域】
.entry {
margin-top:12px;
padding:12px;
border: 1px #1e1717 dashed;
}
margin 上12px
padding上下左右12px
枠線　太さ1px　色1e1717 　線のタイプ=ダッシュ



【Nice!欄・コメント欄・コメントを書く欄・トラックバック欄の中の
「Nice!」・「コメント」・｢コメントを書く」・「トラックバック」の文字】
.entry h4 {
margin:0 0 10px 0;
padding:0;
font-size:small;
}
margin 上と左右0　下10px
padding 上下左右0
文字の大きさ　small



【Nice!欄・コメント欄・コメントを書く欄・トラックバック欄の中の
ul li dl dt dd formタグ】
.entry ul, .entry li, .entry dl, .entry dt, .entry dd, .entry form {
margin:0;
padding:0;
}
ul li(htmlタグ　非序列リストの作成）・・・Nice!のユーザーアイコンの整列

dl dt dd(htmlタグ　用語の定義をリスト）・・・ゲストのコメント入力の際の
名前や画像認証のところで使われているようです。

form(htmlタグ　文字入力フィールドの作成）・・・コメント入力や
トラックバックのURL入力のフィールドに使われています。

margin 0
padding0


/* nice! */(Nice!欄)

【Nice!欄の「Nice!」の文字】
#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
}
背景に_common/skins/509/images/icon-nice.gifという画像（指の画像です）を
繰り返しなしで左側に配置
padding左側20px



【該当なし、完全カスタマイズ用】
#nice form {
margin:12px 0;
}



【Nice!欄の非序列（＝アイコンのならび）】
#nice li {
float:left;
width:63px;
padding:5px 0;
font-size:x-small;
line-height:1.2;
text-align:center;
list-style:none;
overflow:hidden;
white-space:nowrap;
display:block;
}
回り込み　左
広さ65px
文字の大きさ　x-small
テキストの位置　中央
アイコンに番号を付ける設定なし
スクロールバー非表示
※white-spaceは前記事の.archive-linksの
部分を参照いただけますでしょうか。
表示の仕方block(前後に改行を伴う)


/* Comments */(コメント欄)

【該当なし。完全カスタマイズ用】
#comments form {
margin:12px 0;
}



【ユーザーアイコン＋送信されたコメント】
.each-comment {
margin:20px 0;
clear:both;
}
margin 上下20px　左右0
回り込み解除



【コメントを送信したユーザーのアイコン】
.each-comment img {
float:left;
margin:0 10px;
}
回り込み左側
margin 上下0　左右10px



【送信したコメントの最後につくチェックボックス】
.each-comment input {
margin:0;
padding:0;
_margin-bottom:-2px;
}
margin 上下左右0
padding　上下左右0
margin下-2px



【送信されたコメント】
.comments-body {
margin:0 0 0 60px;
margin 上下・右0　左60px
コメントの1文字目が60pxから始まる
}



【該当なし】
#comments .delete {
margin-left:60px;
}


/* Comment Write */

【コメント送信ボタン】
#comment-write dt {
float:left;
clear:both;
}
回り込み左
回り込み解除



【ゲストユーザーの名前・URL入力欄】
#comment-write dd {
margin:0 0 3px 80px;
line-height:1.5;
}
margin 上右0　下3px　左80px



【コメントを書く欄のコメント入力エリア】
#comment-write textarea {
height:150px;
}
高さ150px



【ゲストユーザーの画像認証の数字入力エリア】
.comment-input {
width:420px;
}
広さ420px


/* Trackback Write */(トラックバック欄)

【トラックバック欄の段落
p(htmlタグ　段落を表す）】
#trackback-write p {
margin:0;
}
margin0



【トラックバックのURLとこの記事について書くの部分】
#trackback-write form {
margin:12px 0;
}
margin 上下12px　左右０



【トラックバック一つごとに】
.each-trackback {
margin:15px 0;
}
margin 上下15px　左右0



.trackback-url input {
width:98%;
}
トラックバックのURLの広さ98％


/* Related */(ソースにないので分かりません)

#related ul {
padding-left:20px;
}

#related li {
padding:1px 0;
}

タグ：CSS so-net ブログ カスタマイズ

②/*-----Content-----*/

前回に引き続き今回は②/*-----Content-----*/の
部分のを解説したいと思います。


/*-----Content-----*/(バナー以外の部分)

#content {
background:url(/_common/skins/509/images/content_bg.gif) repeat-y;
}
背景画像に/_common/skins/509/images/content_bg.gifを指定。
画像はこちらです。
縦方向の繰り返し。



/* Links */(リンクに関する部分)

【記事ページ（またはトップページ）の
記事タイトル上のブロック位置】
.archive-title{
margin-top:7px;
margin-bottom: 6px;
}
margin上7px・下6px



【トラックバック送信ボタン下の部分】
.archive-bottom{
padding-top:3px;
padding-bottom:6px;
border-top: 1px solid #1e1717;
}
padding(詳細は前記事参照下さい)上3px・下6px
枠線上部に1pxの単線、色は1e1717



.archive-name{
float:left;
}
記事タイトル上の部分と、トラックバック送信ボタンの
下の部分の回り込みが左側へ



【1つ前の記事のリンク】
.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
}
padding左側12px
背景画像/_common/skins/509/images/arrowL_small.gif(左側三角形二つの画像です)
繰り返しなし・左側に配置



【1つ次の記事のリンク】
.nextLink{
padding-right:12px;
background:url(/_common/skins/509/images/arrowR_small.gif) no-repeat right center;
}
padding右12px
背景画像/_common/skins/509/images/arrowR_small.gif(右側三角形二つの画像です)
繰り返しなし・右側に配置
 


【記事タイトルの上のブログトップ文字と
トラックバック送信ボタン下の
ブログトップ文字の部分】
.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
}
。
回り込みが右側
padding左12px
背景画像/_common/skins/509/images/arrowT_small.gif(上側三角形二つの画像です)
繰り返しなし・左側に配置。
字の大きさ、やや小さめ(新規作成内の文字小)
white-spaceプロパティは、
ソース中の半角スペース・タブ・改行の
表示の仕方を指定する際に使用します。 
この場合
ソース中の連続する半角スペース・タブ・改行を、
1つの半角スペースとして表示します。
ボックスの大きさが指定されている場合にも、
自動的に改行されません。

※white-spaceその他の値
normal
ソース中の連続する半角スペース・タブ・改行を、
1つの半角スペースとして表示します。
ボックスの大きさが指定されている場合には、
その大きさに応じて自動的に改行されます。
pre
ソース中の連続する半角スペース・タブ・改行を、
そのまま表示します。



/* Articles */(記事)

【記事タイトル上の部分と、
トラックバック送信ボタンの下まで
含む記事エリア部分】
#main {
width:540px;
padding-right: 12px;
}

広さ540px
padding右側12px



【記事本体部分】
.articles {
width:539px;
margin-top:10px;
overflow:hidden;
}
広さ539px
margin上10px
スクロールバーは常に非常時



【記事タイトル部分】
.articles-title {
margin:0;
margin-bottom:15px;
padding: 3px 0px 3px 12px;
background-color: #2a1402;
font-size: small;
color: #ffffff;
}
marginなし
margin下15px
padding上3px　右0　下3px　左12px
背景色2a1402
文字の大きさ　small
文字の色　ffffff(白)



.articles-title a:link{ text-decoration: none; color:#ffffff; }
　記事タイトルの未訪問リンク時、文字装飾なし、色ffffff白

.articles-title a:visited{ text-decoration: none; color:#ffffff; }
　記事タイトル訪問時、文字装飾なし、色ffffff白

.articles-title a:active{ text-decoration: none; color:#ffffff; }
　その部分を選択しているときのリンク・文字装飾なし・色ffffff白

.articles-title a:hover{ text-decoration: underline; color:#ffffff;}
　記事タイトルにマウスが乗っている時、文字装飾下線、色ffffff白



【記事本体】.articles-body {
line-height:1.6;
margin:0 0 20px 0;
}

行間1.6
margin上0　右0　下20px　左0



【トラックバック送信ボタンの下の
1つ前の記事｜1つ次の記事　ブログトップ
エリア】
.articles-bottom {
margin-bottom:20px;
}
margin下20px



【記事内容エリアにある画像の設定】
.articles-body img {
margin-right: 6px;
margin-bottom: 6px;
}
margin右6px・下6px



【投稿時間、Nice!、コメント、
トラックバックの表示されている部分】
.posted{
padding:3px 0 30px 0;
border-top: #531f4f dotted 1px;
font-size:x-small;
}

padding 上3px　右0　下30px　左0
枠線　上側のみ　色531f4f　ドット、太さ1px
文字の大きさ　x-small

.
どのCSSがどこに対応しているか分かれば
自分のお好みの調整が出来ると思います。

タグ：so-net CSS ブログ カスタマイズ

①/*-----Common-----*/

今回からは前回で申し上げた様に
部分ごとの説明をさせていただきたく存じます。

※説明の際には、私が使用している
テンプレート「ウォーター」を例にしますので
多少異なることもあると存じますが
ご了承くださいませ。

それでは見て行きましょう
/*-----Common-----*/ <ブログ共通部分>

a:link{ text-decoration: none; color:#c87a10; }　       
　未訪問リンクの文字装飾なし・色#c87a10
a:visited{ text-decoration: none; color:#c87a10; }
　訪問済みリンクの文字装飾なし・色#c87a10
a:active{ text-decoration: none; color:#c87a10; }
　その部分を選択しているときのリンク・文字装飾なし・色#c87a10
a:hover{ text-decoration: underline; color:#c87a10; }
　マウスが乗っている時の文字装飾が下線・色#c87a10

body {
background:#fafafc;
　背景色#fafafc
color:#333333;
　文字色:#333333
}
body＝htmlタグ、Webページの中身の大元。
この場合はwebページに指定がない場合は
背景色#fafafc、文字色#333333となる。

blockquote {
margin:12px;
padding:6px;
border:1px solid #cccccc;
}
blockquote=htmlタグ、引用。記事作成の引用を使うと出来る。
この場合はmarginを上下左右で12px、paddingを上下左右で6px
枠線がsolid（シンプルな線）太さ1px、色はccccccとなる。

【ブログバナー部分】
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
background: url("/_common/skins/509/images/banner-bg2.jpg") no-repeat center top;
border-left: #1e1717 solid 1px;
border-right: #1e1717 solid 1px;
border-bottom: #1e1717 solid 1px;
}

幅770px
margin上下0　左右オート
行間1.4
テキスト配置左側
背景画像に/_common/skins/509/images/banner-bg2.jpgを指定。
繰り返しなしで配置は真ん中上。
左側・右側・下の枠線が色1e1717　単線　太さ１ｐｘ

【ブログタイトル部分】
#banner {
height: 197px;
padding-top:25px;
clear:both;
}

たかさ197px
上部padding25px
回り込み解除

【ブログタイトル自体】
#banner h1{
margin:0;
font-family: Helvetica,Arial,sans-serif;
font-size: 22px;
padding-left: 18px;
padding-top: 58px;
}

余白なし
フォントの種類Helvetica,Arial,sans-serif;(左から最優先)
フォントの大きさ22px
padding左18px・上58px

【ブログタイトルのリンク】
#banner h1 a{
color:#ffffff;
line-height: 200%;
}
色はffffff(白）
行間文字の大きさと同じ

【サブタイトル部分】
#lead{
margin:0;
padding:75px 0 0 10px;
color: #ffffff;
}

余白なし
padding上75　右・下0　左10PX

以上駆け足の説明です。

しかし、あとは今までの応用です。
直接記述である＜span style=＞の部分がなくなるだけですので
取り敢えずやってみて、プレビューで確認してみて下さい。
分からないことがあれば、出来る限りの助言はしたいと思います。

タグ：CSS カスタマイズ so-net ブログ テンプレート

テンプレートに付きまして

今回からは内部CSSに着手していきたいと思います。

前回までのCSSは新規作成内に
直接書くタイプのものでした。
これからは、テンプレートのCSSを書きかえる作業です。
とはいえ、今まで説明させていただいたことの応用ですので
難しく考えずに、ご覧くださいませ。

まず、管理ページ→デザイン→テンプレート管理を開きます。
すると

@charset "UTF-8";

/*-----Common-----*/

a:link{ text-decoration: none; color:#c87a10; }
a:visited{ text-decoration: none; color:#c87a10; }
a:active{ text-decoration: none; color:#c87a10; }
a:hover{ text-decoration: underline; color:#c87a10; }

body {
background:#fafafc;
color:#333333;
}
・
・
・

というのが出てきます。
これがCSSの本体です。
最下部まで目を通していただくと
気づくと思うのですが
何度か/*-----ｘｘｘ-----*/、/*xxx*/
で区切られています。

番号	/*-----xxx-----*/	指している個所
①	/*-----Common-----*/	ブログ全体
②	/*-----Content-----*/	バナーを除く部分
	/* Links */	リンク部分
	/* Articles */	記事部分
③	/*-----Entry-----*/	Nice!・コメント・トラックバックに関する部分
	/* nice! */	Nice!に関する部分
	/* Comments */	コメントに関する部分
	/* Comment Write */	コメントを書くに関する部分
	/* Trackback Write */	トラックバックに関する部分
④	/*-----Side-----*/	サイドバー
	/*--Profile--*/	プロフィールに関する部分
	/*--Calendar--*/	カレンダーに関する部分
	/*--Search--*/	Searchに関する部分
	/*--RSS Regist--*/	RSSに関する部分
	/*--So-net--*/	so-netに関する部分
	/*--Tag--*/	Tagに関する部分
⑤	/*-----Footer-----*/	下部フッター

となっております。


それでは次回からは番号ごとに
解説したいと思います。

タグ：CSS カスタマイズ ブログ so-net