プロフィールの調整(サイドバーを両方ワイドにする) | リアナのカスタマイズ日記(CSS編集用デザイン)

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

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



★ プロフィールの調整(サイドバーを両方ワイドにする)


● 内容

  サイドバーを両方ワイドにする でワイドでないサイドバーを
  ワイドにして、プロフィールをワイドにした方に配置した
  場合の方法です。



① プロフィール画像を大きくします。(元々ワイドでも可能)
② プロフィール内の各ボタンを縦に4つから横2つ、縦に2つにします。
③ なうを横長(ワイド)にします。


● CSSへ追記してください。



① プロフィール画像を大きくします。(元々ワイドでも可能)

/* ------------------------------------------------------- */
/* プロフィール画像の調整                 */
/* ------------------------------------------------------- */
#userPiggImage embed,.userProfileImageArea {
width: 200px !important;/* 画像の横幅 */
height:200px !important;/* 画像の縦*/
background-color:#transparent !important;/* 背景色(透明) */
text-align:center;
margin-bottom:15px !important;/* 画像下の余白 */
margin-left:10px;/* 画像左の余白 */
margin-top:10px;/* 画像上の余白 */
}
.userProfileImage {
width: 200px !important;/* 画像の横幅 */
height:200px !important;/* 画像の縦*/
background: none repeat scroll 0 0 transparent;/* 背景色(透明) */
border: 0px solid #CCCCCC;/* 枠線(なし) */
padding: 1px;
text-align: center;
}
.userProfileImage img{
width:200px;
height:200px;
}






② プロフィール内の各ボタンを縦に4つから横2つ、縦に2つにします。

/* ------------------------------------------------------- */
/* プロフィールボタンの調整                */
/* ------------------------------------------------------- */
.profileBtnArea{
width:300px;/* 幅 (横2列に) */
margin-left:-5px !important;/* 左に位置を移動 */
}


③ なうを横長(ワイド)にします。

/* ------------------------------------------------------- */
/* プロフィール なうをワイドに              */
/* ------------------------------------------------------- */
.skinSubB .nowQuote {
    background-position: 0 100% !important;
    background-repeat: no-repeat !important;
    width: 260px !important;
}
.skinSubB .nowQuote p {
    background-position: -520px 0 !important;
    background-repeat: no-repeat !important;
    width: 260px !important;
}
.skinSubB .nowQuote a {
    background-position: -260px 0 !important;
    background-repeat: repeat-y !important;

    width: 248px !important;
}
.skinSubB .nowQuoteText {
    width: 248px !important;
}
.skinSubB .nowQuoteDetail {
    padding-top: 3px !important;
    width: 240px !important;
}