風のまにまに号
Dreamweaverを使うメリットの１つはデザインした結果を見ながら制作できるところ（デザインビュー機能）なのですが、MTのテンプレートのようにCSSでできているドキュメントは、そのままではデザインビューすることができません。上の図は、現在の「風のまにまに号」のMain IndexテンプレートをDreamweaverで開いたところですが、CSS非対応のブラウザで見た時のように、ページ内の要素が順番にだらだらと羅列されてしまいます。
CSSをデザインビューする一番よい方法は「デザインタイムスタイルシート」という機能を使うことです。
操作手順は、まずメニューで「ウィンドウ」→「CSSスタイル」を選択してCSSスタイルパネルを表示します。（既に表示されている場合は必要ありません）次に、下の図のようにCSSスタイルパネルのサブメニューを開いて、「デザインタイムスタイルシート」を選択します。
すると、ダイアログボックスが出てくるので、左上の「+」ボタンをクリックして、ローカルにダウンロードしてあるウェブログのCSSファイル（styles-site.css）を選択して「OK」をクリックします。
すると、Dreamweaverの中でこのMain IndexテンプレートとCSSファイルが関連付けられ、下の図のようにブラウザでの表示に近い状態でデザインビューすることができます。
もちろんデザインビューするだけであれば、この方法以外にも、テンプレートに記述されているCSSファイルの呼び先、
<link rel="stylesheet" href="<$MTBlogURL$>style-site.css" type="text/css" />を
<link rel="stylesheet" href="/style-site.css" type="text/css" />のように書き換えてしまえば、Dreamweaverに認識させることはできます。（ルートパスでも相対パスでも可）ただし、この方法ではテンプレート自体の汎用性が落ちてしまうというデメリットがあります。
デザインタイムスタイルシートで設定した場合でも、Dreamweaverでファイルを開くたびにその都度設定し直さなければならない、という事ではなくて、１回設定してあげれば次回以降ずっとこの設定が保存されます。（そのためには、あらかじめきちんと「サイトの定義」をしておく必要はありますが・・）この設定は、ローカル内のテンプレートと同階層に生成される「_note」というフォルダの中に定義ファイルとして記録されています。そのため、テンプレート自体のhtmlを改変することなくいつでも変更可能なのが便利な点です。
例えば、ウェブログのデザインリニューアルを考えていて、いくつか複数のパターンを試してみたいときなどには、ローカルに複数のCSSファイルを用意して、デザインタイムスタイルシートを適宜切り替えながら制作を進める、といったような使い方ができます。最終的に採用されたCSSファイルのみをstyles-site.cssのファイル名に変えてアップしてやるだけでOKなので、テンプレート内のパスは汎用的な形のまま残しておきましょう。
コメントする