2013年3月1日金曜日

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 Pゴシック','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フォルダの中に書き出されます。

0 件のコメント:

コメントを投稿