Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

Dreameaverをもっと便利に! カスタマイズ&拡張機能をご紹介

f:id:webarekore:20121220181434j:plain

こんにちは! もう年の瀬でかなり寒くなってきました。寒いと手がかじかんで上手く動かず、作業スピードが落ちてしまいますよね……。

少しでも作業効率を上げるために手を温めるのもいいですが、普段使っているDreameaverをカスタマイズするというのもいかがでしょう? ちょっと手を加えるだけで驚くほど便利になっちゃいますよ。

なお今回はDwのconfigurationファイルの書き変えを行うものもあるため、カスタマイズ前にファイルのバックアップを必ず取ってください。

 

 

CSSのコードヒントの順番を変える

CSSで横幅を指定する時、「wi」と入力しコードヒントからwidthと打つつもりが、

f:id:webarekore:20121220182231j:plain

↑のようにwidowsという何に使うんだか分からないものを誤入力……なんて経験ありませんか? 

そんな誤入力を防ぐ為に、コードヒントの順番を変えてしまう方法があります。

 

Program Filesから AdobeAdobe Dreamweaver→configuration→CodeHintsの中に 「CodeHints」というxmlファイルを開きます。

その中からwidowsを検索にかけ↓の部分を見付けます。

f:id:webarekore:20121220182851j:plain

 どうやらここがコードヒントの順列を決めているようです。

 

この部分のwidowsとwidthの順番を入れ替えて……

<menuitem label="width" value="width:" icon="shared/mm/images/hintMisc.gif" />   

<menuitem label="widows" value="widows:" icon="shared/mm/images/hintMisc.gif" />

上書き保存をして、Dwを再起動。そしてCSSファイルで「wi」と打ってみてください。widthが先に来たでしょう?

このようにコードヒントの順番を自分の好みにカスタマイズすれば作業効率UP!

以下のサイトではカスタマイズされたCodeHintsファイルを配布されています。参考にしてみてはいかがでしょうか。

clear sky source 【「第9回 Sugamo.css」と、Dreamweaver CS3 CodeHints.xml拡張 】

http://maboroshi.biz/clearskysource/?p=141 

ちなみにwidowsとは「未亡人」という意味で、CSSとしては「印刷が複数ページにまたがって要素の途中で改ページされる際に、次ページに最低限あって欲しい行数を指定」する時に使うものだそうです。 

 

 

 ・idやclassを認識して閉じタグコメントを生成してくれる拡張機能 

f:id:webarekore:20121220191342j:plain

 

divを重ね過ぎてこの</div>は一体何なんだ……ということにならないようにコメントで

<!--end. #main --> </div>

と入力すれば分かりやすくなりますがいちいち入力するのが面倒だ! という方にオススメの拡張機能です。 

KAYAC DESIGNER'S BLOG 【コメントを生成して挿入するDreamweaver用の拡張機能を作成しました】

 http://design.kayac.com/topics/2010/05/dreamweaver-extention.php

 こちらはidやclass名を自動で認識して一緒にコメントを挿入してくれます。

 Adobe Extention Managerでインストールした後、Dwを起動しメニューのコマンドを最後の方に「閉じタグコメントを挿入」が追加されています。

 

 

・全角カナ⇔半角カナ、全角英字→半角英字、全角数字→半角数字と変換できる拡張子

f:id:webarekore:20121220192220j:plain

 

 全角英字や全角数字はバグの元……それを防ぐ為に全角入力してしまったものを半角に一発で変換できる便利な拡張機能です。

Adobe Dreamweaver 10周年セミナー:全角・半角変換拡張機能
http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_conversion_ext.html

 

こちらもAdobe Extention Managerでインストールした後にDwを起動し、

メニューからコマンド→その他に「機種依存・全角半角を変換」というコマンドが追加されています。

クライアントや制作メンバーから渡されたデータが全角半角ゴチャ混ぜ! という時に役立ちそうです。

 

 

・カンタンにリストを作っちゃう拡張機能

<li></li>をコピペしてからその中に文字を入力って面倒……ですが、これを使えばリスト作りが物凄くラクチンになります!

きんくまブログ 【Dreamweaver 文字列からリストを作成するコマンド 】

http://www.kuma-de.com/blog/2009-01-28/302 

使い方は、まずリストにしたい文字をそのまま入力。

f:id:webarekore:20121220193421j:plain

その文字列を選択して、コマンド→「リストを作成」をクリックすると↓のような画面が出ます。

f:id:webarekore:20121220193507j:plain

リストの形式を選ぶと……

f:id:webarekore:20121220193446j:plain

これだけでリストタグが出来ちゃいました! この拡張機能は個人的に全米が泣いた級の便利さです。

 

 

 ・DreameaverのカラーをSublime Text2風に

カラーが見やすいと評判のエディタ、Sublime Text

f:id:webarekore:20121220194837j:plain

私は使ったことがなかったのですが調べてみると確かにこのカラーは見やすいですね。やはり白背景だと明る過ぎて目が疲れて来てしまいます。

でもDreameaverを環境設定のカラースキームでひとつひとつ変えていくのはちょっと……という方にSublime Text風にするファイルを配布している方がいらっしゃいました。

バシャログ【[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた】

http://c-brains.jp/blog/wsg/11/10/07-223000.php

それでもやっぱり俺はDreameaverを使うんだ! というDwラブ派にお勧めです。

 

以上です。導入してみたいものはあったでしょうか?

便利なDreameaverをもっと便利にしてクールなWeb制作ライフを!