WEB

作業効率化!Dreamweaverのオススメ拡張機能まとめ

作業効率化!Dreamweaverのオススメ拡張機能まとめ

こんにちは。デザイナーのハルエです。

Dreamweaverの数ある機能を十分に活用できてる方ってどのくらいいるのでしょうか?

私の場合、これまで最低限の機能しか使ってこず、操作上でわずらわしく感じることでも我慢してたんです。で、そのわずらわしさも苦痛に感じなくなってきて、いつの間にか慣れちゃってました。いけない子ですね。

そこで今日は以前の私みたいな方のために、作業効率を良くするDreamweaverの便利な拡張機能やおすすめ設定術を紹介させていただきます。

閉じタグコメントを自動挿入:End_comment.mxp

閉じタグコメントはソースの構造をチェックしたりする時に便利なんですが、その都度書いていくのって手間ですよね。

この拡張機能は閉じタグコメントを自動で挿入してくれます。
もちろんIDとclassもちゃんと認識してくれます。

閉じタグコメントを自動挿入してくれる拡張機能

全角、半角変換:character.mxp

全角、半角変換貴機能
Dreamweaverでは置換機能がよく使われていますが、変換機能は標準にはありません。
お客様からもらった原稿の数字やアルファベットが全角だったり半角だったりしませんか?あれ結構直すのめんどくさいんですよね。
この拡張機能は全角の数字やアルファベットを見つけだして半角に変換してくれます。
その逆もできます。
CS3用に作られているのですが、それ以降のCSにも対応しています。

imgタグに”alt”を挿入:no-alt-no-future.dwr

altタグって意外と入れ忘れがあったりしませんか?
altタグは画像が表示されない時に代替テキストを表示したり、画像検索の際に重要となるので入れ忘れは避けたいですよね。
この拡張機能はaltが入っていないimgタグを探し、自動的にalt=””を入れてくれます。

HTML5をタグライブラリーに登録:html5_tag_suites.mxp

CS4以下には新規で追加されたタグが登録されていないので、こちらの拡張機能を入れる事でHTML5のコードヒントが表示されるようになります。
新規ドキュメントでHTML5の選択もできます。

CSSコードヒントのカスタマイズ:CodeHints.xml

CSSコードヒントのカスタマイズ
コードヒントを使いながらCSSを入力するときに、「width」を入れようとしたら一番に出てくる「window」を入力しちゃうってことはないですか?
使わないコードヒントって結構邪魔だったりするんですよね。
「border-color」や「border-left-color」とか。

そのコードヒントを使いやすいようにカスタマイズしてくれたのがこちらです。

なんなら自分用にカスタマイズしちゃってください。

まとめ

すでに基本操作として定着しちゃってる方もいると思いますが、不便に感じててまだ導入していない方はぜひご活用ください!
私みたいにもっと早く知ってればと感じるはずです・・。
多くの方がコーディングしてて「これ無駄に時間使ってる!」って思うことって、大抵お顔も知らないどこかの素敵な方が改善策を用意してくれてたりするんですよね。
本当に本当に感謝です。

どうぞこれからもよろしくお願いいたします。

この記事を書いた人

ハルエ
ハルエ デザイナーチーム 2012年入社
デザイナーの遥江(はるえ)です。 録り溜めたバラエティ番組を観る時間が大好きです。寝付きの良さは誰にも負けません。LINE POP / バブルの女王でもあります(自称)。よろしくお願いします。