[ Firefox ] userContent.css の覚え書き

Firefox では自分の書いたスタイルシート ( CSS ) をウェブページに適用することができるので、その設定を覚え書きしておきます。 ユーザースタイルを適用するには、userContent.css に書き込んで Firefox を再起動するか、Stylish と言う拡張機能を使います。

※ userContent.css とか Stylish の設定とかの一番最初に以下の一行を追加しておきます。

@namespace url(http://www.w3.org/1999/xhtml);

Firefox ( ウェブページ全体に適用するスタイル )

下のコードを userContent.css に書き込むと、Firefox で開くページの全てにスタイルが適用されます。

リンクの target が _blank または new の時カーソルの形状を変える

Firefox を使っていて、ウェブページのリンクをクリックする時、このリンクが別ウインドウで開くのかどうか気になるときってありませんか? そんな時は、userContent.css に以下のコードを書いておけば、リンクにカーソルを乗せた時にカーソルの形状が変わるので便利です。

/* _blank or new の時リンクカーソルを変更 */
a[target=”_blank”], a[target=”new”] { cursor: alias !important; }

Firefox 1.5 から、alias というカーソル形状が使えるようになったらしいです。

textarea 内に行間を設定

ウェブメーラーや Movable Type の管理画面など、textarea に文字を入力する事が多いんですが、textarea 内の文字に行間設定は出来ないものかと試してみると出来ました。

textarea {
    font-size: 8pt !important;
    line-height: 1.5 !important;
    font-family: monospace !important;
}

古いバージョンの Firefox では、行間設定が出来なかった様な気がするんですが…。 まいっか。これで、文字の編集が快適になった。

Firefox でソースを表示する時の見た目を変える

Firefox で、ソースを表示する時の見た目を変える CSS です。

/* ソース表示をカスタマイズ */
body#viewsource * {
    font-size: 8pt !important;
    font-weight: normal !important;
    font-family: monospace !important;
    font-style: normal !important;
    line-height: 1.5 !important;
}

Remember The Milk

@-moz-document domain(“www.rememberthemilk.com”) {
    * {
        font-size: 8pt !important;
        font-style: normal !important;
        font-family: ‘Lucida Grande’, Verdana, sans-serif !important;
        line-height: 1.5 !important;
    }
}

livedoor Reader 用のユーザースタイルシート

@-moz-document domain(reader.livedoor.com) {

    /* 画面左のツリー表示 */
    .flat .treeitem {
        height: 1em !important;
        padding-bottom: 9px !important;
        line-height: 1.5 !important;
        font-size: 10px !important;
    }
    /*.flat .treeitem { height: auto !important; }*/

    /* 横スクロールを消す */
    #subs_container {
        overflow: auto !important;
    }
    #right_container {
        overflow: auto !important;
    }

    /* フッターを非表示にする */
    #footer {
        /*display: none !important;*/
        visibility: hidden !important;
    }

    /* フォントの設定 */
    * { font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif !important; }

}

しげふみメモ : livedoor Reader のマイフィードのフラット表示を少し変更 を参考にさせていただきました。 ありがとうございます。

1 COMMENT

blog.1cco.com

CSSでカーソルの形状を変える

Safariでも出来んだろうってことで、ここしばらく使ってたら、エライいい感じな…

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です