最終的にこんなイメージのボタンを作ります。
通常このボタンを作ると、多分こんな感じになると思います。
グレーボタンのイメージを画像アイテムに配置し、その上にHTMLアイテムの文字を重ねる
たしかにこれでも問題ないのですが、もう少しスタイリッシュな方法を考えてみました。
『HTMLの背景イメージとして、グレーボタンの画像を取り込む』という手法です。
注意点として、Freewayのアイテムサイズと読み込む画像サイズが一致している必要があります。Freeway 最適な画像サイズを参考にボタンの画像を用意して下さい。
まずは、HTMLアイテムを作成して下さい(今回は140×40pxにしました。)
次に、ウインドウ＞スタイルとカラーパネルを開き、新規スタイルから背景イメージを追加したスタイルを作成します。
背景イメージを選択し、OKボタンでページビューに戻りましょう。
ページビューだと変化しませんが......
プレビュー画面で確認するとこのように表示されます。
後は、HTMLアイテム内に文字を入力し、横軸方向のセンタリングを実行します
次に縦軸方向のセンタリングですが、コレが一筋縄では行きません。少し小技を使います。まず、文字を改行しましょう。
\
プレビューで見てみると文字が下がりすぎてしまっています。
文字を持ち上げる為に、改行した部分のフォントサイズを小さくします。
ほどよく真ん中に配置されました
0 件のコメント:
コメントを投稿