Firefox でユーザスタイルの設定をするのが面倒でこれまで利用していなかったのですが、[Stylish][r1] というアドオンを用いることでサイト毎のスタイルが容易に修正できるようになるので、導入を機にいろいろ試してみた。ワンクリックでデザインを変更できるのがイイネ。
以下、個人的に「これはいいなぁ」と思ったもののメモ。見栄え変更に興味がある方のみドゾー。
ちなみに、Stylish が何なのか分からない場合は意味不明です。とは言っても、ただデザインを管理するアドオンなのですが、導入方法とかはマンドイので省きます。
### サイトのスタイルを変えるもの
[ニコニコ動画(nicovideo.jp)-FrameStyle2][s10] (気に入った)
: タイトル、検索ボックス等のヘッダは上部表示で固定、その直下に動画のプレイヤーを配置(本家では概要やタグなどを表示してる)。だいたいは動画を見た後にマイリスト追加とか、タグを眺める形になるのでこちらの方がしっくりくる。何よりも、ページを開いた直後にスクロール不要でプレイヤーが目の前に来る点がいい感じ。
[Ad Blocking FiltersetP][s11]
: AdSense をはじめとして、いろいろな広告を取り除いてくれる。かなり多いけど、大抵は海外向けかな?
[OS X Style Google Reader][s1]
: Google Reader のスタイル変更。改良版として OS X Style Google Reader **Tweeks** というのも出てますが、今では Tweeks の方に表示の不具合があります。スクリーンショットが少々古いようですが、こちらで問題なさそう。
おまけ、GMの [GR+?B][s2] を利用すると、フィードタイトルの横にはてブ登録数が表示されるので目安になっていいです。
[livedoor Reader and Fastladder][s7]
: Livedoor Reader,及びこれの英語版である Fastladder にて、文字の大きさやラインの高さが変わる。個人的には見やすく感じます。詳細はリンク先に日本語でありますので省略。
[Fastladder CSS][s8]
: 背景色を変更とか。かなり個人差がある趣味の領域だと思うけど、なんとなく使ってる。
[scannable.twitter.com][s5]
: Twitter用。ID、発言、その他の配置を揃える。見やすいような、見づらいような、微妙なところで悩ましい。
[del.icio.us+x][s3]
: del.icio.us のレイアウト変更。ヘッダーが常に表示されるのは便利かな。
[Del.icio.us Lite][s4]
: del.icio.us のレイアウトを淡い?色合いに。大幅に変更はしたくないけど、ちょっとイメチェンしたい場合に吉。サイドバーがちょっと広い。
[Gmail - display keyboard shortcuts][s6]
: Gmailのショートカットをたまに忘れることがある場合は、いちいちヘルプを出さなくて済むので便利かな。慣れたら目障りだけど、非表示にすれば済む話だし。
[restore hatena stars][s9]
: はてなスターが消えているダイアリーに再表示させる。押したくても押せない場合に便利?はてな住人以外は全く不要。
他、[Tumblrのブックマークレット用スタイル][o1]があったけど、自分は既に JavaScript Actions を利用した快適なタンブラ環境が整っているのでスルー。なければ使っていたかも?
Tumblr用にお勧めのスタイルをもうひとつ。ダッシュボードで大きい画像が表示されるスタイル。
**9/27追記**
**以下では手動での導入方法について書きましたが、既に Userstyles に登録されていたのでワンクリックで適用可能です。**
**[Tumblr Dashboard Big Photos][s12]**
以下、手書きの方法。 // 追記ここまで
[Dashboardの画像を始めから大きくしておくグリモン,Sylish/CSSで、できるよ。][o2] via to
こちらは手で書き加える必要がありますね。といってもさほど難しい作業ではなく。まずは Tumblr のダッシュボードを開いておく。
ブラウザのステータスバーにノートみたいなアイコン(Stylishのアイコン)があるはずなので、それを右クリックして「スタイルを書く」» 何でも問題ないけど「tumblr.com 用」を選択。「スタイルを追加」というウィンドウが現れるので、概要欄は適当に。自分の場合は「Tumblr – Display big images」こんな感じで。続いて・・・
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(“tumblr.com”) {
}
上記コードが既に入力されているはずなので、その間にスタイルを追加する。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(“tumblr.com”) {
ol#posts a[id^="small_photo"]{
display: none !important;
}
ol#posts a[id^="big_photo"]{
display: inline !important;
}
}
こうなる。そして保存して終わり。
他、個人サイト用定義とかも試していたのだけど、長くなったのでまた別の機会に改めて。
### ブラウザのスタイルを変えるもの
[WellRounded 2][b1]
: Firefoxのアドレスバーや検索ボックスが丸角になる。常に表示される部分だから多少は凝るといいのかも。
[r1]: “userstyles.org”
[s1]: “OS X Style Google Reader | userstyles.org”
[s2]: “ヒビノキロク – grb+-20061113.user.js”
[s3]: “del.icio.us+x | userstyles.org”
[s4]: “Del.icio.us Lite | userstyles.org”
[s5]: “scannable.twitter.com | userstyles.org”
[s6]: “Gmail – display keyboard shortcuts | userstyles.org”
[s7]: “livedoor Reader and Fastladder | userstyles.org”
[s8]: “Fastladder CSS | userstyles.org”
[s9]: “restore hatena stars | userstyles.org”
[s10]: “ニコニコ動画(nicovideo.jp)-FrameStyle2 | userstyles.org”
[s11]: “Ad Blocking FiltersetP | userstyles.org”
[s12]: “Tumblr Dashboard Big Photos | userstyles.org”
[o1]: “Tumblr – Unfold Post Photo | userstyles.org”
[o2]: “to”
[b1]: “WellRounded 2 | userstyles.org”