ただいま*Sweet Bubble Skin* 
で使っているスキン（ＣＳＳ編集）ＢＡの構造を
解説します。 参考にして下さい。
説明の仕方に、むらが出てますが・・・ あまり気にしないでください（汗）
いじる必要がなさそうな個所にも、いくつか解説文を入れてあります。
もし、「？」 があればお知らせください。
★スキンは、「ピーチ／２コラム記事左」 です。
６／２「S*B*S」のスキンは変更しました。サンプルは、こちら → ■ ■ （６／２追記）
/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.04/22
Skin for: all_skin
-----------------------------------------------------
*/
.menu_frame select{
width:88%;
}
.page a{
text-align: center;
padding: 5px;
}
.page .now{
padding: 5px;
font-weight:bold;
}
.entry .contents{
line-height:1.5;
}
.entry .contents img{
margin-right:5px;
margin-left: 5px;
}
#message .contents:after,
.entry .contents:after,
#profile .contents:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#message .contents,
.entry .contents,
#profile .contents{
display: inline-table;
}
/* Hides from IE-mac \*/
* html #message .contents,
* html .entry .contents,
* html #profile .contents{height: 1%;}
#message .contents,
.entry .contents,
#profile .contents {display: block;}
/* End hide from IE-mac *//*
-----------------------------------------------------
ameblo ucs CSS Basic Settings
FileName: common.css
Version: 2005.04.20
Skin for: peach
-----------------------------------------------------
*/
/* ----------------------- common ----------------------- */
* {
margin: 0;
padding: 0;
}
body#mainIndex {
margin: 0;
padding: 0;
text-align:center;
}
#frame{
text-align:left;
}
#sub_a,#sub_b,#main{
padding-top:15px;
}
img {
border: 0;
}
a {
}
a:link {text-decoration: none; ← 通常リンクがある場合、文字に下線がつきますがつかないと言う意味
color : #cc66cc ; ← リンクがある場合の文字の色
}
a:visited {text-decoration: none; ← 通常リンクを押した後、文字に下線がつきますがつかないと言う意味
color : #9933cc; ← リンクを押した後の文字の色
}
a:hover {background-color : #ff99cc ; ← リンク文字の上にポインタを置いたときの文字背景の色
border: 1px dotted #ffffff; ← リンク文字の上にポインタを置いたときの文字の枠の情報
}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */
#header{ ← ＴＯＰタイトルの情報
height:150px; ← ＴＯＰタイトルの縦の幅
background-image : url("ＴＯＰタイトルのハートの画像 ");
background-attachment: fixed; ← 背景固定
background-position:0% 50%; ← 背景画像を置く位置 （0％←Ｘ（横）軸、左から）
background-repeat: no-repeat; （100％←Ｘ（縦）軸、上から）
}
#header h1 { ←タイトルの情報
padding-top: 50px; ← ＴＯＰタイトルの文字をＴＯＰタイトルの幅の上から50Px下げると言う意味
text-indent: 185px; ← ＴＯＰタイトルの文字の位置を、左から185px下げると言う意味
text-decoration: none; ← ＴＯＰタイトルの文字に下線を入れないと言う意味（リンクになっているため）
}
#header h2{ ← ＴＯＰ概要の情報
text-indent: 188px; ← ＴＯＰ概要の文字の位置を、左から188px下げると言う意味
padding-top: 5px; ← ＴＯＰ概要の文字を、ＴＯＰタイトルの文字から5px下げると言う意味
}
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#666666; ← ページ全体の基本の文字の色
font-size:12px; ← ページ全体の基本の文字の大きさ
}
.list{
font-size:10px;
}
#header h1,
#header h1 a{
color: #cc3366; ← ＴＯＰタイトルの文字の色
font-size: 35px; ← ＴＯＰタイトルの文字の大きさ
font-weight: bold; ← ＴＯＰタイトルの文字の太さ（太い）
line-height: 1.15;
}
#header h2{
color: #cc3366; ← ＴＯＰ概要の文字の色
font-size:11px; ← ＴＯＰ概要の文字の大きさ
font-weight: normal; ← ＴＯＰ概要の文字の太さ（標準）
line-height:1.15;
}
.menu_title {
color: #cc6666; ← サイドバーメニュータイトルの文字の色
font-size:12px; ← サイドバーメニュータイトルの文字の大きさ
font-weight: bold; ← サイドバーメニュータイトルの文字太さ（太い）
}
.mainMenu {
font-size: 11px; ← サイドバーメニュー欄の文字の大きさ
line-height: 1.3;
}
#profile,
#reader {
color:#00000; }
#reader dd {
}
#calendar table {
font-size:11px; ← カレンダーの文字の大きさ
line-height:1.3;
color:#00000; ← カレンダーの文字の色
}
#ranking *{
font-size: 12px; ← アメブロランキングの文字の大きさ
line-height: 1.4;
}
#ranking .rank_ttl{
font-weight:bold; ← アメブロランキング内の文字（「総合ランキング」等）の文字の太さ（太い）
color:#000000; ← アメブロランキング内の文字（「総合ランキング」等）の文字の色
}
#ranking .rank{
color: #000000; ← アメブロランキング内のその他（↑以外）の文字の色
}
#ameblo{
font-size: 10px; ← アメブロリンク欄の文字の大きさ（アメブロのバナーがあるとこね!）
color: #000000; ← アメブロリンク欄の文字の色
}
#ameblo p{
line-height: 1.25;
}
#rss {
font-size: 12px;
}
h3.title { ← コメント・トラックバック・このブログの読者一覧・お気に入りブログ一覧のタイトルの情報
font-size: 12px; ← 文字の大きさ
font-weight: bold; ← 文字の太さ
color#cc3366; ← 文字の色
}
.label {
font-weight: bold;
}
.entry .contents,
#message .contents{
font-size: 12px; ← 記事本文とメッセージボード本文の文字の大きさ
line-height: 1.5;
} ここからちょっと、手抜きします(;^_^A
.entry .theme{ ← 記事テーマの情報
font-size: 10px;
color:#666666;
margin-left: 10px;
}
.entry .title{ ← 記事のタイトルの情報
font-size:17px;
font-weight:bold;
color:#ff6600;
text-indent: 10px; ← 文字を左から10px下げると言う意味
height : 20px; ←記事タイトルが書かれている行の縦の幅（高さ）
padding-top : 3px ; ←記事タイトルが書かれている行の上から3px文字を下げると言う意味
}
.entry .foot { ← 記事枠の下の行（記事のｺﾒﾝﾄ・ＴＢ数があるとこ）の情報
font-size:10px;
}
#comment_module,
#trackback {
line-height: 1.5;
}
#comment_module .error{ ← コメントを書いたときにエラーが出た時の情報
color:#ff004d; ← 「エラーですよ」等の文字の色
margin-top: 20px; ← 文字の行の位置を上の枠と20pxあける
padding-bottom: 10px; ←文字を枠内で、下を10pxあける
}
#comment_module p.list { ← コメントリストの情報
font-size: 10px;
}
html, body {
scrollbar-base-color: #ffcccc; ← スクロールバーの情報
scrollbar-track-color: #ffcccc;
scrollbar-face-color: #ffcccc;
scrollbar-shadow-color: #cc3366;
scrollbar-darkshadow-color: #ffcccc;
scrollbar-highlight-color: #cc3366;
scrollbar-3dlight-color: #cc3366;
scrollbar-arrow-color: #cc3366;
}
/* ----------------------- background-color-control ----------------------- */
body { ← 全体の背景の情報
background-color:#ffffff; ← 背景の色
background-image : url("メインハート男女の画像 "); ← 背景の画像
background-attachment: fixed; ← 背景固定
background-position:80% 100%; ← 背景画像を入れる位置
background-repeat: no-repeat; ← 背景画像を繰り返さないで１個だけ入れる
}
#frame { ←サイドバーを含む中心の背景の情報
}
#sub_a{ ←サイドバーの背景の情報
}
#sub_b{ ← サイドバーの背景の情報
background-color:;
}
/* ----------------------- menu_element_basis ----------------------- */
.mainMenu { ← サイドバーのメニューの情報
margin-bottom: 15px;
border: 1px solid #ffcc99; ← 枠の情報（線の太さ・線の種類・線の色）
}
.menu_title { ← メニュータイトルの情報
margin: 0px 2px 7px;
padding: 3px 0px 3px 0px; ← メニュータイトル行の文字を（上、右、下、左）離すと言う意味
border-bottom: 1px solid #ffcc99; ← メニュータイトル行の枠の下の線の情報
background-image: url("サイドメニュータイトルの壁紙");
background-repeat: repeat; ← 背景画像を繰り返さないという意味
height : 18px; ← メニュータイトル（文字の行）の縦の幅（高さ）
text-align : center ; ← 文字の位置（中央）
}
/* ----------------------- menu_element_background ----------------------- */
/* ----------------------- menu_elements_margin_leftright ----------------------- */
.menu_title,
.mainMenu ul,
.mainMenu dl,
.mainMenu p,
.list,
.link_blog,
#archives select,
#theme_list select,
#search form{ ← ブログ内検索の入力欄の情報
margin-left: 6px;
margin-right: 6px;
}
p.list,
p.link_blog {
padding-top: 5px;
}
/* ----------------------- each menu setting ----------------------- */
/*profile*/
#profile p{
display: block;
}
/*readers*/
#reader dl {
margin-bottom: 7px;
}
#reader ul {
margin-top: 5px;
}
#reader p {
display: inline;
}
/*calendar*/ ← カレンダーの情報
#calendar{
}
#calendar .menu_title {
}
#calendar table {
width: 168px; ← カレンダーの横幅
text-align:center;
}
#calendar caption {
padding:5px 0px;
}
#calendar caption a{
padding:0px 5px;
}
#calendar .sun {
color:#FF0000; ← 日曜日の色
}
#calendar .sat{
color:#0000CC; ← 土曜日の色
}
#calendar td {
text-align:center;
}
#calendar td a {
color:#CC0000; ← 記事が書かれている日の日付の色
text-decoration: underline; ← 記事が書かれている日は下線がつきます
}
/*theme_list*/
/*recent_entries*/
/*archives*/
/*search*/
#search form{
margin-top: 7px;
margin-bottom: 7px;
}
#search .searchbox{ ← ブログ内検索の入力欄の情報
width: 100px; ← 横幅
border: 1px solid #cc3366; ← 枠線の情報
}
#search .searchbtn{ ← ブログ内検索の「検索」ボタンの情報
width: 40px; ← ボタンの横幅
background-color : #cc3366 ; ← ボタンの色
color : #ffffff ; ← ボタンの文字の色
padding-top: 3px; ← ボタン内の文字を上から3pxあける
}
/*favorites*/
/*bookmarks*/
/*recent_trackback*/
/*recent_comment*/
/*ranking*/ ←ランキングの情報
#ranking .rank_ttl{
display: block;
}
#ranking .rank{
display: block;
padding-top: 3px;
padding-bottom: 3px;
}
#ranking a{
background-image: url(http://nwimg.ameblo.jp/p_skin/peach/img/icon.gif
);
background-repeat: no-repeat; ↑ ランキングのリストマーク画像（アメブロ標準）
background-position: left center;
padding-left: 9px;
}
#ranking img{
margin-left: 5px;
}
#ranking .rank_all,
#ranking .rank_genre {
margin-bottom: 8px;
}
/* ----------------------- advertising ----------------------- */
#advertising { ← 広告スペースの情報
border: 1px solid #ffcc99; ← 枠の情報（太さ・線の種類・色）
}
#advertising .menu_title { ← 広告スペースのメニュータイトルの情報
height : 18px; ← 行の縦の幅（高さ）
border-bottom: 1px solid #ffcc99; ← メニュータイトルの行の下の線の情報
background-image: url("広告欄のメニュータイトルの壁紙");
background-repeat: repeat;
color: #cc6666; ← メニュータイトルの文字の色
margin: 1px;
text-align : center ; ← 文字の位置（中央）
}
/*ameblo*/
#ameblo{ ← アメブロのリンク欄（アメブロバナーがあるとこ）の情報
border: 1px solid #ffcc99; ← 枠の情報
text-align: center; ← 文字の位置（中央）
padding-top: 7px; ← 行内で、上から7px離すという意味
}
#ameblo p{
text-align: left;
padding-right: 7px;
padding-bottom: 7px;
padding-left: 7px;
}
#ameblo li {
display: block;
margin-bottom: 5px;
}
/*RSS*/
#rss{
margin-top: -3px;
margin-right: auto;
margin-left: auto;
border: none;
background-image: none;
text-align: center;
}
/*plugin*/
.plugin{
margin-bottom:15px;
text-align: center;
}
/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/ ← メッセージ欄の情報
#message{
width:98%; ← 横幅の％（枠線の太さによって調整）
margin-bottom: 15px; ← 記事枠と15px離す
border:3px double #ffcc99; ←枠の情報（太さ・線の種類・色）
background-image: url("タイトル下のメッセージ欄のピンクの壁紙
");
background-repeat: repeat;
text-indent: 5px; ← 文字を5px下げる
}
#message .contents{ ←メッセージ欄の中の情報
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/ ← 記事の情報
.entry{
width: 99%; ← 横幅の％（枠線の太さによって調整）
margin-bottom: 20px; ← 下の記事枠と20px離す
border: 1px solid #ffcc99; ←枠の情報（太さ・線の種類・色）
}
.entry .date{ ← 記事の日付行の情報
width:99%;
display: block;
color: #000000; ← 文字の色
padding: 5px 0px 2px 5px;
border-bottom: 1px solid #ffcc99; ← 行の下の線の情報
background-image: url("記事の日付メニューの壁紙"); ← 背景画像
background-repeat: repeat; ← 画像を繰り返すと言う意味
}
.entry .name{ margin-top: 5px;
display: block;
}
.entry .theme{ ← 記事のテーマの情報
margin-bottom: 10px;
display: block;
}
.entry .title{ ← 記事のタイトルの情報
margin-top: 10px;
margin-bottom: 10px;
}
.entry .contents{ ← 記事の本文の情報
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px;
}
.entry .foot{ ← 記事枠の下の行（記事のｺﾒﾝﾄ・ＴＢ数があるとこ）の情報
text-align: right;
padding-top: 2px;
padding-right: 20px;
border-top: 1px dashed #ffcc99;
}
/*page*/
.page{
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 7px;
margin-bottom: 10px;
}
#footer_ad{
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
h3.title { ← コメント・トラックバック・このブログの読者一覧・お気に入りブログ一覧のタイトルの情報
margin-bottom: 10px;
margin-top: 5px;
}
/*trackback*/
#trackback{ ←トラックバックの情報
border: 1px solid #ffcc99;
margin-top: 25px;
margin-bottom: 10px;
padding-top: 5px;
padding-left: 10px;
}
#trackback p.tr_URL { ← ＴＢＵＲＬの情報
margin-bottom: 10px;
}
#trackback ul { ← ＴＢのリストの情報
margin-bottom: 10px;
}
/*comment_module*/ ← コメント枠の情報
#comment_module h3.title { ← 「コメント」タイトルの情報
margin-bottom: 0px;
}
#comment_module p.list {
margin: 0px 0px 10px 0px;
padding: 0px;
}
#comment_module{
border: 1px solid #ffcc99; ← コメント枠の情報（太さ・線の種類・色）
padding-top: 5px;
padding-left: 10px;
}
#comment_module .each_comment { ← コメントリストの情報
margin-bottom: 10px;
}
#comment_module .comment_footer { ← コメントリストの下の行（名前と日付）の情報
margin-top: 5px;
padding-top: 5px;
background-color: #ffffcc; ← 行の色
width: 98%;
}
#comment_module .error{ ← コメント入力時にエラーが出たときの文字の情報
margin-top: 20px;
padding-bottom: 10px;
}
#comment_module label{ ← コメント入力欄
display: block;
float: left;
width: 70px;
text-align: left;
}
#f_name,#f_url,#f_title,#f_com{ ← コメント各入力欄（名前・ＵＲＬ・タイトル・コメント）の情報
display:inline;
width: 400px; ← 行の横幅
margin-bottom: 3px;
margin-left: 6px;
border: 1px solid #cc3366; ← 枠線の情報
background-image: url("コメント記入欄のピンクのハートの壁紙"); ←入力欄の背景画像
background-repeat: repeat;
}
#comment_module form ul { ← コメント入力欄枠の情報
width: 340px;
margin-left: auto;
margin-right: auto;
}
#comment_module form li { ← コメントリスト枠の情報
display: block;
width: 340px;
margin-bottom: 5px;
}
#comment_module li.lastItem { ←コメント「投稿する」ボタン枠の情報
display: block;
width: 330px;
margin-bottom: 5px;
text-align: right;
}
#comment_module .button { ← 「投稿する」ボタンの情報
margin-left: 5px;
font-size: 11px; ← 文字の大きさ
width: 80px; ← ボタンの横幅
background-color : #cc3366 ; ← ボタンの色
color : #ffffff ; ← ボタン内の文字の色
padding-top: 3px;
}
/*reader_list*/
#reader_list ul{
width:100%;
}
#reader_list li{ ← 読者リスト一覧の各リスト枠の情報
padding-bottom: 2px;
margin-bottom: 8px;
border-bottom: 1px solid #ffcc99; ← リストの枠線の情報
text-indent: 5px;
padding-top : 2px ;
}
#reader_list .reader_blog {
display:block;
margin-top:2px;
}
/*favorite_list*/
#favorite_list ul{
width:100%;
}
#favorite_list li{ ← お気に入り一覧の各リスト枠の情報
padding-bottom: 2px;
margin-bottom: 8px;
border-bottom: 1px solid #ffcc99; ← リストの枠線の情報
text-indent: 5px;
padding-top : 2px ;
}
#favorite_list .favorite_blog {
display:block;
margin-top:2px;
}
/*bookmark_list*/
#bookmark_list ul{
width: 100%;
}
#bookmark_list li{ ← ブックマーク一覧の各リスト枠の情報
margin-bottom: 3px;
}/*
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_b.css
Version: 2005.03/03
Skin for: peach
-----------------------------------------------------
*/
#frame:after,
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#frame,
#wrap {display: inline-table;
}
/* Hides from IE-mac \*/
* html #frame,
* html #wrap {height: 1%;}
#frame,
#wrap {display: block;
}
/* End hide from IE-mac */
#frame {
width: 760px;
margin-left: auto;
margin-right: auto;
}
#wrap {
width: 100%;
position: relative;
}
#main {
width: 570px;
float: left;
padding-right: 10px;
padding-left:10px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;
float: right;
z-index: 1;
}
#sub_b{
display: none;
}
