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

スキップメニュー：コンテンツへ｜ナビゲーションへ

もっと快適にインターネットを活用できるブラウザ達

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

2010年 6月 26日 |

fireworks |

Comments (1)

例えばこんな画像を書いていたとして

ブラウザでプレビューすると、こうなると思います。

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

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

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

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

WRITE_HTML("<body bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");

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

WRITE_HTML("<body style=\"margin:0;padding:0;\" bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");

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

方法1の結果

できた。

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

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

<!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>

方法2の結果

できた。

使い道

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

WRITE_HTML("</head>\n");

1件のコメント »

初めまして！

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

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

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

コメント by BLUEBERRY CHEESECAKE — 2012年1月24日 @ 09:21

この投稿へのコメントの RSS フィード。 TrackBack URL

コメントする

乱雑モックアップのフィード

乱雑モックアップらんざつ[乱雑] （名・形動）[文]ナリ入り乱れていること。乱れていて秩序がないこと。また、そのさま。