エムの独り言

レイアウトについては、いろいろとオフィシャル様も苦心されているようですが……どうも私、オフィシャル様の考えには同調しにくいようです。
というわけで、以前からFireFoxのアドオン「stylish」を利用し、自分と感性の近い方のCSSを利用していました。
が、ずいぶん前のレイアウト変更以来そのCSSではレイアウトが崩れてしまっていたのですが……。（気にはなりつつ、まあいいか……で放置しておりました・笑）
さすがになんとかしようと決意。mixiのレイアウトを2カラムでイイカンジにならないかと、体調を取り戻した（苦笑）Google先生に尋ねてみました。


で、いくつか試した結果、「ハコブログ」さまのCSSを導入。
「リニューアルしたmixiのデザインをユーザーCSSで変更する」

環境の所為か、ちょっとずれてしまうところがあったのと「やっぱmixiは左寄りでしょ！」と思ったので、そこらへんを修正したCSSを使用。快適です。

・新着記事部分の日付とタイトル位置、ハバを修正
・新着記事部分の行間も少しいじったような
・右端のマージン0だったのをちょっぴり空けた
・全体を左寄せ、にして背景をグレーに

……したものを畳んで置いておきます。






@-moz-document domain("mixi.jp") {

/* ページ全体の背景色 */
html{ background:#F5F5F5; }

body{
width:725px !important;
padding:0 4px 0 0 !important;
border-left:solid 1px #ccc !important;
border-right:solid 1px #ccc !important;
background:#fff;
}

/*---- HeaderArea ----*/
#headerArea{
position:relative !important;
width:725px !important;
overflow:hidden !important;
}

#headerArea h1{
float:left !important;
width:186px !important;
height:64px !important;
}

#headerArea h1 a{
display:block !important;
margin:14px 0 0 42px !important;
padding:0 !important;
}

#headerArea .adBanner{ display:none !important; }

/*---- globalNavigation/contentsNavigation ----*/
ul.contentsNavigation{
float:none;
height:35px;
background:url(http://img.mixi.jp/img/basic/common/contentsnavi_bg.gif) repeat-x 0% 100%;
}

ul.contentsNavigation li{
float:left;
text-indent:-1px;
overflow:hidden;
border-right:solid 1px #ccc;
}
ul.contentsNavigation li.home{ display:none; }
ul.contentsNavigation li.diary{ width:67px; }
ul.contentsNavigation li.community{ width:83px; }
ul.contentsNavigation li.movie{ width:66px; }
ul.contentsNavigation li.photo{ width:66px; }
ul.contentsNavigation li.music{ width:83px; }
ul.contentsNavigation li.review{ width:74px; }
ul.contentsNavigation li.news{ width:74px; }
ul.contentsNavigation li.mikly{ width:68px; }
ul.contentsNavigation li.friendInvite{ border:none; }

/* ヘルプ・ログアウトの位置調整 */
ul.utilityNavigation{
clear:both;
position:absolute;
top:3px;
right:-2px;
background:none !important;
}

/*---- localNavigation ---- */
#localNavigation ul li{
overflow:hidden;
border-right:solid 1px #ec8;
}
#localNavigation ul li.top{ width:70px; text-indent:-14px; }
#localNavigation ul li.message{ width:72px; text-indent:-9px; }
#localNavigation ul li.diary{ width:70px; text-indent:-7px; }
#localNavigation ul li.video{ width:70px; text-indent:-7px; }
#localNavigation ul li.photo{ width:70px; text-indent:-7px; }
#localNavigation ul li.music{ width:72px; text-indent:-10px; }
#localNavigation ul li.favorite{ width:72px; text-indent:-11px; }
#localNavigation ul li.show-log{ width:68px; text-indent:-12px; }
#localNavigation ul li.setup{ width:72px; text-indent:-7px; }

/* ナゾのプルダウンを非表示 */
#diaryPullDownButton,#videoPullDownButton,#photoPullDownButton,#reviewPullDownButton,#topicPullDownButton,#eventPullDownButton{ display:none; }

#localNavigation ul.localNaviFriend li{ border-right:solid 1px #abd; }
#localNavigation ul.localNaviFriend li.top{ width:64px; text-indent:-19px; }
#localNavigation ul.localNaviFriend li.diary{ width:64px; text-indent:-16px; }
#localNavigation ul.localNaviFriend li.movie{ width:63px; text-indent:-16px; }
#localNavigation ul.localNaviFriend li.photo{ width:64px; text-indent:-16px; }
#localNavigation ul.localNaviFriend li.music{ text-indent:-14px; }
#localNavigation ul.localNaviFriend li.review{ width:64px; text-indent:-19px; }
#localNavigation ul.localNaviFriend li.message{ width:105px; text-indent:-4px; }
#localNavigation ul.localNaviFriend li.bookmark{ width:110px; text-indent:-4px; }
#localNavigation ul.localNaviFriend li.mymixi{ width:110px; text-indent:-4px; }

#localNavigation ul.localNaviCommunity li{ border-right:solid 1px #ac9; }
#localNavigation ul.localNaviCommunity li.top{ width:60px; text-indent:-26px; }
#localNavigation ul.localNaviCommunity li.topic{ width:62px; text-indent:-22px; }
#localNavigation ul.localNaviCommunity li.event{ width:62px; text-indent:-22px; }
#localNavigation ul.localNaviCommunity li.enquete{ width:64px; text-indent:-24px; }
#localNavigation ul.localNaviCommunity li.review{ width:auto; }
#localNavigation ul.localNaviCommunity li.music{ width:122px; text-indent:-6px; }
#localNavigation ul.localNaviCommunity li.favorite{ width:114px; text-indent:-2px; }

/*---- bodyArea ----*/
#bodyArea{ width:725px !important; }

#oldMain{
width:725px !important;
overflow:hidden !important;
}

/*---- information ----*/
div.information *{ line-height:1.4em !important; }

div.information h2{
position:absolute !important;
top:1em !important;
}

/*---- mymixiList ----*/
#mymixiList{ line-height:1.2em !important; }

/*---- communityList ----*/
#communityList{ line-height:1.2em !important; }

/*---- bodyContents ----*/

/*---- contentsList01 ----*/
dl.contentsList01{
float:left;
line-height:1.4em !important;
}

#bodyContents div.heading02{ background:url(http://img.mixi.jp/img/basic/heading/body_contents001.gif) !important; }

#mymixiUpdate div.heading01{ display:none; }

#myUpdate {
position:relative;
border-bottom:dotted 1px #ccc !important;
}

dl.contentsList01 dt{
margin-top:6px !important;
padding-left:8px !important;
width:80px !important;
border-left:solid 4px #f2ddb7 !important;
}

dl.contentsList01 dd{
margin-top:6px !important;
padding:0 !important;
width:310px !important;
background:none !important;
border-bottom:dotted 1px #ccc !important;
}

dl.contentsList02 dd{
line-height:2em;
border-bottom:dotted 1px #ccc !important;
}

dl.contentsList02 dd dl{ width:350px; }

dl.contentsList02 dd p{
position:absolute;
right:0;
margin-top:-2em !important;
}

dl.contentsList02 dd dl dd{ border-bottom:none !important; }
/*
#intro .contents{
position:absolute;
padding:0;
width:441px;
height:230px;
overflow:auto;
}
*/
#intro div.contents dl{
padding:0;
}

/*---- bodySub ----*/
#bodySub{ display:none; }

/*---- footerArea ----*/

#footerArea{ width:725px !important; }

#footerArea ul.footerNavigation01 li{ margin:0 4px !important; }

}