Fireworksの機能拡張SmartCSSで日本語を書き出す

Freworks デベロッパセンター:Fireworksのデザインを簡単にHTML/CSS化できるSmartCSS拡張機能※これを書いている時点ではバージョン1.2です。

この記事で機能拡張をインストールしようとすると
インストールパス\Configuration\HTML Code\CssLayers.htt
のファイルを上書きしようとするのでバックアップしておく。

テキストレイヤーのレイヤー名が日本語になっているとまずい。なぜならレイヤー名が書き出し先HTML内で<div id=”レイヤー名”>として使われるから。
なのでテキストレイヤーを”t1″,”t2″とかにリネーム。これで基本的にはOK。

CSSのfont-familyのデフォルトを決めておきたい場合は
738行目

        default:
            return font+",osaka, Arial, Helvetica, sans-serif";

とかにしておく。

デザインにMS Pゴシックを使って文章を入れている場合は
2318行目を以下のようにすると警告が出ない。

var fonts = new Array("MS Pゴシック","Arial", "Helvetica", "sans-serif", "Times New Roman", "Times", "serif", "Courier New", "Courier", "monospace",
						"Georgia","Verdana","Geneva","Trebuchet MS");

2352行目をコメントアウト、もしくはs-jisに変更。

//	docwrite("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n");

このSmartCSS、現時点では画像で切り出したものにはHTML上でテキスト情報が入っていないしh1、h2やul、liなどマークアップはされない(SEO的にはアレ)仕様。
この辺り改善できないかCssLayers.httをいじり中。何かあればまた書きます。

関連する記事:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です