Zen-Codingを自分なりにカスタマイズしてさらに効率化する方法

朝型になりたい、@cappeeです。

Dreamweaverでコーディングを効率良く行うために私もみんな大好きZen-Codingを使っています。

でも使っているデザインソフトやコーディングルールによって「展開後のコードを変えたい!」という時もあります。ので、カスタマイズしてみたところ、結構効率化できたと思うのでその方法と実際に変更したサンプルをまとめたいと思います。

Zen-Codingのカスタマイズ

下記のファイルを開きます。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver (バージョン)\ja_JP\Configuration\Commands\ZenCoding\zen_settings.js

zen_settings.js ファイルには展開前と後のコードが一覧で記述されているので、自分の使いやすいように編集してください。

“展開前”: “展開後”
“bgc”: “background-color:#FFF;”

「|」を書くと展開後にそこにマウスのポインターが来ます。

CSSのカスタマイズサンプル

今回修正したのは主にCSSですが、変更した点をメモしておきたいと思います。

修正

主な変更理由ですが、デザインはFireworks CS6を使用しているので、カラーコードは#付きで1クリックでコピーできます。CSSファイルに貼り付ける時は#なしでカラーコードのところにマウスポインターが来るのがベストです。よく展開するプロパティにそのあたりを適用しました。

colorcode Zen Codingを自分なりにカスタマイズしてさらに効率化する方法

"bgc": "background-color:#FFF;",→"bgc": "background-color:|;",
 "bd+": "border:1px solid #000;",→"bd+": "border:1px solid |;",
 "bdt+": "border-top:1px solid #000;",→"bdt+": "border-top:1px solid |;",
 "bdb+": "border-bottom:1px solid #000;",→"bdb+": "border-bottom:1px solid |;",
 "bdl+": "border-left:1px solid #000;",→"bdl+": "border-left:1px solid |;",
 "bdr+": "border-right:1px solid #000;",→"bdr+": "border-right:1px solid |;",
 "c": "color:#000;",→"c": "color:|;",

追加

ブロック要素をセンタリングする際によくつかうので、追加しました。デフォルトの「:」を打つのも面倒なので、今度全部の「:」をとって使ってみようかなと企んでいます。

"m:0a": "margin:0 auto;",

まだまだカスタマイズできそうなので、色々と試してみたいと思います。

[参考サイト]
DreamweaverでZen Codingの展開後の文字をカスタマイズするには? 

Pocket
article clipper Zen Codingを自分なりにカスタマイズしてさらに効率化する方法