REDLINE MAGAZINE | StylishでユーザーCSSを楽しむREDLINE MAGAZINEトップページへ

すべてのエントリを見る

StylishでユーザーCSSを楽しむ

Firefoxのアドオン、「Stylish」
このアドオンをFirefoxに追加すると、ユーザスタイルを簡単に作れたり、管理できたりするという優れもの。何をどうすればいいのかなどはhamashunさんちのロドリゲスさんとキャシーさんの解説が分かりやすかったです。

Stylishを使ったユーザーCSSの作り方

まず、アドオンを追加したらブラウザの一番下のバーにStylishのアイコンが出るのでそいつを右クリック。そうするとなんかいろいろ出てくる。とりあえず「スタイルを書く」を選択して適応範囲を選ぶ。

画面キャプチャ・StylishでユーザーCSSを作る

適応範囲を選択すると下記のようなウィンドウが出てくる。

画面キャプチャ・StylishでユーザーCSSを作る

上に画像に入ってるソースはウィンドウが出てきた時点で勝手に入ってるので、@-moz-document domain("hogehoge.jp") { } の{}の中にcssを書いていけばOK、なんだと思う。多分。 概要部分に適当に名前を入れてソースを書いたら、「プレビュー」ボタンでその場で書いたCSSの内容がページ上に反映される。

画面キャプチャ・StylishでユーザーCSSを作る

プレビューの具合を見ながらちょこちょこ修正したりして、いい感じになったら「保存」。

画面キャプチャ・StylishでユーザーCSSを作る

「保存」してから再度さっきのアイコンを右クリックするとそのページに反映されてるユーザーCSSにチェックが入ってるのが確認できる。

「スタイルの管理」では自分が入れてるユーザーCSSのオンオフの切替や編集、削除ができる。

画面キャプチャ・StylishでユーザーCSSを作る

で、ひっそりこんなん登録した。

上で書いたhamashunさんちのロドリゲスさんとキャシーさんの解説にもあるように、自分で作ったユーザーCSSを登録できるサイト「userstyles.org」というのがあるらしく、ひっそり勢いで投稿してみた。それがコレ↓

http://userstyles.org/styles/2514

今マイブームのnowaのマイページみたいなところの「新着記事&ナニシテル?」の部分をもう少し分かりやすくしたいなーという主旨。やってる事は単純に背景色をつけてるだけなんで、こんなレベルで投稿して許されるんだろうかとやや心配なのだが、何事も勢いで・・・。

おまけ

練習がてらにこのサイトをいじった結果のCSSさん。

とりあえず、ユーザーCSS楽しいです。

<< font-size:82% って何? | フォントサイズ問題のために100.01%を指定 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/153

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。