例えばこんな画像を書いていたとして
[image]Fireworksで作成中の画像

ブラウザでプレビューすると、こうなると思います。
[image]ブラウザプレビューした時のスクリーンショット

ブラウザがデフォルトで持っている body の margin や padding が効いているからこうなるのは当然なんだけど
なかには余白無しでプレビューしたいなぁと持っている人がいるかもしれないし、
余白をなくしたい気分になる時がいつか来たりするかもしれないので(こないと思うけど)消す方法を考えてみました。

方法1 / プレビュー用のhtmlテンプレがどっかにあるハズだ。

Dreameweaverにもテンプレートhtmlがあるし、Fireworks も adobe だからあるでしょうと探したらありました。

WindowsXPの場合
C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\HTML Code\Dreamweaver\SLICES.XTTの1526行目。

ここで body を吐き出してるっぽいので margin:0;padding:0 を追加してみた

* 編集する場合はバックアップを忘れずに。

方法1の結果

[image]SLICES.XTTを変更したプレビュー

できた。

方法2 / 保存したpngをあらかじめ用意した余白のないhtmlに読み込ませる

適当な場所に(今回はFireworksで作成中のpngを保存しているフォルダでやりました)余白のない適当なhtmlを作成して
プレビューしたくなったら代わりにそれをF5して表示する。

方法2の結果

[image]htmlを作成してそれをプレビューの代わりにした結果

できた。

使い道

余白を消すだけじゃあまり意味がないので、背景画像を先に作っておいて background で読み込むような css を書いておけば
デザイン中のイメージが湧きやすくなったりしないかしらね?
ちなみに<head>は1523行目


One thought on “Fireworksでブラウザプレビューした際の余白を消す。

  1. 初めまして!

    参考にさせていただきました!
    CS5.1でも適用できました!

    macのXTTファイルの場所はここでしたー!
    /Applications/Adobe Fireworks CS5.1/Configuration/HTML Code/Dreamweaver/SLICES.XTT

    すばらしいとおもいます!
    ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.