Freeway 外部スタイルシートを読み込む

Freewayは誰でも簡単にHPを作成できるようになっており、HTMLやCSSの知識が無くてもHPが出来ちゃいます。それはとても便利な事なのですが、HTMLとCSSがとても複雑なモノになってしまいがちです。例えば下記のこのようなメニューもFreewayを使えば簡単に作成できますが、書き出されたHTMLとCSSはすこし複雑.........。
SEO的にもあまりよろしくないので、シンプルなコードを自作して、Freewayにマークアップと外部スタイルシートを読み込んでみたいと思います。

HTMLはこのようなコードになります。

<ul class="menu">

<li><A href="#">ホーム</A></li>

<li><A href="#">ご利用ガイド</A></li>

<li><A href="#">お気に入り</A></li>

<li><A href="#">ログアウト</A></li>

<li><A href="#">ユーザー登録</A></li>

</ul>

(＃はリンク先を任意で指定)

それに対して、文字装飾のCSS

ul.menu{

  position:absolute; 

  left:200px; 

  top:500px; 

  z-index:38; 

  background-color:#DEDE48;

  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic', sans-serif; 

  font-size:10px;

  float:left;  

  padding:0; 

  margin:0;

  }

ul.menu li { 

  float:left;

  list-style:none; 

  margin-left: 20px;

  }

ul.menu a {

   text-decoration:none;

   color:#f00;

    }

ul.menu a:hover {

   text-decoration:none;

   color:#3F63A4; 

    }

ul.menu a:active {

   text-decoration:none; 

   color:#3F63A4; 

    }

それでは、HTMLをマークアップで、CSSを外部CSSとしてFreewayに読み込んでみたいと思います。

先ずは、下記を削除したCSSをメモ帳にコピペして、.cssの拡張子を付けて保存します。

 position:absolute; 

left:200px; 

top:500px; 

z-index:38; 

2.3.4.5行目を削除。アイテムの位置情報はFreewayのマークアップアイテムの位置情報が利用されるため不要になります。

次にFreewayのメニュー＞挿入＞マークアップアイテムを作成し、HTMLをコピペした後、アイテムの大きさを整えます。

プレビューすると、文字装飾がされていないのでこうなります。

それではスタイルシートを読み込みます。メニュー＞ページアクション＞ESS-Use External Style Sheetを適用します。

アクションパレットで先ほど作成したCSSファイルを選択します。

Delete Embedded Styleのチェックを外します。

プレビューしてみるとCSSが読み込まれ文字装飾されています。

読み込まれたCSSファイルは、Site Folder内のResourcesフォルダの中に書き出されます。