入力バーのスキン その3
前回の続きです。
注意
「前のページのアイコン」と「次のページのアイコン」という設定項目が、重複してそれぞれ3つずつ表示されています。しかし実際に設定する内容は全て異なっており、一部の項目は表記と設定内容が一致していません。
ここでは上から順番ごとに「1.」「2.」「3.」と番号を割り振ります。
1.前ページのアイコン/次ページのアイコン
入力ウィンドウのページを移動するボタンのアイコンを設定します。
画像について
ここで入力する内容は、画像のファイル名になります。このスキンのフォルダー内に画像ファイルを置き、その画像ファイルのファイル名を指定します。
画像のフォーマットはPNG形式です。
前のページのアイコン
1つ前のページに移動するアイコンです。左向きの三角です。
次のページのアイコン
1つ次のページに移動するアイコンです。右向きの三角です。
例
別のアイコンを指定した例です。
2.前ページのアイコン/次ページのアイコン
前のページに戻るアイコンの配置位置を設定します。単位はピクセルです。
原点は右上です。
表記と設定内容が一致していないので注意してください。
前のページのアイコン
横方向の調整値です。単位はピクセルです。
次のページのアイコン
縦方向の調整値です。単位はピクセルです。
マージンによる補正について
いずれの値も、入力された数値に加え、マージンによる補正値が加わります。3.前ページのアイコン/次ページのアイコン
次のページに進むアイコンの配置位置を設定します。単位はピクセルです。
原点は右上です。
表記と設定内容が一致していないので注意してください。
前のページのアイコン
横方向の調整値です。単位はピクセルです。
次のページのアイコン
縦方向の調整値です。単位はピクセルです。
マージンによる補正について
いずれの値も、入力された数値に加え、マージンによる補正値が加わります。アイコンの配置位置の例
以下のようなアイコンの配置にするために、どのような値を入力すればよいのか見てみます。画像のサイズ
画像のサイズは、24x24ピクセルです。マージン
マージンの設定は、以下のようになっています。
設定値
それぞれのアイコンの配置位置は以下のようになります。
Fill Background Vertical rule/Fill Background Horizontal rule
背景画像の描画方法を以下のメニューから選択します。
背景画像の描画方法について
状態パネルの大きさと背景画像の大きさが合わない場合、メニューで選択された方法で背景画像の描画を調整します。この時、「マージン」で指定された部分は、この設定で指定する描画方法の対象外になります。
例えば各マージンに「4」を指定した場合、背景画像のおおよそ周囲4ピクセルはボーダー（枠）として扱われ、余白を描画するのに利用されます。
余白の描画は状態パネルの大きさに応じて自動的に拡大縮小が行われます。
従って、背景画像のボーダー部分を除外した部分がここでの設定の対象になります。
こうすることで、ボーダー部分の拡縮による歪みを軽減しています。
もしボーダー部分が歪む場合は、画像のボーダー部分を小さくすると良いでしょう。
ちなみに、PNGのアルファチャンネルを考慮した描画を行うため、アルファチャンネルで指定した透過度が反映されます。
Fill Background Vertical rule
背景画像の縦方向の描画方法を指定します。Fill Background Horizontal rule
背景画像の横方向の描画方法を指定します。コピー
インプットウィンドウの余白部分を除いた領域が全て埋まるように、繰り返し背景画像が描画されます。リサイズ
インプットウィンドウの余白部分を除いた領域が全て埋まるように、背景画像が拡大縮小され描画されます。Fill Background Vertical rule/Fill Background Horizontal ruleの例
「Fill Background Vertical rule」と「Fill Background Horizontal rule」の使用例です。例で使用する背景画像について
背景画像は以下の画像を用意しました。
画像サイズは、72x48ピクセルです。
例で指定しているマージンについて
例で指定している「マージン」は、以下のようになっています。コピーの例
ここでは、「Fill Background Vertical rule」と「Fill Background Horizontal rule」両方に「コピー」を選択しています。背景画像のボーダーを除いた部分が、候補ウィンドウの背景を埋めるように繰り返し描画されていることが分かります。
リサイズの例
ここでは、「Fill Background Vertical rule」と「Fill Background Horizontal rule」両方に「リサイズ」を選択しています。背景画像のボーダーを除いた部分が、候補ウィンドウの背景を埋めるように拡大描画されていることが分かります。
