ホーム » ブログ » 2007年10月 » リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた

リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた

2007-10-01 written by akiyan | このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。

適用前、適用後

適用前 適用後

解説

Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。

2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。ユーザースタイルシートの内容は以下の通り

  • 調整
    • 全体の横幅 750px化
    • 全体を中央揃え
    • フッターリンク左右の余白調整
  • 非表示
    • 右カラム全部
    • ロゴ
    • バナー広告
    • ヘッダの背景
    • 動画・フォト・miklyボタン
    • プルダウンメニューボタン
    • 検索フォーム
    • 最新情報ヘッダ

ユーザースタイルシート

@namespace url(http://www.w3.org/1999/xhtml);

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

/* 全体を中央揃え */
body { margin:0 auto !important }
body { width:750px !important }

/* ロゴ非表示 */
h1 { display:none }

/* 広告バナー非表示 */
p.adBanner { display:none !important }

/* 右カラム非表示 */
#bodySub { display:none }

/* ヘッダの背景を透過色に */
#headerArea { background:transparent !important }

/* ヘッダエリアの幅調整 */
#headerArea { width:750px !important }

/* ヘッダの高さを自動に */
#headerArea { height:auto !important }

/* 本文エリアの幅調整 */
#bodyArea { width:750px !important }

/* グローバルナビゲーションの幅調整 */
#globalNavigation { width:750px !important }

/* グローバルナビゲーションのmikly・動画・フォトボタン非表示 */
#globalNavigation ul.contentsNavigation li.mikly { display:none !important }
#globalNavigation ul.contentsNavigation li.movie { display:none !important }
#globalNavigation ul.contentsNavigation li.photo { display:none !important }

/* ヘルプ・ログアウトボタン非表示(disabled) */
/* #globalNavigation ul.utilityNavigation li.help { display:none } */

/* ローカルナビゲーションの幅調整 */
#localNavigation { width:750px !important }

/* ローカルナビゲーションのレビュー・ミュージックボタン非表示 */
#localNavigation li.review { display:none }
#localNavigation li.music  { display:none }

/* ローカルナビゲーションのプルダウンボタン非表示 */
#diaryPullDownButton { display:none !important }
#videoPullDownButton { display:none !important }
#photoPullDownButton { display:none !important }

/* フッター幅調整 */
#footerArea { width:750px !important }

/* フッターナビゲーションマージン調整 */
#footerArea ul.footerNavigation01 li { margin:0 2px !important }

/* 検索フォーム非表示 */
div.searchForm01{ display:none }

/* 「最新情報」ヘッダの非表示 */
#mymixiUpdate div.heading01 { display:none }

}

/* コミュニティページ専用スタイル */
@-moz-document url-prefix("http://mixi.jp/view_community.pl") {

/* 入退会ボタンを表示 */
#localNavigation li.music  { display:inline !important }
}

コピペしてお使いいただくか、Stylishがインストール済みの場合はuserstyles.orgからワンクリックでインストールできます。調整はお好みでどうぞ。

更新履歴

  • 2007-10-01 フッター全部消してしまうと規約リンクまで消えてしまうことに配慮していなかったので、幅調整に変更しました。
  • 2007-10-01 ヘッダ領域に余白ができることがあったのでヘッダの高さを自動にしてみました。
  • 2007-10-01 横スクロールバーが出ないようにいろいろ幅調整しました。
  • 2007-10-01 フッターナビゲーションが1行におさまるように余白を調整しました。
  • 2007-10-02 日記・動画・フォトのプルダウンメニューを開くボタンを消しました。
  • 2007-10-02 ヘルプとログアウトボタンを元に戻しました(さすがにログアウトは使いますよね)。
  • 2007-10-02 最上位の動画・フォトボタンを消しました。
  • 2007-10-02 ナビゲーションが縮んだのでさらに15px削って幅を750pxにしました。
  • 2007-10-02 userstyles.orgに投稿しました。
  • 2007-10-02 どこかで拝見した中央揃えのアイデアがすごくよかったので取り入れさせていただきました。
  • 2007-10-06 コミュニティページの入退会ボタンを表示するようにしました。

