さらに、mixiのグローバルナビゲーションをCSS化
昨日のエントリでブーたれてみたわけですが、FirefoxやOperaを使ってる人にとっては、ユーザCSSという選択肢もあったわけですね。すっかりわすれてました。
Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。
2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。
http://www.akiyan.com/blog/archives/2007/10/mixi2765px.html
ということでakiyanさんが、センタリング＆2カラム化のCSSを提供してくださったのがヒントでした。
で、グローバルナビとローカルナビが、jsでイメージスワップしててウザいという話をしたのですが、CSS化してみました。
どうせ画像一枚一枚ゲットしにいくには変わりないので、実はあんま意味ない気もするけど、だってjsがいちいち動くの気持ち悪いから。
#globalNavigation ul li img{ display:none; } #globalNavigation ul li a{ display:block; /*border:solid 1px #000;*/ height: 28px; } #globalNavigation ul li.home a{width: 78px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_home.gif);} #globalNavigation ul li.diary a{width: 76px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_diary.gif);} #globalNavigation ul li.community a{width: 84px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_community.gif);} #globalNavigation ul li.movie a{width: 76px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_video.gif);} #globalNavigation ul li.photo a{width: 76px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_photo.gif);} #globalNavigation ul li.music a{width: 84px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_music.gif);} #globalNavigation ul li.review a{width: 76px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_review.gif);} #globalNavigation ul li.news a{width: 76px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_news.gif);} #globalNavigation ul li.mikly a{width: 73px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_mikly.gif);} #globalNavigation ul li.friendSearch a{width: 68px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_searchfriend.gif);} #globalNavigation ul li.friendInvite a{width: 69px; background:url(http://img.mixi.jp/img/basic/common/contentsnavi_invite.gif);} #globalNavigation ul li.help a{width: 59px; background:url(http://img.mixi.jp/img/basic/common/utilitynavi_help.gif);} #globalNavigation ul li.logout a{width: 55px; background:url(http://img.mixi.jp/img/basic/common/utilitynavi_logout.gif);} #globalNavigation ul li.home a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_home_on.gif);} #globalNavigation ul li.diary a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_diary_on.gif);} #globalNavigation ul li.community a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_community_on.gif);} #globalNavigation ul li.movie a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_video_on.gif);} #globalNavigation ul li.photo a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_photo_on.gif);} #globalNavigation ul li.music a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_music_on.gif);} #globalNavigation ul li.review a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_review_on.gif);} #globalNavigation ul li.news a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_news_on.gif);} #globalNavigation ul li.mikly a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_mikly_on.gif);} #globalNavigation ul li.friendSearch a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_searchfriend_on.gif);} #globalNavigation ul li.friendInvite a:hover{ background:url(http://img.mixi.jp/img/basic/common/contentsnavi_invite_on.gif);} #globalNavigation ul li.help a:hover{ background:url(http://img.mixi.jp/img/basic/common/utilitynavi_help_on.gif);} #globalNavigation ul li.logout a:hover{ background:url(http://img.mixi.jp/img/basic/common/utilitynavi_logout_on.gif);}
ま、そんなとこで超やっつけ(笑)
一応Firebugにて、onMouseoverとonMouseoutを削除しても動作することを確認したので、これでOKでしょう。
