firefox アドオン stylish を使ったマイページのカスタマイズ② | リアナのカスタマイズ日記(CSS編集用デザイン)

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

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

★ firefox アドオン stylish を使ったマイページのカスタマイズ②


■ マイページの右側のサイドバーを消したいという質問がありましたが、
  マイページの右側のサイドバーには広告があるので消すことを
  ブログには載せられません。

  しかし、昔のマイページに比べて文字が小さくて見づらいという人が
  多いので、右サイドバーを消さないで文字を大きくする方法を紹介
  します。



● 関連記事

Firefox アドオン stylish を使ったマイページのカスタマイズ


● 実例(適用例)



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





● CSS内容 ★ 黄色い部分を追加しました。


① 下記を Firefox の  stylish に入れます。


#content{
width:1290px !important;
margin-left:260px !important;
}
#rightContent{
position:static !important;
}
.mainContent{
width:740px !important;
}
#blogArea{
width:740px;
}
#blogArea .mainTitleHeader{
width:730px !important;
}
#blogArea .mainTitleHeader h2{
width:700px !important;
}
input.searchText{
width:500px !important;
}
#checklist .subTitleHeader{
width:740px !important;
}
#checklistInner .checklistItem{
width:750px !important;
}
#historyArea .subTitleHeader{
width:750px !important;
}
#guruppoAreaTitle{
width:750px !important;
}
#rssAreaTitle{
width:750px !important;
}
#checklistInner .checklistItem .main{
font-size:16px;
width:500px !important;
}
#checklistInner .checklistItem .thumb,#checklistInner .checklistItem .thumb img{
width:60px!important;
height:60px!important;
}
#checklistInner .checklistItem .img,#checklistInner .checklistItem .img img{
width:70px!important;
height:70px!important;
}
#checklistInner .checklistItem .main a{
font-size:16px !important;
}
#historyArea h3,#historyArea a{
font-size:16px !important;
}
#historyAreaInner .historyItem{
width:150px !important;
height:80px
}
#historyAreaInner .historyItem .historyItemRight .title{
height:65px !important;
}
#commentArea .subTitleHeader h3{
font-size:16px;
}
#commentArea a{
font-size:16px;
}
#commentAreaInner .commentItem .title{
width:400px !important;
}
#guruppoArea .main,#guruppoArea .main a{
font-size:16px;
width:650px !important;
}
#guruppoArea .main .subtitle{
width:500px !important;
}
#guruppoArea .main .title{
width:500px !important;
}
#guruppoArea .thumb,#guruppoArea .thumb img{
width:70px !important;
height:70px !important;
}
#rssAreaList .rssItem{
font-size:16px;
}
#rssAreaList .rssItem .title{
width:300px !important
}
#rssAreaList .rssItem .lapse{
width:80px !important
}
.moretitleArea{
width:500px !important;
}
.entryTitleList .strmBlogTitle{
width:440px !important;
}
#commentAreaInner .commentBalloonItem .thumb{
width:50px !important;
height:50px !important;
}
.cThumb img{
width:50px !important;
height:50px !important;
}
#commentAreaInner .commentBalloonItem{
width:500px;
}
#commentAreaInner .commentBalloonItem{
margin-left:-50px !important;
}
#commentAreaInner .commentBalloonItem .commentBalloonItemRight{
width:430px !important;
}
#commentAreaInner .commentBalloonItem .desc{
width:400px !important;
}


② 下記の様に入れます



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








● 追加 少し中央部分の幅を狭くしました



#content{
width:1190px !important;
margin-left:260px !important;
}
#rightContent{
position:static !important;
}
.mainContent{
width:650px !important;
}
#blogArea{
width:650px;
}
#blogArea .mainTitleHeader{
width:650px !important;
}
#blogArea .mainTitleHeader h2{
width:600px !important;
}
input.searchText{
width:430px !important;
}
#checklist .subTitleHeader{
width:640px !important;
}
#checklistInner .checklistItem{
width:650px !important;
}
#historyArea .subTitleHeader{
width:650px !important;
}
#guruppoAreaTitle{
width:650px !important;
}
#rssAreaTitle{
width:650px !important;
}
#checklistInner .checklistItem .main{
font-size:14px;
width:490px !important;
}
#checklistInner .checklistItem .thumb,#checklistInner .checklistItem .thumb img{
width:60px!important;
height:60px!important;
}
#checklistInner .checklistItem .img,#checklistInner .checklistItem .img img{
width:70px!important;
height:70px!important;
}
#checklistInner .checklistItem .main a{
font-size:14px !important;
}
#historyArea h3,#historyArea a{
font-size:16px !important;
}
#historyAreaInner .historyItem{
width:150px !important;
height:80px;
}
#historyAreaInner .historyItem .historyItemRight .title{
height:65px !important;
}
#commentArea .subTitleHeader h3{
font-size:16px;
}
#commentArea .subTitleHeader{
width:650px !important;
}
#commentArea a{
font-size:14px;
}
#commentAreaInner .commentItem .title{
width:300px !important;
}
#guruppoArea .main,#guruppoArea .main a{
font-size:14px;
width:550px !important;
}
#guruppoArea .main .subtitle{
width:400px !important;
}
#guruppoArea .main .title{
width:420px !important;
}
#guruppoArea .thumb,#guruppoArea .thumb img{
width:70px !important;
height:70px !important;
}
#rssAreaList .rssItem{
font-size:14px;
}
#rssAreaList .rssItem .title{
width:300px !important;
}
#rssAreaList .rssItem .lapse{
width:80px !important;
}
.moretitleArea{
width:550px !important;
margin-top:20px !important
}
.entryTitleList .strmBlogTitle{
width:410px !important;
}
#commentAreaInner .commentBalloonItem .thumb{
width:50px !important;
height:50px !important;
}
.cThumb img{
width:50px !important;
height:50px !important;
}
#commentAreaInner .commentBalloonItem{
width:510px;
}
#commentAreaInner .commentBalloonItem{
margin-left:-50px !important;
}
#commentAreaInner .commentBalloonItem .commentBalloonItemRight{
width:450px !important;
}
#commentAreaInner .commentBalloonItem .desc{
width:360px !important;
}