人気ブログランキング | 話題のタグを見る

マイスキンつくりたいな
by tomo0640820
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カテゴリ
目次
このサイトについて
とりあえずマイスキン
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月
フォロー中のブログ
Feeling...感じ...
ちゃめ・家
【 d r o p s ...
FOOTBALL STYLE
ごはんですよ。
のらくら庵
ライムのブログ
流れ星の散歩道(^_-)-☆
極私的パパ馬鹿日誌
じゅん☆ブログ
:..: めもにっき。:...
はい こちらサポセン。
+ music life +
Roller skate...
でも、がんばる!
Fan Fan Life...
トルコ旅日記
喜 怒 哀 楽
ぽっとの陽だまり研究室
MIURAKE
ぷぷぷのぶ
Loophole
blueblueclub
恐悦至極に存じます。
しゃんくのつぶやき
しあわせの箱庭
ぱーむらいふ
超初心者一眼レフ日記。
私の人生、こんなもん 涙...
人生の地図
today's chan...
そんな目で見るなよ
雀屋だらだらday's
スラドット60
norah'#
3gatsu-USAGI
***amedama ...
My funny Val...
Bostonterrie...
たびcamera
お魚好きなねこ
MINT TIME
エキブロ外リンク
Anemosphere-Blog
TOMOのother sites
tomolatte
最新のトラックバック
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
CSSを変更しながらブラウザで確認できるツール
別件で探し物をしていたのですが耳よりのツールを見かけましたのでご紹介。

このツールを使うにはブラウザ「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/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」上位(2位でした)に入っていますのでそこをクリック。
    10/18現在「Popular」から探した方が早いです。6位でした。(参考までに作者のURLは
    http://www.chrispederick.com/work/firefox/webdeveloper/
    です)
  • Web Developerのダウンロードページに移動しますので( Install Now )をクリック。
  • ポップアップウィンドウ「ソフトウェアインストール」が出現するので「今すぐインストール」をクリック。


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

ただこのツール、小さくて大きな問題が…
# by tomo0640820 | 2004-10-02 11:19 | お便利サイト
ちと休憩
記事内容にくぎりがついたのでちょっとここで投稿は休憩に入ります。

[ 内 情 ]
息子1歳が最近なかなか寝てくれません(TдT)
今日は寝たのが23時台。夜の帝王。
寝かしつけに何時間も。しくしく。
日中は外出して遊ばせて(=疲れさせて)いるのですが。
一人の時間は少ないのにやりたいことはあれやこれや。
器用じゃないので思考が分断されると使い物になりません。
まとまった時間が欲しいですぅ。
やー、もちろん可愛い盛りなので子育ても楽しいのですけどね。
息子よ、たくさん寝ないと成長ホルモン出ないぞ( -_-)

投稿はかなり控えめになりますがコメントはチェックします。
気にかかる記事は修正&追記かけます。
よそ様のブログにももちろんおじゃましに行きます。
エキブロのコミュニティは打て(投稿すれ)ば響く(反応がある)ので居心地いいです。
では皆様、わたくし当面地味に活動します。ぺこり。
 '04.9.15 TOMO
# by tomo0640820 | 2004-09-15 00:29 | いざマイスキン
CLASS名 図解 Dタイプ
カテゴリ「HTML編集D」をご覧になっていない方は、先にそちらをお読みになることをお勧めします。分かりづらい図解だと思いますので…。

エキブロでマイスキンを作成する際に用意されている基本スキン・Dの「HTML編集」で明示されているCLASS名の図解です。(IDは存在しません)
この他にも明示されていないCLASSがいっぱいあります。
それに関しては「CSS編集 序2 模索編」で模索しています。

カテゴリ「HTML編集D」の図を基に、CLASSで指定されている部分を黄線白色枠で囲み、太字でCLASS名を表示しました。

---------------------------------------------------

「D-3列のレイアウト-左右にメニュー」 全体図


---------------------------------------------------

「D-3列のレイアウト-左右にメニュー」 内部

※配色気持ち悪くてスミマセン…( ´_`;)

※補足を読む方はこちらをクリック
# by tomo0640820 | 2004-09-05 15:55 | CSS編集の友