基本CSS[skin.css]構造

アメブロのCSSには編集できるユーザーごとのCSSの他に、隠れたCSSファイルが適応されています。
その名も[skin.css
この[skin.css]が基本のデザインを構成しています。
このCSS自体を管理画面から直接書き換える事はできませんので、編集可能CSSファイルで
このskin.cssを上書きしてあげることでデザインを変更することが出来るようになります。

CSSを書き換える上でデフォルトのskin.cssを下記に記録しました。参考にしてください。


@charset "utf-8";
/*--------------------------------------------------
skin.css
$Id: skin.css,v 1.3 2011/08/01 09:45:10 oyama_yuichi Exp $
--------------------------------------------------*/

/*TOC===============================================

カラー設定
	A 基本カラー設定
	B 記事/メッセージ カラー設定
	C サイドバー カラー設定
	D 枠の外の配色
ボタンのスタイル
ブロックごとのスタイル

==================================================*/

/*==============================================

 カラー設定

==============================================*/

/* 【A 基本カラー設定】
============================================*/

/* テキスト色
--------------------------------------------*/

/* 地色テキスト */
.skinTextColor,
.skinBaseTextColor,
.skinBlock,
body{
color:#333;			/* 【CSS規則】colorのみ指定可能 */
}

/* リンク色(基本) */
.skinAnchorColor,
.skinBaseAnchorColor,
.skinBlock a,
a{
color:#06c;			/* 【CSS規則】colorのみ指定可能 */
}

/* リンク色(visited) */
.skinAnchorVisitedColor,
.skinBaseAnchorVisitedColor,
.skinBlock a:visited,
a:visited{
color:#969;			/* 【CSS規則】colorのみ指定可能 */
}

/* リンク色(hover) */
.skinAnchorHoverColor,
.skinBaseAnchorHoverColor,
.skinBlock a:focus,
.skinBlock a:hover,
a:focus,
a:hover{
color:#f36;			/* 【CSS規則】colorのみ指定可能 */
}

/* 淡 テキスト色 */
.skinWeakColor,
.skinBaseWeakColor{
color:#999;			/* 【CSS規則】colorのみ指定可能 */
}

/* 強調 テキスト色 */
.skinStrongColor,
.skinBaseStrongColor{
color:#f39;			/* 【CSS規則】colorのみ指定可能 */
}

/* 背景色
--------------------------------------------*/
/* 背景色 */
.skinBgColor,
.skinBaseBgColor,
.skinBlock{
background-color:#fff;		/* 【CSS規則】background-colorのみ指定可能 */
}

/* 淡 背景色 */
.skinWeakBgColor,
.skinBaseWeakBgColor{
background-color:#f7f7f7;	/* 【CSS規則】background-colorのみ指定可能 */
}

/* 強調 背景色 */
.skinStrongBgColor,
.skinBaseStrongBgColor{
background-color:#f7f7f7;	/* 【CSS規則】background-colorのみ指定可能 */
}

/* 枠線色(一覧ページの枠線色など)
--------------------------------------------*/
.skinBorderColor,
.skinBaseBorderColor,
.skinBlock{
border-color:#ddd;		/* 【CSS規則】border-colorのみ指定可能 */
}

/* リスト境界線色(メインカラム一覧ページのリストなど ※サイドバー内のリスト境界線色は別)
--------------------------------------------*/
.skinBorderHr,
.skinBorderList li{
border-color:#b3b3b3;	/* 【CSS規則】border-colorのみ指定可能 */
}

/* 【B 記事/メッセージ カラー設定】
============================================*/
/*
 *
 * ※基本カラー設定と配色を変える箇所のみ指定
 * ※テキストの色のみ
 *
 */

/*
.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{}
*/

/* 【C サイドバー カラー設定】
============================================*/
/*
 *
 * ※基本カラー設定と配色を変える箇所のみ指定
 * ※テキストの色のみ
 *
 */

/*
.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{}
*/

/* 【D 枠の外の配色 】
============================================*/
/*
 *
 * 記事やサイドが枠で囲われているデザインで、
 * 枠の外の文字の可読性が低い場合に文字の色か、文字の背景を指定する
 *

.skinFieldBlock a,
.skinFieldBlock a:visited,
.skinFieldBlock a:focus,
.skinFieldBlock a:hover,
.skinFieldBlock {}

 */

/*==============================================

 ボタンのスタイル

==============================================*/

/* skinImgBtn 読者になるなどのボタン
--------------------------------------------*/

/* skinImgBtnM (180px) */
.skinImgBtnM{
background-image:url(../img/skin_btn_m.png);
}
.skinImgBtnM:hover span,
.skinImgBtnM:focus span,
.skinImgBtnM span{
color:#333;
}

/* skinImgBtnS (128px) */
.skinImgBtnS{
background-image:url(../img/skin_btn_s.png);
}
.skinImgBtnS:hover span,
.skinImgBtnS:focus span,
.skinImgBtnS span{
background-image:url(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png);/* アイコン画像を指定 */
color:#333;
}
/*
ボタンのアイコン画像

menu_icons_pastel.png
menu_icons_gray.png
menu_icons_black.png
menu_icons_white.png
*/

/* skinSimpleBtn ページングの次へ、前へボタン
--------------------------------------------*/

.skinSimpleBtn,
.skinSimpleBtn:visited,
.skinSimpleBtn:hover,
.skinSimpleBtn:focus{
border:1px solid #ddd;
background:#fff;
color:#06c;
}
.skinSimpleBtn:hover,
.skinSimpleBtn:focus{
background:#f7f7f7;
}

/*==============================================

 ブロックごとのスタイル

==============================================*/

/* ボディ 【CSS規則】bodyタグ自体にはスタイルをあてない
--------------------------------------------*/

/* skinBody bodyの代わり */
.skinBody{/* 【簡単カスタム対象】 */
}
.skinBody2{}
.skinBody3{}

/* skinFrame 横幅を指定したいときなどに使うフレーム */
.skinFrame{}

/* ヘッダー
--------------------------------------------*/

/*
 * .headerBnrArea 広告が出力されるエリア
 * 広告が出力されないときも、高さを維持したい時に使う
 *
 */
.headerBnrArea{
/* 注 blog.cssにpadding-bottom:15px;記述有り */
padding-bottom:15px;
}

/* skinHeaderFrame 広告もブログタイトルも囲う横幅のないヘッダーフレーム */
.skinHeaderFrame{}

/* skinHeaderArea ブログヘッダー */
.skinHeaderArea{/*【簡単カスタム対象】*/
/* 注 blog.cssにwidth:980px;の記述有り */
/* 【簡単カスタム対象】注 margin,paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
}
.skinHeaderArea2{
/* 【簡単カスタム対象】注 margin,paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
}

/* skinBlogHeadingGroupArea 【簡単カスタム対象】*/
.skinBlogHeadingGroupArea{
/* 【簡単カスタム対象】ブログタイトルと説明のpaddingのみ指定可能 */
padding: 20px 0 30px;
}

/* skinTitleArea ブログタイトルのブロック */
.skinTitleArea{/*【簡単カスタム対象】*/
padding-bottom:4px;
}

/* skinTitle ブログタイトル文字 */
.skinTitle,
.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000;
font-weight:bold;
font-size:2.11em;
}

/* skinDescription ブログの説明ブロック */
.skinDescriptionArea{/*【簡単カスタム対象】*/
}

/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333;
}

