めざせマイスキン:お便利サイト

• CSSを変更しながらブラウザで確認できるツール
  [ 2004-10-02 11:19 ]
• フォトレタッチソフト「JTrim」
  [ 2004-08-24 12:34 ]
• CLASS指定をブラウザで簡単に確認する方法
  [ 2004-07-25 19:36 ]
• CSSレイアウト自動作成サイト
  [ 2004-06-20 14:47 ]

別件で探し物をしていたのですが耳よりのツールを見かけましたのでご紹介。

このツールを使うにはブラウザ「Firefox」使用となります。
その上で拡張ツール「Web Developer」をgetし、利用可能となります。

慣れたブラウザ以外のものを使うのはめんどう～と思われるかもしれません。
しかしその面倒を乗り越えると素敵な世界が…（*＾д＾*）

まずは使用画面のスクリーンショット(縮小)を。

Firefoxでこの「めざせマイスキン」を開き、「Web Developer」のツールバーから「CSS」→「Edit CSS」を選択すると左サイドにCSS編集画面が出現します。
ここではエキブロのCSS編集画面ではおめにかかれない「.CAL_SUN」(エキブロ側で指定されています)なんてクラスも確認できます。
そしてこのツールのすごいところは…
例えばこのサイトの左側カレンダータイトル大きさは８ポイントですが左サイドの編集画面で「div.CAL_HEAD」の中身を「font-size: 20pt;」に書き換えるとリアルタイムで右画面に適用されます。

(カレンダーのタイトル属性を書き換え後、瞬時に大きくなります)

もちろん実際のスキン編集はエキブロの編集画面で行うわけですが事前に試してみるのにお便利かと。

このツールは他にも以前紹介した「Bookmarklet」に近い機能(classやidを表示、各ブロックのサイズ表示など)がてんこもりです。
情報元は「Unmovabletype」様の記事です。多謝。
丁寧な解説がありますので興味のある方は是非にご訪問を。
(すごく悲しい理由で閉鎖されています。記事は閲覧可能。トラックバック＆コメントは不能)

Firefox自体も魅力的な機能があります。
またWeb Developerの他にも拡張ツール(Extension)は数多く存在します。

Firefox日本語版はこちらから(for Windows)
　※10/3 AM0:20現在、一時的に日本語版は外されているようです。
　→ ※10/5 AM0:30現在、日本語版再開しています。
　(MACな方はOS X 10.1.x,10.2.x以降でしたら英語版からどうぞ )
　→ ※[11/12追記]Mac、Linux用日本語版も出たようです。が、Mac用に関してはリスキーという噂(コメント欄参照)も…。

■Web Developer組み込み方法

• Firefoxをインストールし、起動します。
  
• ツールバー「ツール」→「拡張機能」でポップアップウィンドウが出現します。
  
• ポップアップウィンドウ右下の「新しい拡張機能を入手」をクリックします。
  
• Extension(拡張ツール)のダウンロードサイトが別ウィンドウの表示されます。
  10/2現在、Web Developerは「Top Rated」上位(２位でした)に入っていますのでそこをクリック。
  10/18現在「Popular」から探した方が早いです。６位でした。(参考までに作者のURLは
  http://www.chrispederick.com/work/firefox/webdeveloper/
  です)
  
• Web Developerのダウンロードページに移動しますので( Install Now )をクリック。
  
• ポップアップウィンドウ「ソフトウェアインストール」が出現するので「今すぐインストール」をクリック。

→[11/12追記]
『Web Developer 日本語版』も出たようです。(chui_m様情報)

ただこのツール、小さくて大きな問題が…

マイスキンの飾りつけを自分で手掛けたいと思うのならば是非手に入れたいのがフォトレタッチソフト。
PhotoShopがその代表格ですが高価なので誰も彼も手にすることはできません。
そこでご紹介したいのが「JTrim」。
私がこのソフトを知ったのはlupin038さんのサイトにて。
JTrimの入手先はlupin038さんの記事からたどっていけます。
　【 JTrim紹介記事　…　CSS作成な一日 】

このソフトは無料でいいんでしょうか？と恐縮しちゃう程、機能てんこもり&軽快動作。
あまり調整しなくてもワンタッチでほどよい加工をしてくれます。
加工過程で(全てではないのですが)プレビュー機能がついているのもありがたいです。
　(※動作環境：Windows95/98/Me/NT4/2000/XP)

JTrim使用例

元画像



スポットライト



ポスタライズ

フェードアウト



ブラインド



シルクスクリーン

そういえば思い出した…。
某雑誌にお役立ちツールが紹介されていたことを！
Bookmarkletなるものを導入すればCSSがどんなに細かくても長くても読みづらくても(くどい)たっちょんぱ(死語)でCLASSをブラウザで確認できるのだったわ。

このブログの7/11の記事(スクリーンショット)で例示します。

上の画像のような感じでCLASS指定された部分が赤枠でCLASS名は赤字で表示されます。便利ですよね。
※実物大のBookmarklet使用画面スクリーンショットはこちらです。

このBookmarkletはJavaScript::Bookmarkletで紹介されています。

…更に詳しいご紹介はこちら。

昨日今更ながらに思った。
デザインの素敵なブログとはなんぞやと。
のそのそと検索しだした。
「デザイン」＋「素敵」＋「ブログ」
…なんかちょっとおまぬけなキーワードっぽいが。

そうしたら心臓わしづかみされたようなのがヒット！
「きままにポロポロ」(こっそりリンク)
有名なサイト様のようでblog Rankingデザインで現在１位。え？もう知ってる？　知らなかったの私だけ？(汗

キリンのうっとりするよーなスキンもさることながらこの中にあった記事にまたまた衝撃が。
CSSレイアウト自動作成サイトなるものの存在。
inknoize
CSS Creator

知らなかった…。　こんな便利なサイトがあるなんて。
試しにやってみたらあっというまに2カラム、3カラムレイアウトが自動作成されちゃった。
ブラウザのwidth(幅)の認識の違いも配慮してクリアしているし。

試行錯誤したからCSSでのレイアウトの仕方を理解することはできた…しかしかなり打ちひしがれています。
無知とは罪よのぅ…＿|￣|○