Codaのzen-codingプラグイン(TEA for Coda)を好きに編集して便利な展開タグを追加する方法 #CSS

TEA-for-CodaはCodaにzen-codingを入れるプラグインです。
ダウンロードはこちら

こちらのプラグインにデフォルトで入っているzen-coding以外を好き勝手追加する方法を紹介します。

Codaを知らない方はこちら

紹介サイト: DreamweaverからCodaに変えました-webクリエイターボックス
公式サイト: http://www.panic.com/jp/coda/

zen-codingを知らない方はこちら

好き勝手に編集する

TEA-for-CodaをCodaにインストールしたあと、
「/Users/username/Library/Application Support/Coda/Plug-ins/TEA for Coda.codaplugin」を右クリックし、「パッケージの内容を表示」を選択します。

表示されたパッケージの中からさらに階層を潜り、
「Support/Library/zencoding/zen_settings.py」
へとアクセスします。
こちらの「zen_settings.py」ファイルに、展開コマンド(デフォルトでは[コマンドキー]+[,])を押した場合に展開する内容が記述されています。

内容例(25行目~のcssの展開コマンド一覧一部抜粋)

    'css': {
        'extends': 'common',
        'snippets': {
            "@i": "@import url(|);",
            "@m": "@media print {\n\t|\n}",
            "@f": "@font-face {\n\tfont-family:|;\n\tsrc:url(|);\n}",
            "!": "!important",
            "pos": "position:|;",
            "pos:s": "position:static;",
            "pos:a": "position:absolute;",
            "pos:r": "position:relative;",
            "pos:f": "position:fixed;",
            ……

ちなみに、500行目あたりからhtml関連の内容が記述されています。

ようは、この形式にしたがって記入すれば、どんなものもzen-codingコマンドで展開できるわけです。

たとえば、スマートフォンサイトのコーディングをする方は、メディアクエリを登録しておくとか、css3のベンダープレフィックスを登録しておくとか、いろいろ方法があると思います。

例

//追記後はCodaの再起動が必要っぽい
"bdrs:mz": "-moz-border-radius:|;",
"bdrs:wk": "-webkit-border-radius:|;",
"bdrs:op": "-o-border-radius:|;",
"bdrs:ms": "-ms-border-radius:|;",

もちろん、こういったお固いタグじゃなくても、なんでも自分の好きなものを登録できます。
これでCodaを強化して、作業効率をさらにアップしましょう！