ケーズメモ このページをアンテナに追加 RSSフィード

2007-10-01

リニューアル後のmixiの表示をユーザースタイルシートで変えてみる IE/Sleipnir編

今日mixiのデザインがリニューアルされました。XHTML&CSSマークアップされ、強制3コラムになるなど様々なデザイン面での修正がありました。

この手の話につきものの、デザインが悪くなった論争も早速コミュニティで起こっているようです。その一方で、ユーザスタイルシートで解決しよう!というエントリがはてブのホットントリにありました。

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

http://www.akiyan.com/blog/archives/2007/10/mixi2765px.html

私もFirefoxの人なのでStylishでuserContent.css書き換えればいいんだな、と分かったわけですが、世の中の大半を占めるIEユーザだとどうすればいいのか調べてみました。


IE

確認したのはIE 6です。ユーザスタイルシートの設定は

でできます。このエントリの最初で紹介したサイトのスタイルシート

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

コピペしたスタイルシートを試しに適応してみましたが、トップページを見る限りでは問題なさそうでした。

しかし、このままでは他のサイトの同じ要素(例えばh1タグ)にこのCSSが適応されてしまうので、他のサイトを見るときに問題があるかもしれません。h1タグにはpagetopというidが割り振られているので

h1#pagetop { display:none }

とすると多少は被害が減るかもしれません。

後、念のため

@charset "Shift_JIS";

として文字コードを指定してやったほうがいいかもしれません。

Firefoxのようにドメインごとに適応するCSSを指定できれば良いのですが、私が調べた範囲ではIEドメインごとに適応するユーザスタイルシートを切り替える方法は見つかりませんでした。


Sleipnir

調べてみるとSleipnirではFirefoxと同様なことができそうだったので試してみました。実行環境は

です。

Sleipnir拡張機能(SeaHouseとUserAction Extension)のインストール

まず、Sleipnir拡張機能インストールされていない場合は公式ページ

「カスタマイズに特化したブラウザ Sleipnir。上級者のために。」

http://www.fenrir.co.jp/sleipnir/

からダウンロードしてインストール

Sleipnirインストールした後にUserAction Extention*1インストール。その後にSeaHorse*2インストールという順です。

SeaHouse用のスクリプトUser Style Sheetをインストール

SeaHouse用のスクリプトUser Style Sheetを

スクリプトSleipnir Unofficial Extensions Center」

http://w5.abcoroti.com/~suec/script/

からダウンロード解凍後は付属のReadmeに従って

とすればよい。最期のToggleUserStyleSheet.jsマウスゼスチャやショートカットでユーザスタイルシートを適応するかどうかに使うものなのでオプションですが。

ユーザスタイルシートの利用
  • Sleipnirのメニューの「ツール」→「Sleipnir オプション」を選択
  • 開いたウィンドウで「拡張機能」→「SeaHorse」を選択
  • 「再読み込み」を選択してスクリプトを再読み
  • アドレスバーに「about:cssconfig」と打ち込む
  • ページに入力画面が表示されるので「URL」に「http://mixi.*」と入力し「CSS」のプルダウンメニューで「新規作成」を選択して、IEのときと同じCSSコピペしてOKを押す
  • 入力画面の「URL」の右側にある「追加」をクリック

で、FirefoxでStylishを使っているのと同じように表示を操作できます。2回目以降はアドレスバーにabout:cssconfigと打ち込んで随時追加していけばできます。


これはなかなかおすすめです。

*1Sleipnirの機能をJavascript/JScriptで呼び出せる拡張機能

*2Javascript/JScriptでWebページの表示を書き換えられる拡張機能

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証