スキンメニュー その2
前回の続きです。
オーバーレイ画像
オーバーレイ画像を指定します。オーバーレイ画像について
オーバーレイ画像は、背景画像より前かつメニューに表示される文字の後ろに表示される画像です。画像について
ここで入力する内容は、画像のファイル名になります。このスキンのフォルダー内に画像ファイルを置き、その画像ファイルのファイル名を指定します。
画像のフォーマットはPNG形式です。
例
オーバーレイ画像にUbuntuのロゴを指定した例です。メニューの左上に表示されています。
Overlay dock position
オーバーレイ画像の配置位置（左上描画原点）を以下のメニューから選択します。
例について
以下の各メニュー項目選択時の画像は、Ubuntuのロゴを「オーバーレイ画像」に指定しています。画像のサイズは22x22ピクセルです。
左上
画像の描画位置は、状態パネルの左上です。上
画像の描画位置は、状態パネルの上中央です。
右上
画像の描画位置は、状態パネルの上中央です。
左
画像の描画位置は、状態パネルの左中央です。
真ん中
画像の描画位置は、状態パネルの中央です。
右
画像の描画位置は、状態パネルの右中央です。
左下
画像の描画位置は、状態パネルの左下です。
下
画像の描画位置は、状態パネルの下中央です。
右下
画像の描画位置は、状態パネルの右下です。
Overlay X offset/Overlay Y offset
オーバーレイ画像の配置位置を調整します。Overlay X offset
「Overlay X offset」は横方向の調整値です。負の値を指定すれば、オーバーレイ画像が左に移動します。
正の値を指定すれば、オーバーレイ画像が右に移動します。
単位はピクセルです。
Overlay Y offset
「Overlay Y offset」は縦方向の調整値です。負の値を指定すれば、オーバーレイ画像が上に移動します。
正の値を指定すれば、オーバーレイ画像が下に移動します。
単位はピクセルです。
例
上記「Overlay dock position」の「真ん中」の例を利用して、画像を中心に配置するよう値を調整します。画像を中心に配置するには、「Overlay X offset」に「画像の幅 / 2」の負の値を入力し、「Overlay Y offset」に「画像の高さ / 2」の負の値を入力します。
画像のサイズは22x22ピクセルなので、それぞれに「-11」を入力します。
以下のようにオーバーレイ画像が状態パネルの中心に表示されるようになりました。
有効なメニューの色
選択されているメニュー項目の背景色を指定します。ボタンをクリックすると、色選択画面が表示されるので色を選択します。
赤
例として色を「赤」に設定すると、以下のようになります。
区切り線の色
メニュー項目の区切り線（セパレーター）の色を指定します。ボタンをクリックすると、色選択画面が表示されるので色を選択します。
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」の使用例です。例で使用する背景画像について
背景画像は以下の画像を用意しました。
見やすくするため、この背景画像は拡大して表示しています。
実際の画像サイズは、24x24ピクセルです。
使用したの背景画像
例に使用した背景画像は以下の画像です。
ボーダーについて
画像の黒の部分はボーダーとして使用する部分です。黒の部分のサイズは画像の上下左右の端から4ピクセルになります。
例で指定しているマージンについて
例で指定している「マージン」は、すべて「5」です。
コピーの例
ここでは、「Fill Background Vertical rule」と「Fill Background Horizontal rule」両方に「コピー」を選択しています。背景画像のボーダーを除いた部分が、メニューの背景を埋めるように繰り返し描画されていることが分かります。
リサイズの例
ここでは、「Fill Background Vertical rule」と「Fill Background Horizontal rule」両方に「リサイズ」を選択しています。背景画像のボーダーを除いた部分が、メニューの背景を埋めるように拡大描画されていることが分かります。
