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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

例えばこんな画像を書いていたとして
[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行目。
[js firstline=”1526″]WRITE_HTML("<body bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");[/js]
ここで body を吐き出してるっぽいので margin:0;padding:0 を追加してみた
[js firstline=”1526″]WRITE_HTML("<body style=\"margin:0;padding:0;\" bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");[/js]
* 編集する場合はバックアップを忘れずに。

方法1の結果

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

できた。

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

適当な場所に(今回はFireworksで作成中のpngを保存しているフォルダでやりました)余白のない適当なhtmlを作成して
プレビューしたくなったら代わりにそれをF5して表示する。
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>preview html</title>
<style type="text/css">
body{margin:0;padding:0;}</style>
</head>
<body>
<img src="example.png" />
</body>
</html>[/html]

方法2の結果

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

できた。

使い道

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.