新井由己の仕事帖

2007年10月03日 (水)

mixiの新レイアウトを考える 

10月1日から、mixiのレイアウトが大幅に変わりました。13インチのモニターなので、2列表示で使っていましたが、今回からその選択肢がなくなってしまいました。

不評の新レイアウトですが、XHTML+CSSデザインに刷新されたため、ユーザー側でも少しはカスタマイズできることがわかりました。このサイトで紹介されているCSSを元に、いろいろ試行錯誤して、現時点でのベストを決めました(10/22更新)。

その後、mixiソースのクラス指定がまもとになったので、ローカルナビゲーションの文字切れに対応しました(11/24更新)。

プロフィールやコミュの画像の枠をオレンジにし、プロフィールとコミュの説明部分の枠線もオレンジに変更しました(12/10更新)。

ちまちまと細かい修正バージョンをアップしてきましたが、ナビゲーションの仕様が変わったので、少しソースを見直してみました。東京PQ対応になってます。(08/05/10)

■以下の対策をしてあります。
文字を濃いグレーから黒に
 →ドメイン指定ができないブラウザでは全サイトで適用されます
すべての広告を非表示
2カラム表示に
トップメニューを上端に分離(不要なものを削除)
 →必要なときはフッタ部の文字リンクからどうぞ
検索フォームの非表示
日記とトピックの写真を左寄せ
マイミクシィの更新情報のうちあまり利用しないものを非表示
 →必要な場合はソースを参考に戻してください
マイミクでない人のトップ「知人ならマイミク追加しよう」非表示
日記のひとつ目のコメントのズレを修正
コミュニティのトピックのひとつ目のコメントのズレを修正
コミュニティのトピックのタイトルのズレを修正
最新書き込み一覧の縞模様を濃く
新着情報背景をオレンジに
新着情報枠線をオレンジに
日記タイトルの色をオレンジに
日記タイトルは太字
日記のコメントタイトルの色をクリームに
日記コメントの書き込み日時を黒に
コミュのトピックタイトルの色をオレンジに
コミュのトピックタイトルは太字
コミュのトピックのコメントタイトルの色をクリームに
コミュのトピックコメントの書き込み日時を黒に
Firefoxでフォントが14px以上だとコミュ一覧のグループ欄が乱れる対策
コミュのトピックタイトルの日時を1行に+コメント日時の左寄せ
自分のプロフィールの注意書きを非表示
プロフ画像&コミュ画像の枠線を薄いオレンジに
プロフィールの枠を薄いオレンジに
コミュニティ説明文の枠線を濃いオレンジに

最新のCSSファイル[mixi-2column.css]は以下からどうぞ。
ブラウザで文字化けしていたら、文字コードをS-JISにしてください。
Download file

3列表示でいいという人のために、
ノーマルメニューを上下に分離したバージョンを作ってみました。
そのほかの部分は2列と同じ変更です。

最新のCSSファイル[mixi-3column.css]は以下からどうぞ。
ブラウザで文字化けしていたら、文字コードをS-JISにしてください。
Download file


ブラウザごとのCSS設定方法、OS9対策も追記しておきます。

■Firefox for Macの対処方法
※MacOS X 10.3.9+Firefox(v2.0.0.7)で確認しました。

  

プロファイルフォルダにあるchromeフォルダに入れる方法もあるようですが、以下の機能拡張を用いるとユーザスタイルを簡単に管理できるようになります。

Stylish 拡張機能
https://addons.mozilla.org/ja/firefox/addon/2108

1)Firefoxで上のサイトにアクセスしてインストール後、再起動

2)ツールメニューからアドオンを選ぶ(画像左)

3)機能拡張にあるStylishを選択

4)設定ボタンを押して「書く」をクリック(画像中)

5)「スタイルを追加」の「概要」にファイル名(または名前)を入力(画像右)
  下の欄にCSSソースをコピー(または記入)する。
  「行を折り返す」のチェックはどちらでもOK。
  保存すると、スタイルが適応されます。

本来ならmixi.にアクセスした状態で、
ツール→Stylish→スタイルを書く→mixi.jp用を選べば、
mixi専用のスタイルシートが書けそうなんですが、
なぜか僕のところではStylishのプルダウンメニューは動作しません。
Windowsユーザーはメニューからのプルダウンが使えるかも?

CSSソースの冒頭に以下の記述を追加すると、
mixi専用になるようです。
−−−−−−−−−−
@-moz-document domain("mixi.jp") {

【ここにCSSソース】

}  /* ←最後にこれがあったほうがいいようです */
−−−−−−−−−−


■Safari for Macの対処方法
※MacOS X 10.3.9+Safari(v1.3.2)で確認しました。

  

【A】プラグインを使わない場合 (画像左)
 環境設定の「詳細」の下にある「スタイルシート」で
 好みのスタイルシートを指定します。
 プルダウンから「その他」を選ぶと、
 ファイルを指定するダイアログが出ます。

