2009-06-07

とりあえず、全記事一覧を持ってくる

asahi.comのサイドバーが更新終了した件につき、コメントをいただきました。そもそもasahi.comサイドバーに入れていたのは、専用のasahi.comサイドバーが提供されていたので楽だったためであって、何もasahi.comを特段見たいというわけではなく、理想的にはGmailウェブクリップで購読しているようなRSS類を表示するようにできるといいんですよね。とは言え、せっかく頂いたコメントなので、それに応えてみようと、ちょっと考えてみました。

とりあえずasahi.comサイドバーの内容とするには、どのようにするのがよいか。コメントでは、トップページを入れればよいというご提案をいただきましたが、トップページには若干余計な要素が多く、サイドバーに適するかどうかが微妙なところです。そこで見つけたのが、全記事一覧。このページから余計な要素を排除するスタイルシートを適用してみてはどうでしょうか。

そこで、自分が作成してみたコードは、下記のとおり。これをuserContent.cssの任意の部分に挿入すれば、適用できます。

@-moz-document url(http://www.asahi.com/news/list.html) { #Container>*:not(#Contents), #Contents>*:not(#Main), #Main>*:not(#MainInner), #MainInner>ul~*, #Sub, div.BnrLnkSbs, [id^=js], .mt10, .Box1, [target="_top"], h1 {display:none;} #Container * {border-top:none!important;background:none!important;margin:0!important;padding:0!important;} ul.Lnk > li {width:10em;display:list-item;list-style-type:disk!important;border-bottom:thin solid orange;} ul.Lnk {list-style-type:disk!important;} }

注意点としては、こんなものがあります。

  • 当然ですが、サイドバーではなしにメインウィンドウで開いても、(サイドバー内での表示と)同じ表示になります。(userChrome.cssをいじるなり参照するなりすれば、サイドバー内でのみ有効なスタイルシートを作れるのでしょうか。)
  • 上記と関係するかも知れませんが、!importantで強引に全適用している部分、最初は完全に全適用していましたが、そうするとサイドバー内のスクロールバーの表示が異常になってしまいました。結果的には、一意セレクタContainerの子要素のみ全称にしたところ回復したのですが、ということは、サイドバー部分を指す何らかの別の親要素があるということでしょうか。
  • Flashで作成されている広告が、どうしても消せなくて、残っています。(消せる方法がわかったら教えてください。)今の自分の環境(Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.19) Gecko/20081204 SeaMonkey/1.1.14)では、右下に表示されます。
  • 表示幅は、本来はサイドバーの表示幅に対する比率で表示したいところなのですが、それが難しそうだったので、自分がよく使う10文字分にしてあります。
  • asahi.comサイドバーと同様な箇条書きにしようと思ったのですが、なかなか言うことをきかないので諦め、項目間に線を引くことにしました。逆にこの方が表示領域を最大限活用出来るという意味ではよかったような気もします。色が橙色なのは、適当な自分の好みです。
  • リンク先をメインウィンドウ内に表示するためには各リンクのtarget属性に_content値が入っていないといけないそうです。当然ながらそこまではユーザースタイルシートでは実現できないので、実際にサイドバー内のリンク先をメインウィンドウへ表示させるには、ドラッグ&ドロップで移動させたりする必要があります。
  • display:none;で消そうとしている要素には、余計なものや無効なものもあるかも知れません。

この結果、表示は、例えばこのようになります。

表示結果

0 件のコメント: