2012年3月29日木曜日

Freeway 設定したMetadescriptionとkeywordを確認する

設定したMetadescriptionとkeywordがちゃんと認識されているか心配ですよね。このサイトでURLを入力するだけで確認する事が出来ます。


結果こうなりました。

ちなみにAppleのサイトはこのように設定されていました。

2012年3月28日水曜日

Freeway メタタグを設定するAction

以前Metaタグを設定する方法を解説しましたが、Actionでより簡単に設定する事が出来るようなので紹介したいと思います。Add Meta TagsというActionです。
設定したいページを選択して、ページ>ページアクション>Add Meta Tagsでパラメーターに入力していくだけです。

Google検索でスペニットがこのように表示されました。


2012年3月27日火曜日

Freeway 画像をダウンロードさせない

画像をダウンロードさせにくくするActionがあるのですが、シェアウェアなので検証していません。(15ドル)
お金に余裕ができたら使ってみたいですね。
ImageGuardian

2012年3月26日月曜日

Freeway ファビコンを作る

ファビコンとは、URLの前にくるアイコンの事です。ちょつとした事ですが、素人臭さが抜けていいですよね。とても簡単に作成できますのでぜひチャレンジしてみて下さい。

1.まずファビコンにしたい画像を用意します。その画像をファビコンのデータに変換するのですが、とても便利なサイトを見つけました。下記のサイトで自動的にファビコンデータに変換してくれます。

変換に10〜20秒ほどかかります。変換が終わったらデータをダウンロードしましょう。
favicon.icoとanimated_favicon1.gifファイルが入っているはずです。

次にfreewayにFaviconのアクションをインストールして、SiteFolderを選択し、ページ>フォルダアクション>faviconを選びます(ページごとでも設定できます。)アクションパレットで、上段には.icoファイル、下段には.gifファイルを指定します。


FierFoxではアニメーションファビコンに対応しているので右から左に動きます(safaiは対応していません)

2012年3月23日金曜日

Freeway ボタンでページがスライドするアクション

Caruselという機能らしいのですが、このようなページを作成するアクションです。
下記の様なパーツ構成になります。
2ページ以降は表示されないので、配置はどこでも構いません。

そして、各パーツにアクションを指定して行きます。

更に、各アクションの設定をします。


EffectDurationはページがスライドする早さ、Axisはページがスライドする方向です。

Freeway リストブレットにオリジナル画像を使う

Freewayのリストブレットは●○□で味気ないので、オリジナルの画像を使ってみたいと思います。


使用するアクションは、List item imagesです。
1.HTMLアイテムを作成し、ボックス内でダブルクリック入力状態にする。
2.インスペクタのリストでリストを作成する。
3..HTMLアイテムを選択し、アイテム>アクション>List item imagesを適用
4.アクションパレットのパラメーターでブレットに適用したい画像を選択
で簡単に作成できます


2012年3月17日土曜日

Freeway メールアドレスをクリックでメーラーを立ち上げる

お問い合わせフォーム等で、メールアドレスをクリックすると、メラーが自動で立ち上がるようにします。
ハイパーリンクで、外部>mailto:を選んでメールアドレスを入力するだけです。

2012年3月16日金曜日

Freeway Googleカレンダーを挿入する

Freewayではカレンダー機能が備わっていませんが、Googleカレンダーを簡単に導入する事が出来ます。webカレンダーなのでどこでも更新できて、サイトにリアルタイムで反映されるのでむしろこの方が便利ですね。

1.googleカレンダーのアカウントを作成し、カレンダーの設定を開きます。

2.このカレンダーを共有を選びます。


2.カスタマイズボタンを選び、お好みのカレンダーを作成して下さい。



3.カレンダーが出来上がったら、HTMLソースをコピーします。


4.FreewayでHTMLアイテムを作成し、メニュー>ページ>HTMLマークアップにソースを貼付けます。

5.プレビューしてみるとこうなりました。

2012年3月15日木曜日

Freeway 線を書く

Freewayには線を書く専用のツールは存在しませんが、HTMLアイテムで線を表現する事が出来ます。

1.HTMLアイテムを作成し、希望の太さのピクセルにします。

2.次に線の色を指定します。

3.プレビューで見るとこうなります。



2012年3月14日水曜日

Freeway 利用規約に同意するボタンを設置

サイトの利用規約に同意してから利用してほしい場合は、下記の様なボタンを設置しましょう。Validateというアクションを使います

1.使用するパーツは3つです。
2.チェックボックスに対してValidateを適用します。

3.チェックボックスを選択し、メニュー>フォーム設定パネルを開きます。

4.フォーム設定に『javascript:window.location = 'http://kagutan.com' 』と入力します。=オレンジ文字はクリックした時に移行するページを指定します

2012年3月13日火曜日

Freewayの投稿数もようやく50ポスを超えました

今年に入ってから始めたこのBlogですが、Freewayの投稿数もようやく50ポスを超えました。
アクセスして頂いている方も毎日少しずつ増えていて、うれしい限りであります!

