なんか Diigo がさらに使いにくくなったような

最近調子悪いなーと思っていたら v2 beta になった。機能が増えたりしたんだろうけど、ぱっと見で気づいたのは

  • Social Annotation と名乗っているけど、これ前からだっけ? なんかコンセプト変わった?
  • 水色が増えた
    • Google inspired か?
  • 以前ボタンを CSS でリンクっぽく見せてるのは Mac のブラウザでひどいことになってるよと書いていたのは直った
  • ブックマークした各記事の上にマウスカーソルがきたらアクションのメニューが表示されるという相変わらずワンクッション待たせる操作性1。ただ、メニューを表示するために小さい more ボタンを一生懸命クリックする必要はなくなった。
  • もともと低い一覧性がさらに低くなった
    • 上で言う各記事に対するアクションメニューは mouseover で on/off するだけで「表示する場所は最初から確保されている」。つまりメニュー出っぱなしの状態となんら変わらない。で、そのメニューの分と、どのサイトをブックマークしたかの情報の分のスペースが邪魔。あとページタイトルがでかすぎて場所を取っている。
  • 検索窓は右の方に行ってしまい、自分が普段使っているウィンドウサイズでは隠れてしまう。

なんだろうなぁ。この、印刷した時きれいに見えますよ的な余白の使い方をしてる感じ。

ということで例によって user css. 今回のポイントは

  • 随所で px 指定されている font-size を全部いじるのは面倒なので、とりあえず各ブックマークアイテムについて、タイトルを 100%、それ以外を 80% にする
  • 思い切って site filter(たぶん新機能)をカット
  • メニューボックスを一段下ではなくタグなどと同じ高さに。cache とか一部リンクが辿れないケースが出てくるがどうせ使わないので気にしない。これは思いとどまった。

こんな感じで。

@-moz-document domain("diigo.com") {
  #logo {
    z-index: 20 !important;
  }
  #siteNav {
    position:      relative !important;
    margin-bottom: -20px !important;
  }
  .easySearchBox {
    position:   absolute !important;
    top:        0        !important;
    right:      0        !important;
    float:      none     !important;
    z-index:    10       !important;
    background: none     !important;
  }
  #mainNavOuter {
    margin-right: auto !important;
  }

  #column {
    position:     relative !important;
    margin-left:  .25em    !important;
    margin-right: .25em    !important;
  }
  #box {
    width: auto !important;
  }
  h1 {
    clear:         both !important;
    text-align:    left !important;
    margin-top:    0    !important;
    margin-bottom: 0    !important;
    line-height:   1em  !important;
  }
  .bookmarkListHeader,
  .bookmarkListFooter {
    height: auto !important;
  }
  .bTabs {
    float:      none !important;
    margin-top: -2px !important;
    height:     24px;
  }
  .bTabs:after {
    white-space: pre;
    content:     "\A";
    visibility:  hidden;
  }
  .sorter, .filter, .pagination, .bFooterOptions {
    line-height: 1em !important;
  }
  .bFooterOptions {
    height: auto !important;
  }
  h3.title {
    font-size:    medium !important;
    width:        auto   !important;
    margin-right: auto   !important;
  }
  h4 {
    font-size: 80% !important;
  }
  h4.tags a {
    color: #5a9de1 !important;
  }
  h4.siteFilter {
    display: none !important;
  }

  #leftColumn {
    width:        auto !important;
    margin-right: 12em !important;
  }
  #rightColumn {
    width:    12em     !important;
    position: absolute !important;
    right:    0        !important;
    top:      0        !important;
  }
  #user_tags_list,
  #rel_tag_list {
    width: auto !important;
  }
  #user_tags_list,
  #friendList,
  #groupList {
    border:        solid 1px #999999 !important;
    margin-bottom: 1em !important;
  }
  div.DivInnerBox {
    height: 30em !important;
  }
  .sideBarBox {
    width: auto !important;
  }
  .sideBarBoxBorder {
    background: none  !important;
    padding:    .25em !important;
  }
  .sideBarBoxHeader {
    background: none !important;
  }
  .sideBarBoxContent {
    margin: 0 !important;
  }
  .sideBarBoxFooter {
    background: none !important;
  }
}

と思ったけど、

  • 各所の width の px 指定を排除
    • background の image も除去
  • rightColumn と leftColumn のバランスも em で指定。leftColumn の width を auto に
    • 先行する leftColumn の width が auto になった関係で float が効かなくなるので、 rightColumn を position: absolute によるレイアウトに変更
  • 余白の分減ってしまう情報量がもったいないので全体に margin, padding をきつめに
  • 検索窓も position: absolute にして z-index を上げることで、ウィンドウの幅を縮めてもナビ部分の高さが変わらず、かつ検索窓が隠れないように
  • 検索窓の z-index を上げたらロゴに掛かったのでロゴの z-index をより高く

という具合にさらに変更を加えてちょっと大掛かりになってしまった。

全体に、自分が普段使わないものは隠れてしまっても構わない方針で作っているので普段使いには若干注意が必要かと思いますが、どうぞご自由に。

ちなみにユーザースタイルシートの作成には

  • Firefox
  • Firebug
  • Stylish

を使っています。Firebug の Inspector で HTML 上の要素の特定を行い、その style を確認します。これを見ながら Stylish で書き換えを行っていきます。(Stylish は今回初めて使ったけどめっちゃ便利だわ。)

できあがったスタイルシートは常用ブラウザが Camino なので Stylish 上ではなく userContent.css にコピペして利用しています。

  1. こういうのは tiddlywiki とか、基本は読ませるけど編集もできますよ的なページなら有効な技だと思うけど、ブックマークはそういう使い方しないでしょ。 

More

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Develop Document Jekyll