/* コンテンツエリア
--------------------------------------------*/

/* skinContentsFrame コンテンツを囲う横幅の無いフレーム */
.skinContentsFrame{}

/* skinContentsArea コンテンツ980pxブロック */
.skinContentsArea{
/* 注 blog.cssにwidth:980px;の記述有り */
}

/* メインエリア
--------------------------------------------*/

.skinMainArea{}

/* メッセージボード
--------------------------------------------*/

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#fff;
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 30px;
}

/* カラム別の記述
.columnA .skinMessageBoard,
.columnB .skinMessageBoard{}

.columnC .skinMessageBoard,
.columnD .skinMessageBoard,
.columnE .skinMessageBoard{}
*/

/* 記事
--------------------------------------------*/

/* skinArticle 記事ブロック */
.skinArticle{
/* 注 blog.cssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #ddd;
background:#fff;
}
.skinArticle2{}
.skinArticle3{}

/* カラム別の記述
.columnA .skinArticle,
.columnB .skinArticle{}

.columnC .skinArticle,
.columnD .skinArticle,
.columnE .skinArticle{}
*/

/* skinArticleHeader 記事ヘッダーブロック */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}

/* skinArticleTitle 記事ヘッダー文字 */
.skinArticleTitle,
.skinArticleTitle:hover,
.skinArticleTitle:focus,
.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#06c;
}

/* skinArticleBody 記事本文ブロック */
/*
 * 【デザイン規則】記事の中身の横幅は 2カラム 605px、3カラム 410pxになるように
 */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}

/* skinArticleFooter 記事フッターブロック */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}

/* サイドエリア
--------------------------------------------*/

.skinSubArea {}/* 共通 */
.skinSubA{}/* (300px) */
.skinSubB{}/* (180px) */

/* サイド メニュー
--------------------------------------------*/

/* skinMenu サイドメニューのブロック */
.skinMenu{
/* 注 blog.cssに margin-bottom の記述有り */
margin-bottom:10px;
background:#f7f7f7;
}
.skinMenu2{}

