風柳メモ

ソフトウェア・プログラミング関連の覚書が中心。

はてなコピィでコピィ下にinfoを表示するCSS(Stylish)

infoは見えてて欲しい

はてなコピィの各コピィの情報を、マウスオーバや隠しコマンド(笑)を打つ手間なくみたいと思ったので、StylishでCSS設定してみました。
これで☆も見切れなくなった(笑・まぁ多すぎると下方で見切れるけど)。StylishはFirefox用だけれど、サイト単位でユーザスタイルシートが設定できるブラウザならいけるかも?

こんな感じになります



CSSはこんな感じ

はてなコピィでinfoを表示
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("copie.hatelabo.jp") {

    .banners .banner {
        height:108px!important;
    }
    
    .banners .banner .info {
        visibility:visible!important;
        overflow:visible!important;
        top:60px!important;
        height:42px!important;
        padding-top:2px!important;
        line-height:120%!important;
    }
    
    .banners .banner .info img {
        vertical-align:middle!important;
    }
    
    .banners .banner .info address.author {
        display:inline!important;
    }
    
    .banners .banner .info address.author a {
        color:lime!important;
    }
    
    .banners .banner.level-a .info {
        width: 214px!important;
        border-left: 0px solid #000!important;
        border-top: none!important;
    }
    
    .banners .banner.level-b .info {
        width: 210px!important;
        border-left: 4px solid #00b8b9!important;
        border-top: none!important;
    }
    
    .banners .banner.level-c .info {
        width: 208px!important;
        border-left: 6px solid #01b927!important;
        border-top: none!important;
    }
    
    .banners .banner.level-d .info {
        width: 206px!important;
        border-left: 8px solid #b9001d!important;
        border-top: none!important;
    }

}

気づいたこと

  1. 作者リンクが隠れていたので表に出してみた。
  2. infoの上の色付線は人気のレベル(level-a:なし、b:細・水、c:中・緑、d:太・紅)かな?*1→ちょっといじってinfoの左に線を出すようにしてみた。

*1:マウスオーバのときに出てたんだけどなんだかわかっていなかった