mixiの新しいヘッダーをこざっぱりさせてみた

mixi関連連続エントリーです。
Operaの表示がおかしかったのを直したついでに、ユーザースタイルシートでヘッダーのバナーをとっぱらってデザインちょっと変えてみました。

mixiユーザースタイルシート

ロゴの下の妙なスペースとか、広告が無理矢理な位置にあったせいですごく中途半端になっていたのがスッキリ!!

ソースは以下です。

CSS
  1. #headerArea div.adBanner{
  2. display:none !important;
  3. }
  4. #headerArea div.headerNavigationRight{
  5. float:right;
  6. width:500px !important;
  7. div.headerNavigationRight ul.utilityNavigation01,
  8. div.headerNavigationRight ul.serviceNavigation{
  9. float: right;
  10. }
  11. div.headerNavigationRight ul.serviceNavigation{
  12. padding:19px 0 0 !important;
  13. }
  14. div.headerNavigationBottom{
  15. position:relative;
  16. top:-10px;
  17. float:right;
  18. width: 715px !important;
  19. }
  20. div.personalNavigation01,
  21. div#bodyArea,
  22. div#oldMain{
  23. position: relative;
  24. top:0px;
  25. clear:both;
  26. }
  27. div.personalNavigation01 ul li div.localSubMenu{
  28. top:28px !important;
  29. line-height:17px;
  30. }
  31. .emoji_palette {
  32. margin-top:-125px !important;
  33. }

Firefox用アドオンのstylishをお使いの方は以下の2行を一番上に追加し、最後の行に}を追加して閉めて下さい。

CSS
  1. @namespace url(http://www.w3.org/1999/xhtml);
  2. @-moz-document domain("mixi.jp") {

追記(08/7/10)

Opera9.5xで日記>日記を書くなどの配置に欠陥があったため、27~30行目の4行を追加しました。

やはりOpera9.5xにはline-height関連にバグがあるようです。

追記(08/07/11)

日記やコミュニティのコメント欄にある絵文字の挿入ボタンを押すとポップアップする絵文字の選択枠がだいぶ下のほうに表示されてしまっていたので修正しました。
31~33行目を追加しています。

位置はページによってイマイチかもしれません(´・ω・`)

追記(08/07/17)

mixi側のCSSに修正が入ったようなので、それに対応して調整しました。
16行目と24行目のtopの数値が変わっています。

  • コメント(0)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読