投稿に関しては誤字脱字や分かりにくいなど、色々あると思いますがお役に立てていますでしょうか?

私の知らない使い方や便利な機能をご存知であれば、どしどしご連絡ください。検証して投稿したいと思います。

ヘッダー下のメニューバーに『Freewayあれこれ』というFreewayネタの一覧を作っていますのでご覧アレ

投稿がお役にたったら『おすすめボタン』をポチって下さい!↓

Freeway どのパーツが読み込みに時間がかかっているか調べる


Safariには「Web インスペクタ」という機能があって、これを使うと任意のページの構成要素の読み込み時間を計測できたりします。どの画像やスクリプトが読み込みに時間がかかつているか簡単にチェックが出来る優れものです。

1.safariを立ち上げて環境設定パネルから『メニューに“開発”メニューを表示』にチェックを入れます。

2.safari>メニュー>webインスペクタを表示にチェックを入れます。

3.ネットワークの項目を見ると、そのパーツの読み込みにどれくらいの時間がかかっているか一目で分かります。サイトの改善にとても役に立ちますね。



2012年3月12日月曜日

Freeway フロー機能を使ってみる

Freewayにはフローという機能があります。長文を複数のHTMLアイテムにまたがって表示するという、使ってみるとすごく便利な機能の一つです。

1.このような長文をフロー機能を使って分散したいと思います。

2.HTMLアイテムを追加しました。

3.フローボタンを押して、繋げて行きたい順に選択して行きます。
HTMLのサイズを調整して、文章の配置も変更で

4.プレビューしてみるとこうなりました。

Freeway ハイパーリンクにアンカーを指定する

ハイパーリンクをページの指定した位置までジャンプさせる方法です。

1.ジャンプさせたい場所にアンカーを定義します。

2.アンカーに分かり易い名前を付けましょう


3.最後にハイパーリンク先でアンカーを指定します。

Freeway テーブルの拡張属性


Tableツールは、簡単に表組を作成してくれるとても便利なツールです。しかしパラメーターが少なく、思い通りのTableが作成でない場合もあります。
こそで拡張属性を使って思い通りの表組を作成して行きましょう。
Tableを拡張するには、Table全体を拡張する場合と、内部のセルを拡張する場合の2パターンがあります。
まずはTableを作成しましょう。分かり易いようにデフォルトのパラメーターは全て0にしておいて下さい(プレビューしても何も表示されません)

次にTableを選択し(セルではない)アイテム>拡張属性を開いてみましょう。<table><div><div style>の3種類で拡張できるのが分かります。
自分の拡張したい要素によりこの3種類の中から選んで定義していきます。

<Table>タグの解説を調べてみると、『<table>内に<TR>で表の横一行を定義して、さらに見出しを定義するヘッダセル<TH>やデータを定義するデータセル<TD>を定義して行く.......』とあります。
若干頭がこんがらがってきましたが、あまり難しく考えず、とにかくTableの背景色を緑に変更してみましょう。
bgcolor:green と入力してください。

プレビューでこんな感じになりました。

引き続き、Tableの外枠線の色を変更してみましょう。変更内容が属性になるので、<table>タグにstyleを追加し、属性の名前と値を入力して行きます。
名前 style  値 border:10px red solid

プレビューでこんな感じになりました。


HTMLの知識が無いと難しく感じますが、何となく理解できてきましたね。

次回に続く..........

2012年3月8日木曜日

Freeway HTMLで画像付きのボタンを作成する

背景イメージを利用して、HTMLアイテムで画像付きのボタンを作成してみたいと思います。
最終的にこんなイメージのボタンを作ります。

通常このボタンを作ると、多分こんな感じになると思います。
グレーボタンのイメージを画像アイテムに配置し、その上にHTMLアイテムの文字を重ねる

たしかにこれでも問題ないのですが、もう少しスタイリッシュな方法を考えてみました。
『HTMLの背景イメージとして、グレーボタンの画像を取り込む』という手法です。
注意点として、Freewayのアイテムサイズと読み込む画像サイズが一致している必要があります。Freeway 最適な画像サイズを参考にボタンの画像を用意して下さい。

まずは、HTMLアイテムを作成して下さい(今回は140×40pxにしました。)

次に、ウインドウ>スタイルとカラーパネルを開き、新規スタイルから背景イメージを追加したスタイルを作成します。

背景イメージを選択し、OKボタンでページビューに戻りましょう。

ページビューだと変化しませんが......
プレビュー画面で確認するとこのように表示されます。
後は、HTMLアイテム内に文字を入力し、横軸方向のセンタリングを実行します

次に縦軸方向のセンタリングですが、コレが一筋縄では行きません。少し小技を使います。まず、文字を改行しましょう。
\
プレビューで見てみると文字が下がりすぎてしまっています。
文字を持ち上げる為に、改行した部分のフォントサイズを小さくします。
ほどよく真ん中に配置されました