前のエントリで「ある程度まとまったら」とか言ってた舌の根も乾かないうちにバージョンアップ版を。
バージョン表記はmixi内での公開時に準拠してます。
どこをどういじってるかに関しては各行にコメントでつけるようにしたので、それを参考に各自で取捨選択してみてください。
動作確認はWinIE6のみ。有志の方からOpera、Firefox2、MacOS10.4+safariでの動作も確認できたと報告がありました。もっとも大したアクロバットはやってないのでWinならネスケ4とかじゃないかぎり大抵大丈夫だとは思いますが。
適用方法：
1)新規テキストファイルに下記CSSをコピペして「適当なファイル名.css」でローカルに保存。
2)IEからツール→インターネットオプション→ユーザー補助を開く。
3)「自分のスタイルシートでドキュメントの書式を設定する」にチェック、さっき保存したファイルを指定してIE再起動。
※利用はくれぐれも自己責任でお願いします。
このエントリに関する質問･要望などは受け付けられません。不明な点はググれ。
あと真っ黄色のお前のサイトが眩しいとか文句言うなとおっしゃいますがウチの真っ黄色は2000年の開設以来ずっと故意犯でやってるので問題ありませんヽ(`Д´)ノ←ただの居直りだ
※10/5 13:45 一部記述ミスを訂正、コメントを見やすくしました。
/*—-背景幅指定＋クリーム色、文字色を黒に—-*/
div#bodyArea{
width:760px !important;
background:#ffffee;
color:#000; !important;
}
/*—-日記・コミュコメント白ヌキ—-*/
dl.commentList01{background:#fff;}
/*—-日記ページ左ボックス要素白ヌキ＋背景画像—-*/
div#bodyMainAreaSub div.contents{
background:#fff;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-日記コメント記入フォームまわり白ヌキ—-*/
div.diaryMainArea02{background:#fff;}
/*—-日記コメント確認ページ白ヌキ—-*/
div.diarymessageArea{background:#fff;}
/*—-足あと偶数背景白ヌキ—-*/
div#bodyArea li.even{background:#fff;}
/*—-コミュアンケートページ白ヌキ—-*/
div#bodyMainArea dl dd.enqueteBlock,
div#bodyMainArea dl dd.enqueteInfo
{background:#fff;}
/*—-紹介文白ヌキ—-*/
div#intro div.contents{
background:#fff;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-運営からのお知らせ枠線にオレンジ—-*/
div#bodyMainArea div.information
{background:#ff9900 !important;}
/*—-運営からのお知らせ背景白ヌキ＋背景画像—-*/
div#bodyMainArea div.information ul
{background:#fff !important;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-プロフ画像＆コミュトップ画像枠線に薄いオレンジ—-*/
div#bodySide div#myProfile,
div#bodySide div#communityInfo,
div#bodySide div#communityInfo div.communitPhotoArea
{background:#fece8e !important;}
/*—-プロフ画像背景白ヌキ＋背景画像—-*/
div#bodySide div#myProfile div.contents02
{border:1px solid #ff9900 !important;
background:#fff !important;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-「○○の日記」ほか見出し語文字間詰め—-*/
div#bodyMainArea h2{letter-spacing:0px;}
/*—-ヘッダ・フッタ幅詰め—-*/
#headerArea,
#footerArea
{width:760px !important;}
/*—-紹介文非表示—-*/
/*—-#intro{display:none;}—-*/
/*—-右カラム非表示—-*/
#bodySub{display:none;}
/*—-新着レビュー非表示—-*/
#bodyContents #newReview{display:none;}
/*—-新着ミュージック非表示—-*/
#bodyContents #newPlaylist{display:none;}
/*—-グローバルナビをバナー右にフロート、位置と幅調整—-*/
#globalNavigation{
float:right;
margin-top:70px !important;
height:24px !important;
overflow:hidden !important;
}
/*—-上記フロートのクリア—-*/
#localNavigation{clear:both;}
/*—-グローバルナビ「ミュージック」「レビュー」「友人を招待」「mikly」非表示—-*/
#globalNavigation ul.contentsNavigation li.music,
#globalNavigation ul.contentsNavigation li.review,
#globalNavigation ul.contentsNavigation li.news,
#globalNavigation ul.contentsNavigation li.mikly,
#globalNavigation ul.contentsNavigation li.friendInvite,
#globalNavigation ul.utilityNavigation li.help,
#globalNavigation ul.utilityNavigation li.logout
{display:none;}
/*—-ローカルナビ「ミュージック」「レビュー」非表示—-*/
#localNavigation ul li.music,
#localNavigation ul li.review
{display:none;}
/*—-日記コメント行間・文字間詰め—-*/
#diaryComment{
letter-spacing:1px;
line-height:120%;
}
/*—-絵文字パレット非表示(自分の日記ページのみ)—-*/
div.diaryCommentboxReply form dl dd a {display:none;}
/*—-マイミク新着日記、日記書き込み、コミュ書き込み、フォトアルバム、動画、レビュー、ミュージック、自分の最新情報、コミュ新規トピ、コミュアンケート、コミュレビュー、コミュイベント背景白ヌキ＋背景画像—-*/
div#newFriendDiary div.contents,
div#newComment div.contents,
div#newBBS div.contents,
div#newAlbum div.contents,
div#newVideo div.contents,
div#newReview div.contents,
div#newPlaylist div.contents,
div#newMyDiary div.contents,
div#newCommunityTopic div.contents,
div#newCommunityEnquete div.contents,
div#newCommunityReview div.contents,
div#newCommunityReview div.contents table,
div#newCommunityEvent div.contents
{
background:#fff;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-マイミク一覧＆コミュ一覧背景白ヌキ＋背景画像—-*/
table.iconListTable tr td{
background:#fff;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
border:1px solid #ff9900;
}
/*—-マイミク一覧＆コミュ一覧行間詰め—-*/
table.iconListTable tr td span{line-height:105%;}
/*—-コミュリスト行間詰め—-*/
div.iconList03 ul li{line-height:105%;}
/*—-コミュリスト幅詰め—-*/
div.iconList03 ul li div.iconState01{
padding:0px !important;
margin:0px !important;
}
/*—-広告非表示—-*/
#adBanner,
.adBanner,
.prContents,
.diaryBottomAd,
.sponsorList01,
.messageAreaAd,
.finishAd,
#footprintjack,
#footprintjack02
{display: none !important;}
/*—-トップページ最新情報行間詰め—-*/
.contents dl.contentslist01 dt,
.contents dl.contentslist01 dd,
.contents dl.contentslist02 dt,
.contents dl.contentslist02 dd
{line-height:130%;}
/*—-携帯からチェックボタン非表示—-*/
#bodyContents p.checkMobile{display:none;}
/*—-トップページ最新情報幅調整—-*/
#bodyContents dl.contentsList01 dd{
width:325px !important;
padding-left:16px !important;
}
/*—-新着情報背景にオレンジ—-*/
#bodyContents div.heading02,
#bodyContents div.titlebar02{
background: #ff9900 ! important;
height: 18px ! important;
}
/*—-新着情報見出し白太文字、行間調整—-*/
#bodyContents div.heading02 h3,
#bodyContents div.titlebar02 h3{
font-size:10px !important;
font-weight:bold !important;
color:#fff !important;
line-height: 18px ! important;
}
/*—-新着情報age・sage・最小化アイコンマージン調整—-*/
#bodyContents div.heading02 img{
margin:2px 1px ! important;
}
/*—-新着情報枠線にオレンジ—-*/
#bodyContents div.contents{
border: 1px solid #ff9900;
}
/*—-「○○の最新情報」見出しの幅調整—-*/
div#myUpdate div.heading01{width:420px;}
/*—-最新情報の幅調整—-*/
div#newMyDiary div.contents dl.contentsList02{
padding-bottom:0px ! important;
background:none ! important;
}
/*—-プロフ画像＆コミュトップ背景白ヌキ＋背景画像—-*/
div#bodySide div#myProfile div.contents01,
div#bodySide div#communityInfo div.communitPhotoArea div.contents01
{background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;}
/*—-マイミクでない人のトップ「知人ならマイミク追加しよう」非表示—-*/
div#bodyContents div.heading04 dl{display:none;}
/*—-フッタにクリーム色—-*/
div#footerArea{background:#ffffee !important;}
/*—-フッタに白背景＋背景画像—-*/
div#footerArea ul{
background:#fff !important;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-フッタのリンク幅詰め—-*/
div#footerArea ul li{
margin-right:5px !important;
margin-left:5px !important;
}
/*—-日記作成画面背景白ヌキ＋背景画像—-*/
div#bodyMainAreaMain div.clearfix dl,
div#bodyMainAreaMain div.diaryMainArea04,div.txtEditArea{
background:#fff !important;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-日記作成画面見出し背景に薄いオレンジ—-*/
div#bodyMainAreaMain div.clearfix dl dt{background:#fece8e !important;}
/*—-コミュ参加者リスト背景白ヌキ＋背景画像—-*/
div#bodyMainArea div.groupList01,
div#bodyMainArea div.iconList03 ul li div.iconState01{
background:#fff !important;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-コミュ参加者管理ページ背景白ヌキ＋背景画像—-*/
div#bodyMainArea div.manageList02{
background:#fff !important;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
/*—-コミュ参加者管理ページ・リスト背景白ヌキ＋背景画像—-*/
div#bodyMainArea div#editMember table{
background:#fff !important;
background-image:url(‘http://img.mixi.jp/img/bg_line.gif’) !important;
}
前バージョンからの主な変更点は多岐にわたりますが大きなところだとこんな感じ。
・マイミクでない人のトップページにお節介にも表示される「○○さんと知人ならマイミク申請しましょう」を非表示に
・背景色として指定したクリーム色が透けてしまっていたブロック要素や広すぎて眩しいブロック要素に
背景画像を片っ端から適用
・プロフ画像・コミュトップ画像などグレーのグラデが浮いてる部分をオレンジ系でまとめる
・眩しくする以上に意味があるのかわからない本文文字色のグレー(#333333)を真っ黒に
・グローバルナビの右フロート化、フッタのリンクから飛べる「ヘルプ」と基本的に使わない「ログアウト」も非表示に
…下の2つはmixi内の「mixi新デザインに反対！」コミュで見かけたなっし～氏のアイデアから取り入れました。広告を非表示にしたせいで無駄な空白ができていたバナーの横がこれで少しはみっしりするぜヽ(`Д´)ノ
ところでこのCSSをそのまま適用しているとコミュのページで「コミュニティを退会」ボタンが表示されなくなる不都合がありますが、これはローカルナビのulタグ内・コミュ退会ボタンに相当するliタグに与えられているclassが本来なら”leaveCommunity”とでもすべきところが何故か”music”になっていることが理由です。
その他のボタンにはユニークのclassが与えられていることからトップページ用のローカルナビのソースをそのまま貼り付けた際にココだけclass名を書き換え忘れたと推察されます。
実はコミュトップには他にもclass名の記述ミスがありまして、コミュトップ画像に与えられたclassでは”communitPhotoArea”と“y”が抜けてます。真面目にやれヽ(`Д´)ノ
そういうわけでローカルナビで「ミュージック」を非表示にしていなければ回避できますが、現状のソースではそれ以外の対処法はありません。
おんなじような理由からトップページ新着ニュースも完全に消すことができません(何故かclass名が空白になってるため)。真面目にやれヽ(`Д´)ノ
…そんなこんなでここ3日ほどmixiのソースとにらめっこしてきてふと一つの疑問が。
近年のCSS制御によるリキッドデザインの爆発的普及はblogの台頭に伴う「マークアップ言語」としてのhtml・xhtmlの見直しによるところが大きいと思われます。またCSSを導入することで複数のスキンからユーザーが任意にデザインを選択できるといったメリットもあり、前のエントリで書いた負荷軽減の目的も含めポータルサイトを目指しているであろうmixiとしては一刻も早く手を打つべき案件であったことは否めません。
ところでmixiの各ページにはmetaタグで
株式会社ミクシィが運営するSNS。mixi(ミクシィ)は、これまでの友人関係を更に素敵なものへと導き、新しい交流も生み出す日本初のコミュニティエンターテイメント・ソーシャルネットワーキングサイトです。
という記述があります。metaタグにこうしたサイトの概要をdescription要素として書き込んでおく意味は、当然のことながら先に書いた「マークアップ言語として整理されたhtml」と相まって得られる検索エンジンなどハイパーリンクを視野においた最適化効果なわけですが…
基本クローズドのmixiの、しかもログインした会員にしか見られないページでわざわざ「○○○さんの日記」をh2タグにしてみたりとかそこまでバカ正直にSEO対策してなんになるの…？
ニュースサイトみたいに様々な記事と見出しが等価値に並んでいるページであればh1～h6タグやul・dlタグ、blockquoteタグなどの正しい運用は最低限配慮すべき事柄ですが、ことデザイン重視のmixiのような特殊な運用がなされるサイトでそこまでする必要があるのか甚だ疑問です。
これでhtmlが綺麗ならまだいいですが、実際問題mixiはデザイン重視ですからそこら中で綻びが生じているようで結果的にid/classをやたらめったらに与えられたdivタグの雨あられ状態。いわゆる典型的な「div厨の書いたソース」です。まあ空条さんもCSS覚えたての頃は似たようなことをやらかしてたんでこの辺あんまり強くは言えないんですが、でも上場企業が満を持して出してきたリニューアルデザインがこれではブーイングの嵐もむべなるかな。
何の意味もなく本文の文字がグレーになっているのもどっかのhtml講座的なテキストに「白地に黒文字はコントラスト差が激しく疲れ目の原因になります」とか書いてあったのをそのまま鵜呑みにしてやってるっぽいし、こりゃいよいよマジで学生のデザインかも知れないですよ。
Mac+IEはもちろんのことVista+IE7ですら閲覧できないようでは何の意味もないのは自明の理。とっととテーブルレイアウトで組み直すなり前のデザインに戻すなりするのが得策だと心の底から思います。