非表示の基準

「幅が広がったためになんとなく置かれたんじゃないか」系のリンクから非表示にしました。最上位ナビゲーションにあったリンクはフッターには残ってますのでそちらからどうぞ。

2007-10-01 written by akiyan | 記事 | このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

コメント

お! - 2007-10-01 17:05:18

ありがたい。
使わせていただきます!

- 2007-10-01 19:07:14

お借りします

おお - 2007-10-02 02:02:59

ログインするたびになえてたのでありがたく使わせていただきます。

Duke15 - 2007-10-02 10:10:43

さっそく使用しました。
スッキリしました。ありがたいです。

taizooo - 2007-10-02 11:11:36

>Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。

ぜひぜひ userstyles.org への登録を!

あきやん - 2007-10-02 12:12:52

>taizoooさん
userstyles.orgに登録しました!
http://userstyles.org/styles/3658

チムリク - 2007-10-02 13:01:46

素晴らしい。
使わせていただきます。

けこ - 2007-10-02 14:02:07

トップページは見事に2カラムになりました!
しかし日記のコメントの1番目のみ、
なぜか横にずれてしまいます。

NORI - 2007-10-02 15:03:53

ありがたや、ありがたや。
改造して広告非表示に使用させていただきました。

みたよ - 2007-10-02 15:03:00

どうでも良かったんですが、CSSを入れて、さらに弄ってしまいました。

日記を書くためにスクロールするのはおかしいので余分なものを非表示にしてスクロールせずに日記を書けるようにしてみました。
Stylishは簡単にデフォルト表示に戻せるのでこんな荒っぽいことでもまあ良いかなと。

/* コミュニティ最新書き込みの非表示 */
#bodyContents #newBbs { display:none }

/* マイミクシィ最新アルバムの非表示 */
#bodyContents #newAlbum { display:none }

/* マイミクシィ最新動画の非表示 */
#bodyContents #newVideo { display:none }

/* マイミクシィ最新ミュージックの非表示 */
#bodyContents #newPlaylist { display:none }

> けこ (さん)
こことは無関係かと

はまちゃん - 2007-10-02 18:06:43

NORIちゃんのところから来ました。
すご~い。使わせていただきます。
ありがとうございました。

(,,゚Д゚)∩先生質問です - 2007-10-02 19:07:45

スレイプニルじゃ無理?

横からですいません。 - 2007-10-02 21:09:00

SleipnirでもUser Style Sheetを導入してれば利用可能だと思います。
というか利用してます。

BUZZ - 2007-10-02 22:10:50

拍手!

ジロ - 2007-10-02 22:10:28

素晴らしいです。
私にはこの技術はないのでありがたくいただきます!
m(_ _)m

あ! - 2007-10-02 22:10:40

ありがとう、ありがとう....

sak - 2007-10-02 23:11:14

早速お借りしました。
ありがとうございます!

sy567 - 2007-10-02 23:11:09

Sleipnirじゃmixi側のスタイルシートが有効にならないので表示が崩れてしまいますね。

RYO - 2007-10-03 00:12:21

見やすくなりました!ありがとうございます^^

えぬおー - 2007-10-03 00:12:16

試してみました。とても良い感じですね!

だいはど - 2007-10-03 00:12:47

素晴らしい拡張をありがとうございます。とても重宝しております。(*- -)(*_ _)ペコリ

むうぽん - 2007-10-03 01:01:57

素敵なものを教えてくださり、ありがとうございます。
さっそく使って、すっきりしました。

ところで、普段閉じていた最新情報(マイミクシィ最新アルバムなど)のヘッドは
#newAlbum div.heading02 { display:none }
…とすることで消せたのですが、
mixiニュースのヘッドはどのようにすれば消せるでしょうか…?
ソースを見ても、ニュースのところのidだけ、
<div id="">
…となっていて、idで指定することができません。

スタイルシートは最近かじったばかりなので自分が単に分かっていないだけなのかもしれませんが、解決法があれば教えていただけないでしょうか。

