Violence~ArchivesGameYarikomiTextAboutMenuArchivesGameYarikomiTextAboutStylishで偏執的なレイアウトを作成するための覚書StylishとはFirefoxの拡張のひとつで、ユーザースタイルシートの作成と管理を助けてくれるもの。userstyles.orgには大量のユーザースタイルシートが投稿されていて、Stylishを導入しているなら現在開いているサイトのユーザースタイルシートが無いか確認したりすることができる。このStylishを使って去年あたりから細々とユーザースタイルシートを投稿してきたので、ここらで自分流のスタイルシートの書き方とかについていろいろまとめてみようと思った。一度でも使ったことがあるなら分かるが、かなり偏執的なレイアウトにしてしまうので、合わない人にはとことん合わないということを注意しておきたい。どのようなサイトに向けて作成するか基本的には訪問頻度と文章を読む上でのレイアウトの酷さ。レイアウトの酷さには以下の点が挙げられる。無駄にデカいサイトロゴサイドバーが多いサイドバーが縦に長い画像が多い文字が小さい行間が狭い文字間が狭いリンクに下線が引かれていない適度に改行されていない段落と段落の間が詰まっている数世代先の色使いなどなど。そこまでレイアウトが酷いサイトにはそうそう出会わないが、文字が小さいサイトが非常に多いので、今まで作成したユーザースタイルシートの大半は文字を大きくするついでにレイアウトも変えてしまったサイトだ。どのようなレイアウトにするか可読性と速さを追求したレイアウトにしたい。自分の中で理想的なのが、スタイルシートを全く適用させない状態で本文の幅を40文字前後にして中央寄せにしたもの。行間と文字間を広げ、文字も大きくすることで可読性を向上させる。文字を大きくするのは単に視力が弱いから。可能な限り広告の画像やコンテンツの背景画像等を極力読み込まないようにし、1カラムのシンプルなレイアウトに仕上げる。することでブラウザのレンダリング負荷を下げ、無駄なファイルリクエストを減らし、1秒でも速くページの読込と表示が完了するようにする。!important;}フォントサイズを大きくし、文章の幅を最大40文字に。背景色と前景色を読みやすい色に固定する。!important;}背景画像は文章の邪魔になることが多いので消去。floatによる段組レイアウトも必要無し。文字間と行間を広げることで可読性を上昇させる。!important;}それなりに構造がまともなサイトであれば、レイアウトはdivにclassやidを振ってCSSで調整しているのが大半なので、大元のノード及び子孫全てのdivに対してこのスタイルを適用することで、ほとんどのサイトで1カラム化が完了する。!important;}グローバルセレクタだけでは優先順位の関係上適用されなかったもの(言い換えれば、サイトオーナー側でよく設定されているもの)を、今度は大本のノードの子孫全てというセレクタで再設定する。これでほとんどのサイトは陥落する。本当はグローバルセレクタでレイアウトを一気に設定したいが、そうするとFirebugでの表示に不具合が生じるので、仕方なくこのような形になっている。上記だけでも多くのサイトが理想のレイアウトに近くなるが、いくつか邪魔な要素が残るはずなので、classやidを指定して消していく。これらの作業は大体10分前後で完了する。して完成したユーザースタイルシート群は「DestroyAllLayouts」シリーズと名付けることにした。ネーミングに関しては、デストロイオールヒューマンズというゲームタイトルの語呂が良かので拝借した記憶がある。なんでもかんでも消せばいいと思っているのか?最近のエントリ一覧や関連のあるエントリ一覧は残したいと思っているが、サイドバーに組み込まれていたり、残すことで他の必要ない要素も残さなければならないようなサイトは泣く泣く消している。何が必要かは個人によって差があるが、以下についてはできるだけ残したいと思っている。サイトロゴ兼トップページへのリンク前後の記事へのリンクコメント最近のエントリ関連のあるエントリ崩せないサイトもあるtableレイアウトを多用していたり、そもそもHTMLが破綻しているようなサイト。数年以上前からサイトに手を加えずにそのまま運営している羅列方ニュースサイト等に多い。このようなサイトはCSS3のセレクタをもってしても通用しない構造をしていたりするので満足にレイアウトを変更できない。隣接セレクタを利用した力技でなんとか対処しているのが現状。mixiにいたっては心が折れた。作成したユーザースタイルシート下記リンクからどうぞ。OperaでもUserJavaScriptとして利用できるが、対応しているセレクタの関係上、うまく適用されないことがたまにある。試行錯誤の段階なので、上記テンプレートはユーザースタイルシートを作成する度に少しずつバージョンアップを重ねている。そのため、初期に作成したものと最近のものでは仕上がりがかなり違うので、暇を見て修正している最中だ。インストールしたユーザースタイルシートがおかしいと思ったら、しばらく経ってからインストールし直すと正常に動作するかもしれない。