アメブロカスタマイズデザインの編集

@charset "utf-8";
/*--------------------------------------------------
skin.css
$Id: skin.css,v 1.23 2011/07/01 09:57:52 oyama_yuichi Exp $
--------------------------------------------------*/

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

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

　カラー設定

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


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

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

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

/* リンク色（基本） */
.skinAnchorColor,
.skinBaseAnchorColor,
.skinBlock a,
a{
color:#0066cc;			/* 【CSS規則】colorのみ指定可能 */
}

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

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


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


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




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


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


/* 強調　背景色 */
.skinStrongBgColor,
.skinBaseStrongBgColor{
background-color:#fbf9eb;	/* 【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(//stat100.ameba.jp/p_skin/wu_pf_cats/img/skin_btn_m.png);
}
.skinImgBtnM:hover span,
.skinImgBtnM:focus span,
.skinImgBtnM span{
color:#000;
}


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

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:#FB807F;
}
.skinSimpleBtn:hover,
.skinSimpleBtn:focus{
background:#f7f7f7;
}







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

 ブロックごとのスタイル

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


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

/* skinBody bodyの代わり */
/* 【簡単カスタム対象】 */
.skinBody{
background: url("//ameblocustom.sanyo-fast.com/haru201612/blog_back.png")  center 0;
}
.skinBody2{
background: url("//ameblocustom.sanyo-fast.com/haru201612/body.png") repeat-y center 0;
}
.skinBody3{}

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



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

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


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


/* skinHeaderArea ブログヘッダー */
/* 注 blog.cssにwidth:980px;の記述有り */
/* 【簡単カスタム対象】注 margin,paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
.skinHeaderArea{
background: url("//ameblocustom.sanyo-fast.com/haru201612/top.png") no-repeat scroll 0 0 transparent; 
height:400px;
margin:0 auto 1px;
}

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

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

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

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

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
  padding:0;
}
.skinTitleArea{
  display:block;
  padding:0;
  text-indent:-9999px;
}
.skinTitle{
  display:block;
  height:0px;
}



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

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


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



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

.skinMainArea{

}



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

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */

}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:30px;

}

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

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




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

/* skinArticle 記事ブロック */
.skinArticle{background: 
padding-top:60px;
zoom:1;
border:none;
padding:0 0 16px;
/* 注　blog.cssに margin-bottom の記述有り */

}

.skinArticle2{ 
/*
background: url(//ameblocustom.sanyo-fast.com/haru201612/article-bg.png) repeat-y 0 0;
*/
}