- 2007-10-03 11:11:53

スッキリしました!!!
ありがとうございます

チダ - 2007-10-03 14:02:55

さっそく利用させてもらっています。
ただ、コミュニティのトップでフォトエリアと趣旨のエリアが並列表示されずに縦に並んでしまうようです。

チダ - 2007-10-03 19:07:40

すいません。今、コミュを確認したら正常に表示されていました。Mixi側の問題だったのか原因は不明ですが、そのままで解決しました。

ハナ - 2007-10-03 22:10:09

とても見やすくなって感激しました!
有り難うございます!

jaque - 2007-10-03 22:10:27

いただきました
SleipnirのuserStyleSheetでほぼそのまま使ってます。
ありがとうございました!

kiku - 2007-10-03 23:11:24

リニュ後の表示がイマイチと思っていたので
大変助かりました。ありがとうございます!

むうぽん - 2007-10-04 00:12:51

2007-10-03 01:01:57に投稿した「mixiニュース」の件、Cookieを消去したらそれだけで消えました。
失礼いたしました。

yuukisakura - 2007-10-04 01:01:18

早速適用させてみました。ありがとでした。
Internet Explorer で使用する場合は、

----

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

/* 全体を中央揃え */
body { margin:0 auto !important }
body { width:750px !important }

/* ロゴ非表示 */
h1 { display:none }

----

の部分と最下部の } を削除すればおけーでした。
これだけじゃなんなので広告非表示の補完しときます。

----

/*運営者からのお知らせ非表示*/
/*div#contentsTop{display:none;}*/

/*ログインページの広告非表示*/
body.login div#login_main{visibility:hidden;}

/*日記・コミュニティページの下部広告非表示*/
div.diaryBottomAd,div.sponsorList01{display:none;}

/*足あとページの広告非表示*/
div#footprintjack,div#footprintjack02{display:none;}

にゃんだ - 2007-10-04 02:02:57

ありがとうございます。とっても見やすくなりました!
stylish もこちらで初めて知りました。
すごい収穫。活用させていただきます~

J2 - 2007-10-04 06:06:13

ありがとうございます。
とても観やすくなりました。
僕は、白場が多くて目にしんどかったので
バック背景とかの色を少し追加して弄りました。

使用ブラウザはSafariです。

うんぼぼ - 2007-10-04 07:07:55

コミュニティの入退会が表示されないみたいです。

ひとぴん - 2007-10-04 10:10:29

昨日知ってさっそく自宅のFirefoxで使ってます。すっきりしてとてもいいです!感謝。
広告非表示に関しては、今後対策立てられるかも知れませんね(多分イタチごっこになると思ふ)。

TAKE - 2007-10-04 10:10:48

TOPのバックはグレーに出来るけど
コミュニティ最新書き込みの縞々が気になる!
コミュのトピックのバックもグレーに出来たらな~

あやつき - 2007-10-04 13:01:57

私は、2カラム主義でもないし、てめーのBlogを3カラムにしてるから、言えますが、たぶん皆さんも、3カラムが悪と言っているのではないんですよね。
“勝手に”“前は2カラムも選択制だったのに”“ユーザに試させもしないで”“さも開発の最先端を行ってます的な傲慢丸見え”な、mixiに、腹が立つんですよ。
そして、特に、有料会員な人にまで、広告を押し付けるところが。

様々なCSSを使わせていただき、組み合わせて、見やすくしようと思います。

意図せず、CSSを勉強するハメになったのは、まぁ、良いのですが…。

うんぼぼ - 2007-10-04 17:05:55

ニュースのトップを押すと3段になってて、右にずれてます

fumifumi - 2007-10-04 18:06:14

正に救世主登場です。
有り難く使用させていただきます。

くねくね - 2007-10-07 08:08:02

ありがたく使わせてもらってます

news.mixi.jpとmusic.mixi.jpも
2カラム表示に対応してもらえると嬉しいのですが

ともやん - 2007-10-07 15:03:11

