Dreamweaverのテンプレートで条件付きコメントを使う方法
Dreamweaverで条件付きコメントがリンク切れする時。
IEの各バージョンに対応するCSSやJSを読み込むため等の理由で「条件付きコメント」を使う場合があります。
条件付きコメントを使うと、条件対象ブラウザ以外ではファイル自体を読み込まないので、Webサイトの高速化にもつながります。
そんな便利な条件付きコメントですが、Adobe Dreamweaverの「テンプレート」で使おうとすると少し工夫が必要なようです。
通常の条件付きコメント(IE9未満に適用)
<!--[if lt IE 9]> <script src="../common/js/html5shiv.min.js"></script> <![endif]-->
しかしこの場合、<script>がコメント扱いとなってしまい、
テンプレートを適用したページではリンク切れとなってしまう可能性があります。
解消するには?
そこで、Dreamweaverのテンプレートのパラメータ機能「@@()@@」を使ってそれを解消します。下記のようにコメントタグを切り分けることで、テンプレート上でのコメント機能を無効化、<script>をHTMLタグとして認識させることが出来ます。
調整した条件付きコメント(IE9未満に適用)
@@('<')@@@@('!--[if lt IE 9]>')@@ <script src="../common/js/html5shiv.min.js"></script> @@('<![endif]--')@@@@('>')@@
このように記述すると「ソースフォーマットの適用」を行っても崩れません。
是非一度お試しください。