わかっている方だけここに手を加えて使ってください
このブログの記事で説明しているＣＳＳは（青字部分）自分のブログに合わせて（赤字部分）から
この説明であるＣＳＳの編集の一番最後にドンドン付け加えていってください
この記事で説明している部分に手を加えると今後このブログで記事にするＣＳＳが動作しない場合もあります
「CSS編集用スキン」の編集用CSSの初期状態
どこを変えたらどうなるのか説明します
初期状態のCSSではカラーコードが6桁（#333333など）と3桁(#333など)統一されていませんが
#333333 と #333 は同じです
#000000 と #000 は同じです
#0066cc と #06c は同じです
CSSではカラーの3桁コードが使えます #f7f7f7←こんなのは3桁にはなりません
@charset "utf-8";
/*
-----------------------------------------
【CSS（スタイルシート）の編集目次】
(1) 文字のスタイル
(2) ボタンのスタイル
(3) エリアのスタイル
(4) その他、拡張
-----------------------------------------
*/
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(1) 文字のスタイル
※色を設定すると、ブログの各部分に自動的に配色されます
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* (1-1) 全体の文字
--------------------------------------------*/
/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333; ←#333333を#ff0000(赤)にしてみると・・
}
/* リンク */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#0066cc; ←#0066ccを#ff0000(赤)にしてみると・・
}
/* 訪問済のリンク */
.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{
color:#996699;
}
/* マウスオーバーしたときのリンク */
.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{
color:#ff3366;
}
/* 弱い文字 */
.skinWeakColor,.skinBaseWeakColor{
color:#999999; ←#999999を#ff0000(赤)にしてみると・・
}
/* 強い文字 */ ←現在強い文字はブログでは使われていません
.skinStrongColor,.skinBaseStrongColor{
color:#ff3399;
}
/* (1-2) ブログタイトル文字
--------------------------------------------*/
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000; ←文字色 #000を#ff0000(赤)にしてみると・・
font-weight:bold; ←太文字
font-size:2.11em; ←文字サイズ(普通のサイズの2.11倍 1.5倍なら 1.5emに)
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333; ←文字色 #333を#0000ff(青)にしてみると・・
}
/* (1-3) 記事／メッセージボード内の文字のスタイル
--------------------------------------------*/
/* ※全体の文字配色と別に指定したい場合のみ指定 */
/* 通常文字 */
.skinMainArea,.skinMainArea .skinTextColor,.skinArticleTextColor,.skinArticleBlock{}
/* リンク */
.skinMainArea .skinAnchorColor,.skinArticleAnchorColor,.skinMainArea a,.skinArticleBlock a{}
/* 訪問済のリンク */
.skinMainArea .skinAnchorVisitedColor,.skinArticleAnchorVisitedColor,.skinMainArea a:visited,.skinArticleBlock a:visited{}
/* マウスオーバーしたときのリンク */
.skinMainArea .skinAnchorHoverColor,.skinArticleAnchorHoverColor,.skinMainArea a:focus,.skinMainArea a:hover,.skinArticleBlock a:focus,.skinArticleBlock a:hover{}
/* 弱い文字 */
.skinMainArea .skinWeakColor,.skinArticleWeakColor{}
/* 強い文字 */
.skinMainArea .skinStrongColor,.skinArticleStrongColor{}
/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#06c;
}
/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/
/* ※全体の文字配色と別に指定したい場合のみ指定 */
/* 通常文字 */
.skinSubArea,.skinSubArea .skinTextColor,.skinSubTextColor,.skinSubBlock{}
/* リンク */
.skinSubArea a,.skinSubArea .skinAnchorColor,.skinSubAnchorColor,.skinSubBlock a{}
/* 訪問済のリンク */
.skinSubArea a:visited,.skinSubArea .skinAnchorVisitedColor,.skinSubAnchorVisitedColor,.skinSubBlock a:visited{}
/* マウスオーバーしたときのリンク */
.skinSubArea a:focus,.skinSubArea a:hover,.skinSubArea .skinAnchorHoverColor,.skinSubAnchorHoverColor,.skinSubBlock a:focus,.skinSubBlock a:hover{}
/* 弱い文字 */
.skinSubArea .skinWeakColor,.skinSubWeakColor{}
/* 強い文字 */
.skinSubArea .skinStrongColor,.skinSubStrongColor{}
/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{}
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(2) ボタンのスタイル
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* (2-1) ボタン[横180px 縦35px]
--------------------------------------------*/
/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */
.skinImgBtnM{
background-image:url(http://stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_m.png
);
} ←Ameba会員登録（無料）ボタンの画像
/* ボタンの文字色 */
.skinImgBtnM:hover span,.skinImgBtnM:focus span,.skinImgBtnM span{
color:#333333; ←Ameba会員登録（無料）の文字色
}
初期で使われているボタン画像 を こちらに変えてみると・・・
→ 
ついでに文字色も #333333 を #ff0000(赤)にしてみると・・
/* (2-2) アイコン付きボタン[横128px 縦28px]
--------------------------------------------*/
/* アイコン付き ボタンの背景画像 ※[横128px 縦28px]のボタンの背景画像を指定 */
.skinImgBtnS{
background-image:url(http://stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_s.png
);
} ←ボタン画像
.skinImgBtnS:hover span,.skinImgBtnS:focus span,.skinImgBtnS span{
/*
アイコン画像は下記から指定
menu_icons_pastel.png (パステル）
menu_icons_gray.png（グレー）
menu_icons_black.png（黒）
menu_icons_white.png（白）
*/
background-image:url(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png);
※アイコン画像の変更は menu_icons_pastel.png を menu_icons_gray.png などに変えます
黒系のアイコンにする場合は・・・
(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_black.png);
/* ボタンの文字色 */
color:#333333; ←ボタンの文字色
}
初期で使われているボタン画像 を こちらに変えてみると・・・
→ 
ついでに文字色も #333333 を #ff0000(赤)にしてみると・・
/* (2-3) ページ送りボタンの << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/
.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #ddd; ←枠線の太さ 線種 線色 A
background:#fff; ←枠内の背景色 B
color:#06c !important; ←文字色 C
}
/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#f7f7f7; ←マウスが乗った時の背景色 D
color:#000000 !important; ←マウスが乗った時の文字色を変えたい場合はこの1行追加
}
例えば・・・
border:3px double #f00; A
background:#f0f; B
color:#000 !important; C
background:#0f0; D の場合は・・・
後半に続きます・・・・