livedoorReader用にUserCSSを書いた

今更感はありますが、livedoorReader用にCSSを書きました。もうスキンってレベルだよね。
世間的には、出尽くした感はありますが、自分が使いたい形のものがなかったので例によってゼロから作成しております。
大きな変更箇所としては、操作系のパネルを右側に設置した点。ほらMacのアイコンが右側にあるように、操作するものは右にあってしかるべきなんです。登録フィード一覧を表示させる度に、ごにょって右側に本文エリアが動くなんてナンセンスです。

変更前


自分のブラウザは左にタブ、右にパネル、下段にアドレスバーという通常の人が使いにくい構成なのでこんなのが通常イメージになります。ちなみにパネルはブックマークを表示というよりもtwicliを常駐させて、タブはショートカットで適時閉じたりしてます。

変更後


右側にlivedoorReaderのパネルを設置し、それにあわせて色々変更。

ダウンロード

使い方はOperaだと、livedoorReaderを開いて、右クリック>サイトごとの設定の編集をクリック>表示設定タブをクリック>ユーザースタイルシートに上記ダウンロードしたファイルを選択。あとログイン画面でも同様に同じスタイルシートを適用させてください(ドメインが異なるので注意)。firefoxの場合はUser.CSSの使い方(firefox+userstyles.org編)を参照してください*1

変更箇所一覧

  • ログイン、ログアウトの画面をシンプルに
  • livedoorReaderのロゴを削除
  • 棒人間?を右上に設置
  • コントロールパネルを左側に設置
  • コントロールパネル側のツリーを1行にして折り返し無しに
  • 未読一覧にホバーするとメニュー(ログインとか設定とか)表示
  • ログイン後のトップページの情報を新機能の紹介だけに
  • ZAKZAK芸能のフィードを読みやすく

変更前

変更後

ZAKZAK芸能フィード(もしくはZAKZAK芸能(画像満載))に関しては、これだけは譲れない変更箇所!ってなわけで以下CSSソース。ここだけ切りしてるのは今更livedoorReaderSkinなんてみんな使いやすい用に書き換えてると思ったので、ここだけ貼り付けてくれたらいいや的な。そんな感じです。
イメージ見て勘違いしないで、女優が変わったりしませんから。

/* zakzak芸能を読みやすくする */
/* http://pipes.yahoo.com/momizine/zakzak */
.item_body img[src^="http://www.zakzak.co.jp/"]{
float:left;
margin-right:0.5em;
margin-bottom:0.5em;
}
.item_body img[src^="http://www.zakzak.co.jp/"] + br,
.item_body img[src^="http://www.zakzak.co.jp/"] + br + br{
display:none;
}
.item_body ol,.item_body .item_body hr,.item_body pre,
.item_body blockquote,.item_body table,.item_body ul,.item_footer{
clear:left !important;
}

ぶっちゃけ、こんなへんてこなスタイルは自分しか使わないと思う。fastlladderも試してないけど動くんじゃない?
しかしlivedoorはどこかのGoogleに見習わせたいほどいつ見ても綺麗なHTMLを書く。

*1:リンク先間違えてたので修正しました