最近調子悪いなーと思っていたら 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 にコピペして利用しています。
こういうのは tiddlywiki とか、基本は読ませるけど編集もできますよ的なページなら有効な技だと思うけど、ブックマークはそういう使い方しないでしょ。 ↩