読者です 読者をやめる 読者になる 読者になる

元派遣プログラマの自称技術系ブログです。雑記とか自作のオープンソースプロジェクトの話とか。
Javaとか組込とかできます。お仕事ください。

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

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


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以外の単位で座標値を指定することは出来ません。

サンプル1

枠線をつける


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

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

サンプル2

半透明にする

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

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