01 スタイル設定を活用しWordファイルを効率的に流し込む - WEBの作業が楽になるテクニック総まとめ 第2回 | デザインってオモシロイ -MdN Design Interactive-

01 スタイル設定を活用しWordファイルを効率的に流し込む - WEBの作業が楽になるテクニック総まとめ 第2回

2024.4.24 WED

【サイトリニューアル!】新サイトはこちらMdNについて

WEBの作業が楽になるテクニック総まとめ 第2回



Tips 01
スタイル設定を活用し
Wordファイルを
効率的に流し込む


文=中村和正((株)メタフェイズ)


Wordファイルで制作されたテキスト原稿などをそのままペーストすると意図しないスタイルが入ってしまうため、Wordファイルを避ける人が多い。しかしながらクライアントからWordファイルをもらうことがあるだろう。その場合、Wordファイルをいったんテキストエディタにコピーして貼り付ける方法もあるが、WordファイルとDreamweaverのスタイル設定を調整すれば、より効率的な流し込みを行える。

まずはWordでスタイル設定を行う。書式メニュー→“スタイルと書式”で、「見出し1」は<H1>、「見出し2」は<H2>、段落は<p>に設定したら【1】、次はDreamweaver側のスタイル設定を調整する。編集メニュー→“環境設定”を選択し[環境設定]ダイアログの左側のカテゴリの[コピー/ペースト]を選択する【2】。余計なタグを省きたい場合は[テキストのみ]を選択すればよいのだが、貼り付けてからの調整がたいへんなので[構造付きテキスト]を選択しよう。これで<H1>、<H2>、<p>といったシンプルなタグだけ残して貼り付けられる。あとはDreamweaver側でclass等を設定すればよい【3】【4】。

Word側では、見出しなどのスタイルを設定する
【1】Word側では、見出しなどのスタイルを設定する


Dreamweaverの環境設定でペーストに関する設定を調整しよう
【2】Dreamweaverの環境設定でペーストに関する設定を調整しよう


013
【3】Wordで見出しのスタイル設定を行った状態。段落はそのままでかまわない


【3】をペーストすると、左記のようにDreamwe aver上でタグが設定される
【4】【3】をペーストすると、左記のようにDreamweaver上でタグが設定される



POINT データの入手先と設定ルールを共有する



[INDEX]
>>> 01 スタイル設定を活用しWordファイルを効率的に流し込む
>>> 02 色域指定で選択範囲を作成して効率的に写真の白地を切り抜く
>>> 03 カンプ内の各要素をライブカラーでまとめて色変換する
>>> 04 サムネール作成を自動化して効率化を図る
>>> 05 JPEG形式でもきれいに文字や図形を書き出す
>>> 06 ライブラリアイテムの各種プロパティを一括して変更する
>>> 07 ESCショートカットでActionScriptを簡単に入力する
>>> 08 grep機能を使い複数の文字列を一括で操作する
>>> 09 自動処理で複数の画像をまとめて加工する
>>> 10 Illustrator内で完全にシンボル化しFlashにインポートする
>>> 11 コードナビゲータで適用済みのスタイルを一括で表示する
>>> 12 1ファイルで複数のデザインを管理し修正作業時間を短縮する
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在