1. メモ帳日記 >
  2. Web >
  3. mixi を Stylish でいじる

メモ帳日記

日記書いたりメモ書いたり

2007年 1月 26日（金） 先勝

mixi を Stylish でいじる

Created Date
2007-01-26T01:23:02+09:00
Modified Date
2007-07-12T01:40:11+09:00
Category
PermaLink
http://bsakatu.s201.xrea.com/mt/2007/01/26/01-23-02

mixi のレイアウトがいろいろ気に入らなかったから，自分でいろいろいじってみた。使ったのは，Firefox の extension の Stylish。この extension は，userchrome.cssやusercontent.cssと同じ機能を、再起動せずに反映・管理できるユーザースタイルシート拡張だから，どんなサイトもいじり放題。で，やった結果は以下。

mixi を Stylishでいじった結果

やったことは，

  • 広告や必要ないものの削除。
  • でかい部品にある程度の margin をつける。
  • 行間をある程度空ける。
  • 無駄なスペースが無くなるように配置。

こんなあたり。やっぱ，一番上のでかい mixi の画像が無くなったのがいい。あれはあってもじゃまなだけだ。

<div class="entry"> 内では，img 要素に float: left; を当てているのだが，float の性質の関係上，どうしてもリストとかの 左余白が無くなっちまう。どうしたもんか。

このエントリがブックマークされてしまったみたいなので、一応今現在使っているスタイルを晒してみる。晒すために清書したのは内緒。

mixi の HTML が多少変わっていたのでスタイルを更新。

mixi の HTML がまた変わっていたので更新。どうも id とか class をちゃんとつけているようだ。良い傾向だ。でもテーブルレイアウトは無くならないんだろうなぁ。

  1. @-moz-document url-prefix(http://mixi.jp/) {
  3. /* リンク色をクリック済みか否か可視化 */
  4. a:visited {
  5. color:#996699 !important;
  6. }
  8. a[href*="view_diary.pl?url="] {
  9. border-bottom: dashed 1px #333 !important;
  10. text-decoration: none !important;
  11. }
  13. /* 非表示系 */
  14. body > div#header, /* トップのバナーとかロゴ */
  15. body input[src="http://img.mixi.jp/img/search_3b1.gif"], /* 検索欄の横の日記ボタン */
  16. body input[src="http://img.mixi.jp/img/search_3b3.gif"], /* 検索欄の横の Web ボタン */
  17. body > map + div + ul + img + br + table > tbody > tr > td > table > tbody > tr > td[width="100"], /* 日付関連のボックス */
  18. body > map + div + ul + img + br + table > tbody > tr > td[width="224"], /* 右上の 224 * 100 の広告 */
  19. body > table > tbody > tr > td > table[style="margin-bottom: 5px;"] td[height="24"], /* 検索欄の横の search ボタン */
  20. img[src = "http://img.mixi.jp/img/keitai07.gif"], /* 携帯からチェック */
  21. a[onClick = "MM_openBrWindow('mobile_access.pl','','width=410,height=600,toolbar=no,scrollbars=yes,left=10,top=10')"], /* 携帯からチェック */
  22. img[src *= "http://img-p3.mixi.jp/img/pen"], /* 日付前のペンの画像 */
  23. img[src *= "http://img.mixi.jp/img/pen"], /* 日付前のペンの画像 */
  24. body > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td[colspan = "2"][bgcolor = "#f2ddb7"] /* 非表示にしている部分 (mixi ニュースとか) */
  25. {
  26. display: none !important;
  27. }
  29. /* おおもとの幅調節 */
  30. body > ul#snavi,
  31. body > ul#snavi + img + br + table,
  32. body > ul#snavi + img + br + table + img + br + table {
  33. width: 865px !important;
  34. }
  36. /* 2段目メニューの上余白 */
  37. body > ul#snavi {
  38. margin-top: 10px !important;
  39. }
  41. /* 左カラムの余白 */
  42. body > map + div + ul + img + br + table + img + br + table > tbody > tr > td > table > tbody > tr > td[width="280"] {
  43. padding-left: 25px !important;
  44. padding-right: 25px !important;
  45. }
  47. /* 検索欄とお知らせボックスの table の調節 */
  48. body > map + div + ul + img + br + table {
  49. margin-top: 3px !important;
  50. }
  52. /* 検索欄とお知らせボックスの table 下の table の調節 */
  53. body > map + div + ul + img + br + table table {
  54. background: transparent !important;
  55. }
  57. /* 検索欄とお知らせボックスの調節 */
  58. body > map + div + ul + img + br + table > tbody > tr > td > table[width="570"] {
  59. border: none !important;
  60. }
  62. /* 検索欄の調節 */
  63. body > map + div + ul + img + br + table > tbody > tr > td > table > tbody > tr > td > table[width="565"] {
  64. width: 450px !important;
  65. border: none !important;
  66. position: relative !important;
  67. top: 15px !important;
  68. }
  69. body > map + div + ul + img + br + table > tbody > tr > td > table > tbody > tr > td > table[width="565"] > tbody > tr > td > table {
  70. position: relative !important;
  71. left: -115px !important;
  72. }
  74. /* 検索欄の背景非表示 */
  75. body > table td[background="http://img.mixi.jp/img/search_bg03.gif"] {
  76. background: transparent !important;
  77. border: none !important;
  78. }
  80. /* 検索欄の幅調節 */
  81. body > table td[background="http://img.mixi.jp/img/search_bg03.gif"] input[name="MT"] {
  82. width: 145px !important;
  83. }
  85. /* お知らせボックスの調節 */
  86. body > map + div + ul + img + br + table > tbody > tr > td > table[width="570"] + table[width="570"] {
  87. width: 492px !important;
  88. margin-top: -30px !important;
  89. margin-bottom: 3px !important;
  90. position: relative !important;
  91. left: 323px !important;
  92. }
  93. body > map + div + ul + img + br + table > tbody > tr > td > table[width="570"] + table[width="570"] > tbody > tr > td {
  94. display: none !important;
  95. }
  96. body > map + div + ul + img + br + table > tbody > tr > td > table[width="570"] + table[width="570"] > tbody > tr > td[width="460"] {
  97. display: table-cell !important;
  98. }
  99. body > map + div + ul + img + br + table > tbody > tr > td > table[width="570"] + table[width="570"] *[width="460"] {
  100. width: 492px !important;
  101. }
  102. body > map + div + ul + img + br + table table[width="460"] {
  103. outline: 1px solid #c93 !important;
  104. }
  106. /* 行間調節 */
  107. body > map + div + ul + img + br + table + img + br + table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td[bgcolor="#f2ddb7"][width="80"][nowrap] + td, /* 自分の最新日記表示欄 */
  108. body > map + div + ul + img + br + table + img + br + table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td[width="425"] /* マイミク日記やコミュニティの最新書き込み表示欄 */
  109. {
  110. line-height: 1.4 !important;
  111. }
  113. /* フッターの幅調節 */
  114. body > div#footer {
  115. width: 843px !important;
  116. background-image: none !important;
  117. }
  120. }
  1. @-moz-document url(http://mixi.jp/show_log.pl) {
  3. td > div > embed {
  4. display: none !important;
  5. }
  7. }