|
カテゴリ
目次このサイトについて とりあえずマイスキン HTML編集 A HTML編集 B HTML編集 C HTML編集 D CSS編集 序1 明解編 CSS編集 序2 模索編 CSS編集の友 いざマイスキン マイスキン人リンク(TB) お便利サイト 以前の記事
2004年 10月2004年 09月 2004年 08月 2004年 07月 2004年 06月 2004年 05月 お気に入りブログ
エキブロ外リンク
最新のコメント
最新のトラックバック
検索
おすすめキーワード(PR)
ファン
|
![]() このツールを使うにはブラウザ「Firefox」使用となります。 その上で拡張ツール「Web Developer」をgetし、利用可能となります。 慣れたブラウザ以外のものを使うのはめんどう~と思われるかもしれません。 しかしその面倒を乗り越えると素敵な世界が…(*^д^*) まずは使用画面のスクリーンショット(縮小)を。 ![]() Firefoxでこの「めざせマイスキン」を開き、「Web Developer」のツールバーから「CSS」→「Edit CSS」を選択すると左サイドにCSS編集画面が出現します。 ここではエキブロのCSS編集画面ではおめにかかれない「.CAL_SUN」(エキブロ側で指定されています)なんてクラスも確認できます。 そしてこのツールのすごいところは… 例えばこのサイトの左側カレンダータイトル大きさは8ポイントですが左サイドの編集画面で「div.CAL_HEAD」の中身を「font-size: 20pt;」に書き換えるとリアルタイムで右画面に適用されます。 ![]() (カレンダーのタイトル属性を書き換え後、瞬時に大きくなります) もちろん実際のスキン編集はエキブロの編集画面で行うわけですが事前に試してみるのにお便利かと。 このツールは他にも以前紹介した「Bookmarklet」に近い機能(classやidを表示、各ブロックのサイズ表示など)がてんこもりです。 情報元は「Unmovabletype」様の記事です。多謝。 丁寧な解説がありますので興味のある方は是非にご訪問を。 (すごく悲しい理由で閉鎖されています。 Firefox自体も魅力的な機能があります。 またWeb Developerの他にも拡張ツール(Extension)は数多く存在します。 Firefox日本語版はこちらから(for Windows) → ※10/5 AM0:30現在、日本語版再開しています。 (MACな方はOS X 10.1.x,10.2.x以降でしたら英語版からどうぞ ) → ※[11/12追記]Mac、Linux用日本語版も出たようです。が、Mac用に関してはリスキーという噂(コメント欄参照)も…。 ■Web Developer組み込み方法
→[11/12追記] 『Web Developer 日本語版』も出たようです。(chui_m様情報) ただこのツール、小さくて大きな問題があります。 なぜかエキブロの場合最初にcolorがrgb(n,n,n)で表記されているのです。 スキン編集でまず最初にいじりやすいcolor。 a:link { color: #0000FF; } なんてのがEdit CSSを最初に開いた時点で a:link { color: rgb(0, 0, 255) } なんてふうに10進数表記されています。 編集する分には16進数(#RRGGBB)でももちろんOKなのですが 最初これだとちょっととっつきにくいです。 ツールの設定画面でいじれるのかと思ったのですが特にみあたらず。 サイトによっては16進数で表示されるところもあり、各ブログで調べてみました。 #RRGGBB表記 JUGEM goo ライブドア ココログ ブログ人 ヤプログ他 rbg(n,n,n)表記 エキブロ 楽天 Σ( ̄□ ̄; なんてことでしょう。よりによってうちのエキブロがかなりの少数派の中に入っていたとは。 エキブロと楽天の共通点をしばし考えてみました。 …それはcssがインラインで記述されていること。 よそのブログ様は外部cssファイルをの読み込む形をとっています。 試しにcssがインラインで記述されている非ブログのサイト(老舗サイト「とほほのWWW入門」様等)も試してみました。 やはりrgb(n,n,n)で表示されてしまいます。。 Inlineで書かれたCSSのcolorは強制的にrgb(n,n,n)表記になってしまう…? でもなぜインラインのCSSだけ表記方法を変える必要があったのでしょう? わからないです。 Edit CSSを開いた時点でcolorを16進数表記(#RRGGBB)で取得する方法がありましたら当方までお知らせ下さいませ。 ----------------------------- [2005.4.22追記] これと同様にCSSを変更しながらブラウザで確認できるツールをもう一つご紹介します。 「たぬきのしっぽ」 こちらはIE限定のようですが、ツールのダウンロードが不要なのでてっとり早くCSSをいじりたい方に便利な一品です。 Web Developerは左サイドのCSSコードを直接いじるのに対して、こちらはプルダウンで選択して場所を赤枠で確認でき、ブランクを埋めていく方法なのでより初心者にやさしいと思います。 色指定もカラーパレット付きなので楽々。 自動的に生成されたCSSコードが下部で確認できます。 詳細は上記サイトまで。 ちなみにわたくしの環境ではセキュリティソフト(ノートン先生)が邪魔をしていたので解除してからの操作になりました。 (PETさま情報) by tomo0640820 | 2004-10-02 11:19 | お便利サイト
| |||||||||||||||||||||||||||||||||||||||