記事についたいいね!の各種調整 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ 記事についたいいね!の各種調整



● 内容

① ヘッダー部分の調整

 ・ 記事についたいいね! の についたいいね!の文字
 ・ 記事についたいいね! の記事名
 ・ 記事についたいいね! ()件
 ・ 記事についたいいね! ()件の件数部分

② ボディー部分の調整

 ・ ボディー部分の●●時間前
 ・ ボディー部分の Newの調整
 ・ ボディー部分の ニックネーム
 ・ ボディー部分の ブログ名

③ プロフィール画像の調整①(全体の大きさを変えないケース)

 ・ ボディー部分の プロフィール画像の大きさ
 ・ ボディー部分の ニックネーム・ブログ名・●●時間前の幅
 ・ ボディー部分の ●●時間前の調整

④ プロフィール画像の調整②(全体の大きさを変えるケース)

 ・ ボディー部分の プロフィール画像の大きさ
 ・ 全体幅の調整
 ・ ボディー高さの調整




● やり方。  CSSの一番下に追加します。


① ヘッダー部分の調整


/* 記事についたいいね! の についたいいね!の文字 */
#iineEntryFrame .iineListHeaderText{
font-size:12px; /* 文字サイズ */
font-weight:bold;/* 文字の太さ normal→普通 bold→太文字 */
color:#000000; /* 文字の色 */
}
/* 記事についたいいね! の記事名 */
#iineEntryFrame .tx_bold{
font-size:12px; /* 文字サイズ */
font-weight:bold;/* 文字の太さ normal→普通 bold→太文字 */
color:#ff0000; /* 文字の色 */
}
/* 記事についたいいね! ()件 */
#iineEntryFrame #iineEntryHeader .tx_grayA{
font-size:12px; /* 文字サイズ */
font-weight:bold;/* 文字の太さ normal→普通 bold→太文字 */
color:#000000; /* 文字の色 */
}
/* 記事についたいいね! ()件の件数部分 */
#iineEntryFrame #iineEntryHeader .tx_orageA{
font-size:12px; /* 文字サイズ */
font-weight:bold;/* 文字の太さ normal→普通 bold→太文字 */
color:#ff0000; /* 文字の色 */
}



② ボディー部分の調整
 New!の使用画像:  NEW    http://stat.ameba.jp/blog/ucs/img/char/char2/265.gif


/* ボディー部分の●●時間前 */
#iineEntryFrame .iineListBody .tx_grayA{
font-size:12px; /* 文字サイズ */
font-weight:bold;/* 文字の太さ normal→普通 bold→太文字 */
color:#000000; /* 文字の色 */
}
/* ボディー部分の Newの調整 */
#iineEntryListFrame .iineListBody .ico_new{
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/265.gif);
background-repeat:no-repeat;
background-position:right top;
}
/* ボディー部分の ニックネーム */
#iineEntryListFrame .iineListBody .iineListNickname {
font-size:12px; /* 文字サイズ */
font-weight:bold;/* 文字の太さ normal→普通 bold→太文字 */
color:#000000; /* 文字の色 */
}
/* ボディー部分の ブログ名 */
#iineEntryListFrame .iineListBody .iineEntryListBlogTitle{
font-size:12px; /* 文字サイズ */
font-weight:bold;/* 文字の太さ normal→普通 bold→太文字 */
color:#ffccff; /* 文字の色 */
}


③ プロフィール画像の調整①(全体の大きさを変えないケース)


/* ボディー部分の プロフィール画像の大きさ */
#iineEntryListFrame .iineListBody .iineProfImg img{
width:80px;
height:auto
}
/* ボディー部分の ニックネーム・ブログ名・●●時間前の幅 */
#iineEntryListFrame .iineListBody .iineListMain{
float:right;
width:430px;
}
/* ボディー部分の ●●時間前の調整 */
#iineEntryListFrame .iineListBody .iineListCntR {
position:relative;
top:-37px;
}



④ プロフィール画像の調整②(全体の大きさを変えるケース)


/* ボディー部分の プロフィール画像の大きさ */
#iineEntryListFrame .iineListBody .iineProfImg img{
width:80px;
height:auto
}
/* 全体幅の調整 */
#iineEntryFrame{
width:620px;/* 標準は573px */
margin-left:-47px;/* 620px-573px */
}
/* ボディー高さの調整 */
#iineEntryFrame #iineEntryContents{
max-height:200px;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}