【B】プラグインを使う場合
 以下のSafariStandを使うと、ドメインごとのCSSを適用できます。
 http://hetima.com/safari/stand2.html
 使っているSafariのバージョンに合ったものをダウンロードしてください。

僕はMacOS X 10.3.9+Safari(v1.3.2)なので、
その設定手順を書いておきます。

1)SafariStand1.3b2.dmgをダウンロード

2)ダブルクリックでマウントする
  ちなみにSafariStand-beta-readme-Jがマニュアルです

3)Safariを終了する

4)マウント内の「SafriStand」フォルダをコピーする
  /Users/あなたのアカウント/Library/InputManagers/に
  「SafriStand」フォルダを入れます。
  「InputManagers」フォルダが存在しない場合は新規作成してください。

5)Safariを起動すると、メニューに「Stand」が追加されます

6)mixiにアクセスします

7)StandメニューのSafariStand Settingを選択 (画像中)

8)Site Alterationタブを選択し、左下のAddをクリック

9)左上のEnable Site Alterationにチェックが入り、
  左窓にmixi.jpが表示され、右のUse This Ruleがチェックされ、
  Match Patternにmixi.jpが入っていればOKです

10)いちばん下のUser StyleSheet Locationをチェックし、
  ▼マークからOpen User CSS Dirを選択します (画像右)

11)UserStyleSheetsフォルダが開くので、好みのCSSファイルを入れる
  フォルダは閉じてかまいません

12)再び▼マークから、先ほど入れたCSSファイルを選ぶ

13)設定画面を閉じて再読み込みするとCSSが適応されます

以上です。


■MacOS9の対処方法
※MacOS X 10.3.9+classic環境で確認しました。

リニューアルでいきなり推奨環境から外されて、
OS9ユーザーは、アクセスすら難しくなってしまいました。
あまりに苦情が多かったのか、
少しずつ改善されているようですが、
代替ブラウザを紹介しておきます。

▼和ジラ
http://wazilla.sourceforge.jp/

Ver 1.3の右側に「MacOS Classic」の文字があるので、
それをクリックするとダウンロードが始まります。

▼WaMCom(Mozilla)
英語バージョンを日本語化する方法もあります。
以下のサイトから該当するものをダウンロードしてください。
http://wamcom.org/latest-131/

解説はこちらにあります。
http://love.ap.teacup.com/kenny/1039.html
英語版をダウンロード→解凍→起動して、
日本語化サイトにアクセスして追加作業のあとに再起動し、
Preferenceの2か所を日本語設定にすればOKです。

和ジラと比べると日本語化が微妙に違いますが、
どちらも同じブラウザだと思っていいでしょう。



以下、試行錯誤の記録です。

