フォローする

【テクニック】ナビゲーションの装飾

今回はナビゲーションをより見やすくするちょい足しテクニックをご紹介します。
ナビゲーションの基本的な設定はこちら

デザインパネル コンテンツタブ 「ナビ」

を参照ください。


<完成イメージ>

普通にナビゲーションを設定してしまうとテキストリンクのみで少し寂しいですよね?
そこで今回は

・背景色の変更
・文字色の変更
・大きさの変更

を行い、よりお馴染みのナビゲーションぽく装飾していきます。

 

<上下幅の設定>
よりボタン風にするには上下の幅を増やしていく必要があります。
まず、「デザインタブ」を選択し、その次に「ナビ[リスト]:アイテム」が選択されている状態にします。

その上で「デザインタブ」内の「余白」の設定を変更します。

既に左右については位置合わせの為に設定されていると思いますので、ここでは上下の余白を設定していきます。上記例では上下ともに「10pix」で設定しています。大きさなどはお好みで調整ください。

 

<背景色とフォントカラーの設定>
次に背景色とフォントカラーを変更します。
先ほど余白を調整したところのすぐ下に背景カテゴリがありますので、そこから「背景色」を選択しお好みのカラーに変更してください。

その後、デザインパネルの上の方にいくとフォントカテゴリがありますのでその中から「フォントカラー」を変更します。今回は背景が赤なのでフォントカラーを白にしております。


以上で完成です。
余白で大きさを設定できれば後は指定箇所の色を変更するだけなので簡単に実装可能です。応用編として背景色を引くのではなく、背景画像を引いても同様の事が可能です。但し背景画像を引く場合はサイズ等に気を配らないと綺麗にできないのでご注意ください。

このテクニックはナビゲーション以外でも使えますので是非試してみてください!

 

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント

Powered by Zendesk