アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -248ページ目

CSS このブログの読者一覧 2




タイトル画像 ・・・・メンドイので前の画像を使っちゃっています、黒板に黒板って・・・



上の背景画像



中、下の背景画像・・・1枚でカバーしますので大きめに作ってください


前のページ を参考にCSSの最後に貼り付けてください


/*読者一覧のページ*/
#reader_list .title{/*タイトル*/
text-indent:-9000px;
background-image:url(画像のURL);
background-repeat:no-repeat;
height:55px;/*上のスキマ+画像の高さ*/
background-position:15px 15px;/*タイトル画像左からと上からの位置*/
}


#reader_list {/*背景上*/
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left top;
}


#reader_list ul{/*背景中、下*/
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left bottom;
padding:10px 0px 10px 15px;/*上、0、下、左のスキマ*/
}


#reader_list .reader_id {/*ID名*/
color:#ffffff;/*文字色*/
}


#reader_list .reader_blog {/*ブログ名*/
color:#ffffff;/*文字色*/
}


#reader_list li{/*点線*/
border-bottom:2px dotted #ffffff;
width:350px
;

}

※背景中、下のpadding:10px 0px 10px 15px;/*上、0、下、左のスキマ*/
 右の0は 左の位置が決まっていて、点線のところ liのwidth:350px;で幅が設定されているので

 必然的に右の位置は決定するので 0 のままでOK


↑上のようにタイトルに画像を使わない場合

 (文面を変更する場合は画像を作るしかありません・・・)

#reader_list .title{/*タイトル*/
color: #ffffff;/*文字色*/
font-size: 15px;/*文字サイズ*/
padding-top: 20px;/*文字位置上から*/
padding-left: 20px;/*文字位置左から*/
}



・・・・記事一覧に続きます

CSS このブログの読者一覧

このブログの読者一覧のページをなんとかしちゃいます・・・




タイトル画像


背景画像

下の図を参考にCSSの最後にコピペしてください


/*読者一覧のページ*/
#reader_list h3.title{/*タイトルA*/
text-indent:-9000px;
background-image:url(画像のURL);
background-repeat:no-repeat;
height:40px;/*画像の高さ*/
}


#reader_list .reader_id {/*ID名B*/
color:#ff00ff;/*文字色*/
}


#reader_list .reader_blog {/*ブログ名C*/
color:#ff00ff;/*文字色*/
}


#reader_list li{/*点線D*/
border-bottom:2px dotted #ff00ff;
}


#reader_list{/*背景E*/
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:100% 100%;
}






上の図のようにタイトルは画像を使わなくても出来ます


#reader_list .title{/*タイトルA*/
color: #ff00FF;/*文字色*/
font-size: 15px;/*文字サイズ*/
}



線種の例・・・・他にもありますよ

border-bottom: 1px solid #ff00ff; solid 1本線


border-bottom: 3px double #ff00ff; double 2本線


border-bottom: 1px dashed #ff00ff; dashed 破線


border-bottom: 5px dotted #ff00ff; dotted 点線


border-bottom: 3px ridge #ff00ff; ridge 山型の線

CSS 自己紹介は消しちゃぇ~

ブログプロフィール欄に表示している「みんなへの一言」がなくなり

「自己紹介」が表示されるようになりました



いりません!!って方は・・・・



CSSの最後に


#profile .freeText,
#profile .link_profile{
display:none;
}


これで自己紹介と続きを読むが消えてしまいます・・・