/* subA subB別の記述
.skinSubA .skinMenu{}
.skinSubB .skinMenu{}
*/

/* skinMenuHeader サイドメニューヘッダー */
.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;
}

/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{}

/* skinMenuBody サイドメニュー本文ブロック */
/*
 * 【デザイン規則】サイドバーの中身の横幅は subA 260px、subB 140px
 */
.skinMenuBody{
margin:10px;
padding:10px;
background:#fff;
}

/* サイドバーのリスト、境界線
--------------------------------------------*/
/*
 * 【CSS規則】
 * ・要素の下に表示すること
 * ・境界線が持つ余白(margin-bottom, padding-bottom)も設定すること
 *
 */
.skinSubHr,
.skinSubList li{
margin-bottom:3px;
padding-bottom:3px;
border-bottom:1px dotted #b3b3b3;
}

/* skinSubA skinSubBで違う場合
.skinSubA .skinSubHr,
.skinSubA .skinSubList li{}

.skinSubB .skinSubHr,
.skinSubB .skinSubList li{}
*/

アメブロCSS構造ー基本講座

アメブロCSSの基本講座
カスタム可能/CSS編集用デザイン
元々のCSSは下記のようになっています。
このCSSをカスタムすることでアメブロのデザインを自由に変更することができます。

CSSの基本が分かっていれば、HTML の構造を元にこのCSSをどんどん書き換えていきましょう。

@charset "utf-8";
/*
-----------------------------------------

 【CSS編集 目次】

 (1) 文字のスタイル
 (2) ボタンのスタイル
 (3) エリアのスタイル
 (4) その他、拡張

  ※CSS編集で広告を修正しないでください
  (規約違反に該当する可能性があります)

-----------------------------------------
*/

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

 (1) 文字のスタイル

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

/* (1-1) 全体の文字
--------------------------------------------*/

/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}

/* リンク */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#0066cc;
}

/* 訪問済のリンク */
.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;
}

/* 強い文字 (NEW! 更新!など)*/
.skinStrongColor,.skinBaseStrongColor{
color:#ff3399;
}

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}

/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}

/* (1-3) 記事/メッセージボード内の文字のスタイル
--------------------------------------------*/

/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
}

/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/

/* 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);
}

/* ボタンの文字色 */
.skinImgBtnM:hover span,.skinImgBtnM:focus span,.skinImgBtnM span{
color:#333333 !important;
}

/* (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);
color:#333333 !important;/* ←ボタンの文字色 */
}

/* (2-3) ページ送りボタンの  << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/

.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #dddddd;
background:#ffffff;
color:#0066cc !important;
}

/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#f7f7f7;
}

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

 (3) エリアのスタイル
 ※背景画像、サイズ、ボーダーなどを各部分ごとに指定

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

/* (3-1) ボディ(全体)
--------------------------------------------*/

/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}

/* (3-3) コンテンツエリア
--------------------------------------------*/

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/* 注 ベースのcssにwidth:980px;の記述有り */
}

/* (3-4) メインエリア
--------------------------------------------*/

.skinMainArea{}

/* (3-5) メッセージボード
--------------------------------------------*/

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 30px;
}

/* (3-6) 記事
--------------------------------------------*/

/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}

/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}

/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}

/* (3-7) サイドバーエリア
--------------------------------------------*/

.skinSubArea{} /* サイドバーエリア共通 */
.skinSubA{} /* 300pxのサイドバーエリア */
.skinSubB{} /* 180pxのサイドバーエリア */

/* (3-8) サイドバー メニュー
--------------------------------------------*/

/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}

/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}

/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}

/* (3-9) サイドバーの リスト画像、ボーダー ※要素のbottomに指定すること
--------------------------------------------*/

.skinSubHr,
.skinSubList li{
margin-bottom:3px;
padding-bottom:3px;
border-bottom:1px dotted #b3b3b3;
}

/* (3-10) コメント欄、トラバ欄、記事一覧などの一覧
--------------------------------------------*/

/* 背景色 */
.skinBgColor,.skinBaseBgColor,.skinBlock{
background-color:#ffffff;
}

/* 弱い背景色 */
.skinWeakBgColor,.skinBaseWeakBgColor{
background-color:#f7f7f7;
}

/* 強い背景色 */
.skinStrongBgColor,.skinBaseStrongBgColor{
background-color:#f7f7f7;
}

/* 枠線の色 */
.skinBorderColor,.skinBaseBorderColor,.skinBlock{
border-color:#dddddd;
}

/* 境界線の色 */
.skinBorderHr,.skinBorderList li{
border-color:#b3b3b3;
}

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

 (4) その他、拡張

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

/* その他、拡張があれば記述 */