nyatla＠Hatena::Diary

グローバルリンクリストの作り方講座３ アイコン画像表示設定編

01:07 |

アイコン画像の表示方法についての説明です。

NavigationRingのアイコン画像（リング上に表示される画像）には、以下の設定をすることができます。

1. アイコン画像の表示方法
2. アイコン画像のimgタグCSSTEXT

設定するには？

拡張設定のアイコン画像の表示設定にチェックを入れます。

設定：アイコン画像の表示方法

アイコンに使う画像の表示サイズを変える方法と、そのパラメータを指定できます。

表示方法により、さらにパラメータ(拡縮比率、横幅、縦幅)を設定する必要があります。詳細は各方式の説明を見てください。

選択できるモードの種類

1. オリジナルサイズで表示
2. アイコンの元画像と同じ
3. 元画像を拡縮比率に拡大(縮小)して表示
4. 横幅と縦幅を固定して表示
5. 横幅を固定して表示
6. 縦幅を固定して表示
7. 縦横比率を維持したまま横幅を固定して表示
8. 縦横比率を維持したまま縦幅を固定して表示

オリジナルサイズで表示

アイコンの元画像をそのまま表示します。パラメータは使いません。

元画像を拡縮比率に拡大(縮小)して表示

アイコンの元画像を拡縮比率％に拡大・縮小して表示します。

横幅と縦幅を固定して表示

アイコン画像を縦幅[px]×横幅[px]の固定サイズにして表示します。

横幅を固定して表示

アイコン画像の縦幅はそのまま、横幅のみを横幅[px]の固定幅にして表示します。

縦幅を固定して表示

アイコン画像の横幅はそのまま、縦幅のみを縦幅[px]の固定幅にして表示します。

縦横比率を維持したまま横幅を固定して表示

横幅を横幅[px]にして、縦幅は画像比率を維持したまま自動的に計算します。

縦横比率を維持したまま縦幅を固定して表示

縦幅を縦幅[px]にして、横幅は画像比率を維持したまま自動的に計算します。

設定：アイコン画像のimgタグCSSTEXT

アイコン画像の表示スタイルを変えるCSSテキストを指定します。CSSテキストはアイコン画像のimgタグのstyle属性にそのまま指定されます。

※CSSテキストの内容によっては、CSS補正値に補正値を指定する必要があります。また、px以外の単位で座標値を指定することは出来ません。

サンプル１

枠線をつける

CSS TEXT	border-style:solid;border-color:black;border-width:1px;
補正値x	2
補正値y	2

補正値は、イメージサイズを指定ピクセルだけ大きく見積もって座標計算をさせるために使います。NavigationRingはCSSでの幅値設定を自動で計算できないため、border-width,margin値を使用するときには、補正値を指定しなければなりません。

サンプル２

半透明にする

CSS TEXT	opacity:.80;filter:Alpha(opacity=80);padding:5;background-color:green;
補正値x	0
補正値y	0

透過度設定をする場合には、opacity:.80;filter:Alpha(opacity=80)のように２種類指定する必要があります。