« EspressoとMAMP | トップページ | Espresso、いい! »

EspressoでWordPressのcssをカスタマイズする。

es-01.jpg
EspressoはCSS編集エディタ、CSSEditが前身だそうです。
Codaより使いやすいと感じたのは、外部cssとの取り合いです。
 
感じとしては、FiireFoxのFireBug、Dreamweaverのインスペクタ、コードナビゲータ。
上の、赤く囲んだもの、「Style Sheets」に、プレビューされているサイトに関連するスタイルシートの数が出ていて、小さな下三角が見えます。
これを押すと
 
  es-02.png
スタイルシートの名前と、そのシートがどのフォルダに入っているかが表示されます。
そして、そのスタイルシートを選ぶと
 
es-09.jpg
選んだスタイルシートをオーバライドするのかときいてきます。
 
es-10.png
編集しますよと選ぶと、
先ほど選んだファイルの内容で、ファイル名の頭に「extraxted-」と接頭語の付いたファイルが
自動生成されます。
 
なので、このまま保存すると別ファイルということになり
意識的に接頭語をとって保存しないと、上書きにはならないようになっています。
 
es-11.jpg
プレビュー画面に戻り、「Style Sheets」の隣の「Inspector」を押します。
 
es03.jpg
濃いグレーの小さなウインドウが開きます。
 

es-04.png
その状態で、プレビューしているファイルの要素をクリックすると、選択することができ、
グレーのウインドウに、どのファイルの、なんというid,もしくはclassが設定されているかが表示されます。
 
 
そしてグレーのウインドウ内の要素を選択すると
es12.png
自動生成されたファイルの、その項目が選択された状態で表示になります。
 
cssはコードを直接書きこむことも、右側下のパレットから入力することも出来ます。
そこで設定されたコードがどんな外観になるかは、右側上の、NAVIGATORとプレビューに即座に反映します。
 
もちろんいきなり「Inspector」で要素を選んで、オーバーライドを始めることも出来ますよ。
ちょっと感動的なレスの速さです。
 
 
 

|

« EspressoとMAMP | トップページ | Espresso、いい! »

Macを使ってマス。」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



« EspressoとMAMP | トップページ | Espresso、いい! »