.skinArticle3{background:#fff;}

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

.columnC .skinArticle,
.columnD .skinArticle,

.columnE .skinArticle{}
*/


/* skinArticleHeader 記事ヘッダーブロック */
.skinArticleHeader{
margin:0;
width: 429px;
height: 101px;
background: url(//ameblocustom.sanyo-fast.com/haru201612/articleHeader.png) no-repeat 0 0;
padding: 6px 10px 5px 13px;
border-left: none!important;
}

.skinArticleHeader2{}


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


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


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




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

.skinSubArea {}/* 共通 */
.skinSubA{

}/* (300px) */
.skinSubB{}/* (180px) */

.columnD .skinSubA{
	margin:0 0 0 15px;
}

.columnD .skinSubB{
	margin:0 15px 0 0;
}

.columnD .skinMainArea {
float: right;
display:inline;
width: 430px;
margin:0 20px 0 0;
}

.columnC .skinMainArea{
float: left;
display:inline;
width: 430px;
margin:0 0 0 20px;
}


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


/* skinMenu サイドメニューのブロック */
/* 注　blog.cssに margin-bottom の記述有り */
.skinMenu{
background: url("") repeat 0 0;
}

.skinMenu2{}

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

.skinSubB .skinMenu{}


/* (3-8-3) skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#fcfcfc;
}

/*■■====================================================■■*/
/*========== ☆ .skinSubA タイトル300はここから ☆ ===========*/

.skinSubA .skinMenuHeader{
	width:300px;
	height:46px;
    padding:0;
}

.skinSubA .profileMenu .skinMenuHeader{
	background:url(//ameblocustom.sanyo-fast.com/haru201612/profile.png) no-repeat 0 0;	
}

.skinSubA .archiveMenu .skinMenuHeader{
	background:url(//ameblocustom.sanyo-fast.com/haru201612/archive.png) no-repeat 0 0;	
}


/* subAdBannerArea サイド300px広告バナータイトル */
/*
.subAdBannerArea{
background:url() repeat 0 0;
}
.subAdBannerHeader{
	width:300px;
	height:45px;
	margin:0 0 10px 0;
	background:url(//ameblocustom.sanyo-fast.com/haru201612/PR.png) no-repeat 0 0;
}

.subAdBannerHeader span{
	display:none;
}
*/
/*□□====================================================□□*/
/*========== ☆ .skinSubA タイトル300はここまで ☆ ===========*/



/*■■====================================================■■*/
/*========== ☆ .skinSubB タイトル180はここから ☆ ===========*/

.skinSubB .skinMenuHeader{
	width:180px;
	height:46px;
        padding:0;
}

.skinSubB .recentEntriesMenu .skinMenuHeader{
	background:url(//ameblocustom.sanyo-fast.com/haru201612/recentEntries.png) no-repeat 0 0;	
}

.skinSubB .themeMenu .skinMenuHeader{
	background:url(//ameblocustom.sanyo-fast.com/haru201612/theme.png) no-repeat 0 0;	
}

.skinSubB .rankingMenu .skinMenuHeader{
	background:url(//ameblocustom.sanyo-fast.com/haru201612/ranking.png) no-repeat 0 0;	
}

.skinSubB .bookmarkMenu .skinMenuHeader{
	background:url(//ameblocustom.sanyo-fast.com/haru201612/bookmark.png) no-repeat 0 0;	
}


/*□□====================================================□□*/
/*========== ☆ .skinSubB タイトル180はここまで ☆ ===========*/


/* skinMenuHeader サイドメニューヘッダー */
.skinMenuHeader{

}

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



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





/* サイドバーのリスト、境界線
--------------------------------------------*/
/*
 * 【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{}
*/


/*■■====================================================■■*/
/*============= ☆ グローバルナビはここから ☆ ==============*/


/* ----------- #globalnavi ポジション設定 ----------- */

.skinContentsFrame{
position:relative;
width:980px;
margin:0 auto;
padding:82px 0 0 0;
}

.skinFrame{
position:relative;
margin:0 auto;
}

.skinFrame2{

}


#globalnavi{
width:980px;
list-style-type: none;
background:url(//ameblocustom.sanyo-fast.com/haru201612/globalnavi_off.png);
background-repeat:no-repeat;
background-position:center 0;
position: absolute;
left:0px;
top:0px;
}

#globalnavi li{
height: 68px;
float:left;
display:inline;
}

#globalnavi li {
float:left;
padding-bottom:0 !important;
padding-left:0 !important;
}
#globalnavi li a {
background-image:url("//ameblocustom.sanyo-fast.com/haru201612/globalnavi_off.png");
background-repeat:no-repeat;
display:block;
height:57px;
}

#globalnavi li a:hover {
background-image:url("//ameblocustom.sanyo-fast.com/haru201612/globalnavi_on.png");
background-repeat:no-repeat;
display:block;
height:57px;
}

#globalnavi li#menu1 a {
background-position:0 0;
width:140px;
}

#globalnavi li#menu2 a {
background-position:-140px 0;
width:140px;
}

#globalnavi li#menu3 a {
background-position:-280px 0;
width:140px;
}

#globalnavi li#menu4 a {
background-position:-420px 0;
width:140px;
}

#globalnavi li#menu5 a {
background-position:-560px 0;
width:140px;
}

#globalnavi li#menu6 a {
background-position:-700px 0;
width:140px;
}

#globalnavi li#menu7 a {
background-position:-840px 0;
width:140px;
}

#globalnavi li a span {
display:none;
}

/*□□====================================================□□*/
/*============= ☆ グローバルナビはここまで ☆ ==============*/

.columnC .layoutContentsB{
margin:0 0 0 15px!important;
}

.columnC .skinSubA{
margin:0 15px 0 0!important;
}

.skinArticleBody img{
margin:0!important;
}

.skinHeaderArea{
margin-top:-23px;
}