ありがたく使わせてもらっています!

mixi オフィシャルにしてもいいくらいだと思う(笑)

pear - 2007-10-07 22:10:46

ありがとうございます! 使わせていただきます!!

まっつ - 2007-10-08 04:04:26

ありがたく使わせてもらっています。
コミュのお気に入りに登録を表示できる部分もあると嬉しいです。

nori - 2007-10-08 15:03:53

ユーザースタイルシートを使わせて頂こうと思い、CSS の部分をコピーさせて頂き、テキストファイルにペーストして、mixi.css を作成しました。

環境は、Mac OS X 10.4.10で、ブラウザは safari2.0.4 です。
環境設定から、上記保存した mixi.css を読み込んでも反映しません。ちなみに、他の css ファイルで確認した所、ユーザースタイルシートは反映しました。

safari で利用出来た方もいるとの事ですが、判るかたアドバイスを頂けないでしょうか。

みお - 2007-10-11 13:01:21

はじめまして、参考にさせてもらい
自分なりに少し弄ってみました。
私は3カラムは嫌いじゃないけどあれは見づらくて困りますね。

  - 2007-12-20 20:08:54

ずっとこのCSSを使わせてもらっていたんですが、
最近は上に広告が表示されるようになりましたね。

  - 2007-12-20 20:08:05

/* 広告バナー非表示 */
p.adBanner { display:none !important }

の「p」を削除して

/* 広告バナー非表示 */
.adBanner { display:none !important }

に変更したら消えました。
広告がウザく感じる方はお試しあれ。

  - 2007-12-20 21:09:42

ついでにこちらもどうぞ。

/*日記の下部広告非表示*/
.bottomSpaceAd { display:none !important }

/*コミュニティの下部広告非表示*/
.sponsorList01 { display:none !important }

Take-P - 2007-12-30 15:03:59

広告バナー非表示の対応コードありがとうございます。
ついでといっては何ですが
/*日記の書き込み完了画面の広告非表示*/
.messageAreaAd { display:none !important }

投稿



本文と関連性の無いコメントは削除することがあります。予めご了承ください。

トラックバック

このエントリへのトラックバックURLは
http://www.akiyan.com/cgi/mt/mt-tb.cgi/1424
です。トラックバック元のエントリに当サイトへのリンクが無い場合はトラックバックを削除することがあります。

  1. リニューアル後のmixiを2カラム/765px幅化するユーザースタイルシートを書いてみた from ソーシャルニュース:PixNews
    2007-10-01 17:05:53
  2. mixiリニューアルに伴う改悪 from BlurBlue-Note
    2007-10-02 06:06:47
  3. [音楽][ネット]HTMLソースやCSSソースに著作権は発生するか? from mrcms songs 2007
    2007-10-02 07:07:39
  4. [Web] mixiは携帯で見ればいいと思うよ from ざ・わーるど@はてな
    2007-10-02 09:09:56
  5. [mixi] ブログ連携のテスト from あるネットワーク管理者(よっぱらい)の日常
    2007-10-02 12:12:58
  6. mixiの広告を非表示にした from Hello World
    2007-10-02 15:03:54
  7. リニューアルしたmixiのデザインをユーザーCSSで変更する from ハコブログ
    2007-10-02 15:03:26
  8. ユーザースタイルシート for mixi from SimpleBoxes
    2007-10-02 16:04:05
  9. 「ユーザスタイルシートで、mixiリニューアル画面の改造」(FireFox版) from 「いろいろ感想文」
    2007-10-02 18:06:32
  10. みたよ (β) | mixiの新デザイン対応のカスタムCSS from みたよ (β)
    2007-10-02 19:07:29
  11. mixiリニューアルを自分用にリニューアル from s-style-arts blog
    2007-10-03 02:02:45
  12. mixi新デザイン自己流Hack from Tシャツ作家hiderinoが呟く
    2007-10-03 08:08:12
  13. mixiのリニューアルをリニューアル(Sleipnir2編) from 第一種臨界不測日記
    2007-10-04 15:03:01