Deprecated: Function ereg() is deprecated in /virtual/bsakatu/module/xml_declaration.inc on line 4
メモ帳日記 : mixi を Stylish でいじる
  1. メモ帳日記 >
  2. Web >
  3. mixi を Stylish でいじる

メモ帳日記

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

2007年 1月 26日(先勝

mixi を Stylish でいじる

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