改造後のトップページはこんな感じです。
広告も絵文字も消えてすっきりしました(爆。
このほか、足あとページの広告も非表示にしてあります。
mixiの広告を見ないことで、今回の改悪に意思表示したいと思います。

灰色というか銀色の薄い部分を変更したかったのですが、
ソースを見てもなかなか解読できませんでした。


自分のページのヘッダ

ホームがなくなってあれ?と思ったけど、
左上のmixiのロゴでHomeに戻れます。
オリジナルはミュージックが入ってましたが、
僕はまったく使っていなかったので、
ヘッダの上下ともに削除して
変わりにニュースを入れました。
2カラムの下にmxiニュースを表示させたかったんですが、
今はバーが出ているのに、広げても狭めても変わりませんね。


友人のページのヘッダ

オリジナルでは右側のボタン文字が切れていたので、
それを微妙に修正しました。
この作業にけっこう時間を費やしました(笑。
それにしても、「メッセージを送る」は左から2番目のままにしてほしかった。
自分のメッセージと他人のメッセージの位置が違うのでとまどいます。


コミュニティーのヘッダ

ここはプルダウンも削除できるんですが、
mixiのソースが間違っているためうまく直せませんでした。
「マイミクシィに教える」を削除して
「お気に入りに追加」を復活したいんですが……。


■10/4追記

コミュのサブメニューを作り替えました。
右側の文字が切れてしまいますが、「このコミュを退会」「お気に入りに追加」「マイミクシィに教える」の順です。


ついでにトップページの検索欄を削除しました。それぞれのカテゴリーに行けば、今までどおり検索できます。


■10/5 追記

上の広告スペースにお知らせを入れてみたんですが、
幅が調整できないので、右にはみ出てます(笑。
おまけにメッセージやコメントが付くと下にかぶさります。
まあ、赤い文字関係はすぐに見てしまうので、
ひとまずこれで使うことにしました。

あと、
コミュのトピックタイトルの日時を1行にして、
コメント日時の左寄せを行ないました。


■10/6 追記

やっぱりお知らせがはみ出ているのが気になるので、
それを元の位置に戻し、
代わりにメインのナビゲーションを上端に分離して、
間違えにくくしました。
新着日記関係を削除したいんですが、
自分や友人のメニューもいっしょに消えてしまうのであきらめましたが、
コミュニティや友人を招待などはフッターにあるので、
それを削除して短くしました。

ついでに広告の非表示を全面的に見直しました。
コメント後に表示される部分も外しました。

あと、全サイトに適応されてしまいますが、
文字色を濃いグレーから黒にしました。
これで少し見やすくなると思います。

↑Top: 投稿者 あらい/遊民 | 日々のつぶやき
コメント

こんにちは。
mixiの某コミュから飛んできました。
ありがとうございます。
とても興味深いトピックです。
マシンは仕事柄、多種使い分けをしていますが
DTP仕事の“合間”に(笑)mixiで息抜きをしていたので
今回の改変には、ため息をつかされた
1日ほぼ15時間はクラシックMaccerより。

↑Top: Posted by: P-Nuts : 2007年10月03日 09:16

初めまして。
マッカーと申します。

とてもためになる情報をありがうございます。
Macintosh OS9 ブラウザIE5の環境でmixiがまったく見れなくなりました。早速試してみる事にします (*^▽^*☆

↑Top: Posted by: マッカー : 2007年10月03日 15:00

ドド子の弟です。お久しぶりです。

和ジラ/Ver 1.3 MacOS Classic 見つからなかったです。他の場所にあるのでしょうか。
 英語版のMacOS Classic対応からから日本語化の途中です。
OS9で英語版でもレイアウト綺麗ですね。ありがとうございました。

動画のプラクインを見つけたいです。

↑Top: Posted by: ひかり : 2007年10月05日 09:04

mixiが最低限の対応をしたらしく、なんとか見られるようになったとか?

▼ひかりさん
上のリンク先のダウンロードのところの
1.3・バイナリの右側の英文字部分にあります。

↑Top: Posted by: あらい : 2007年10月05日 14:58

はじめまして

カレンダーが縮んで上の3行しか表示されなくなったのはブラウザの問題でしょうか?

↑Top: Posted by: テラ : 2007年10月06日 12:34

▼テラさん
はじめまして。
カレンダーというのは、スケジュールを記入できたり、イベントが表示されているやつですよね? 僕のところでは、標準状態でもオナジナルCSSでも、すべての予定が出ています。いちばん多い日で10個くらいかな?

OSやブラウザは何を使ってるんでしょうか? また、CSSを変更していな状態でも同じでしょうか? だとすると、mixiにバグ報告する問題だと思います。

↑Top: Posted by: あらい : 2007年10月06日 14:50

ああ、見やすくなった。
これでだいぶ気が楽になりましたよ。
でも、サイトが重くなったという点は
ユーザ側の努力ではどうしようもありませんからね。

出先ではW-zero3で閲覧・更新していたんですが
ナローバンドでは遅すぎて全く使い物にならなくなりました。

↑Top: Posted by: den1 : 2007年10月06日 20:36

はじめまして。
当方、MacOS 10.3.9+Firefox 2.0.0.7の利用者です。

10/6に更新されたcssファイル(mixi-2column.css)を、使わせていただいております。
3列表示の横長地獄と広告から解放されて、ホッと一息つけました。ありがとうございました。

>mixi専用のスタイルシート
確かにStylishのプルダウンメニューは動作しませんね。
何ででしょう。
私はどうしてもmixi専用にしたく、cssファイルに見よう見まねで記述を加えたところ、Firefoxがあっさり「mixi専用」と認識してくれました。
おかげ?で文字色を濃いグレーから黒にしていただいた指定が、mixiのみで可能となりました。

問題は、何をどうやったのか当の私が認識できていないところです……(ちなみに私は、cssを今回はじめてさわった、というレベルです)。
勝手に改変して申し訳ございません。

重ね々々、ありがとうございました。
取り急ぎ、御礼まで。

↑Top: Posted by: ginji : 2007年10月09日 08:59

みなさま、コメントありがとうございます。

FireFoxを使っている人は、
CSSソースの冒頭に以下の記述を追加すると、
mixi専用になるようです。


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

/* 文字を濃いグレーから黒に。背景をクリーム色に */
body{
color:#000000 !important;
background:#FFFFE0 !important;
}

【ここにCSSソース】

}  /* ←最後にこれがあったほうがいいようです */

↑Top: Posted by: あらい : 2007年10月09日 19:15

はじめまして。『自然農に生きる人たち』の本の出版記念パーティの紹介記事からたどってきました。
編集の仕事をしてます。ミクシイのレイアウト早速試させていただきました。いいですね。
ありがとうございました。今後ともどうぞよろしくお願い申し上げます。

↑Top: Posted by: 侘びすけ : 2008年05月02日 14:18

▼侘びすけさん
コメント、ありがとうございます。
その後、ちまちまと変更しているんですが、
サイトにアップするのを忘れていました。
他人のナビゲーションメニューがズレると思うので、
気になるようでしたら最新版をお使いください。
先ほど、新しいのに入れ替えておきました。

↑Top: Posted by: あらい : 2008年05月02日 14:58
コメントする









名前、アドレスを登録しますか?






     Copyright 2006-2012 ARAI, Yoshimi All rights reserved.