スキンの作り方(もう少しまともなものを作る)今まで全く使えないものばかり作ってきましたが今回はもう少しまともなものを作ってみましょう(見た目だけですが)。 というわけで今回作るスキンは次のようなものです。  OfficeXP風のツールバースキンです。かなり前に作りました。なんか普通のWindowsより灰色が濃いのは 私のWindowsの配色が普通より濃い灰色になっているからです（それをキャプチャしたので）。 今回作るスキンのポイントは
スキン画像やスキンファイルをまとめたサンプルファイルを用意しておきます。 自分で作るのが面倒だという人は使ってください。 中には今回使ったバーの構造をエクスポートしたINIファイルも含まれています(officexp.ini)。 サンプルファイルのダウンロード(Ver.4.1以降で使用可) ◆ バーの構成まずバーを作ります。コマンドリスト名は「skin01」とでもしておきます。 今回は次のようにコマンドリストを作りました。 まず最初のボタンには日付などを表示します。次の2番目と3番目のボタンはサブバーのセレクターです （サブバーって？と思った人はバーの作り方を見てください）。 というわけで今回は2つのサブバーを作成しています。そして後ろの方にある「*Format StartSubBar」と「*Format EndSubBar」の 組み合わせがサブバーとなります（2組あることに注意）。 今回作るスキンの使い方は、セレクターである「Main」や「Utilities」を押すと右の部分にそれに対するサブバーが表示されるというものです。 最初のボタンはどうでもいいです。 このバーを構成するが面倒だという人はサンプルファイルの中の「officexp.ini」を「Setup」タブの「Import from text」で インポートしてください。すると「skin01」というコマンドリストが作られます。 ◆ 素材の作成スキン用の素材を作りましょう。サンプルファイルにもファイルが入っているのでそっちを使った方がいいでしょう。 土台となる画像は次のようにしました。 mainbar.bmp これに「mainbar.bmp」という名前をつけてスキンフォルダの適当なところに保存します。 次にマウスポインタをボタン上に置いたと表示される画像（プレス状態の画像としても使う）も用意しなければなりません。 これには2種類あり、コンボボックス用の画像と通常のボタン用の画像です。  hover.bmp  combohover.bmp それぞれ上記のように「hover.bmp」と「combohover.bmp」という名前をつけて土台画像と同じフォルダに保存します。 今回作るスキンではこれだけです。 ◆ スキンファイルの作成では最も重要なスキンファイル書いていくことにしましょう。 スキンファイルとなるテキストファイルを画像のあるフォルダに作ります（スキンファイル名を「officexp.txt」とでもしておきます）。 そして次のように記述します。*skin *bar shape "mainbar.bmp"これはこれまでにも何回か説明したことですね。スキンファイルは必ず「*skin」ではじめなければなりません。 そして*barコマンドのshapeでは土台となる画像を指定します。 次にボタンを配置します。まずは最初のボタン（日付などを表示しているボタン）について書きます。 次の文を追加します。
*button id 0 left 7 top 3 width 150 height 19 hoverbmp "combohover.bmp" pressbmp "combohover.bmp" -
textpos center no3d
最初のボタンなのでIDは0です。次に位置ですがこれは土台となる画像に合わせる必要があります。これに関しては
自分でいろいろ試して最適な位置を決めてください。今回はたまたま「left 7 top 3」だったので。
ボタンの大きさですがこれはキーワード「width」と「height」で指定します。
このボタンではマウスポインタがボタン上にきたとき背景画像を表示する予定なので、
そのホバー時の画像サイズにボタンのサイズを合わせます。
ホバー時の画像（combohover.bmp）のサイズは150x19なので「width 150 height 19」となります。そしてキーワード「hoverbmp」はマウスポインタがそのボタン上にきたとき表示する背景画像を指定するキーワードです。 背景画像には「combohover.bmp」を使うので「hoverbmp "combohover.bmp"」となります。 次にあるキーワード「pressbmp」はボタンを押したときに表示する背景画像を指定するキーワードです。 押したときもcombohover.bmpを表示するようにしています。 キーワード「textpos」はボタンテキストの位置を指定するキーワードです。値としてright, center, top, bottom, multiを とることができます。今回は中央にあわせるのでcenterとしています。 最後のキーワード「no3d」はマウスポインタがボタン上にきたときや押したときの3D効果を無効にするためのキーワードです。 このキーワードは値をとりません。一つ一つ見ていけばそれほど難しくありませんね。 さて次にサブバーを切り替えるためのセレクターの配置をします。 実はこのスキンでは画像サイズの都合上4つのセレクターしか配置できないようになっています。 勝手にスキンが伸びたりすることはないのでこのあたりは画像を作る段階で設計しておかなければなりません。 今回作ったコマンドリストではセレクターが2つしかないので大丈夫ですが5つ以上作るとおかしなことになります。 それではセレクターの配置をしましょう。次の文を追加します。
*button id 1 repeat "toSubbar 4 2 0" left 160 top 2 width 50 height 22 hoverbmp "hover.bmp" -
pressbmp "hover.bmp" textpos center no3d
まずコマンドリストにおけるセレクターの開始は2番目のアイテムからです。なのでIDは1としています（nextでもいいですが）。
またボタンを規則的に配置するためrepeatを使います。ここで重要なのはrepeatの値です。
repeatの値で繰り返し数に「toSubbar」というのが使われています。これは具体的な繰り返し数を指定せずに
コマンドリスト上でサブバーにあたるまで繰り返し配置を行うときに使います。
今回のコマンドリストの場合、「Main」と「Utilities」アイテムの後にサブバーの開始があります。
つまり「Main」と「Utilities」ボタンを配置したらサブバーの開始にあたるのでそこで繰り返し配置をやめさせる
という役割をしているのです。そのままサブバーの中身まで変なところに繰り返し配置されても困りますからね。あとはそれほど説明することはないでしょう。位置はもちろん繰り返し配置の基準位置です。 4列ずつ水平方向間隔2ピクセルで配置しています。といっても今回は5つ以上の配置は考えてません。 5つ以上繰り返し配置されると変なことになります。 ボタンサイズはhover.bmpのサイズに合わせています。 あと残りのサブバーの部分を配置します。サブバーの部分は土台画像のセパレータ（真中より少し右にある縦の線） より右の部分に配置することにしました。 次の文を最後に追加します。
*button id next repeat "1000 4 2 0" left 380 top 2 width 50 height 22 hoverbmp "hover.bmp" -
pressbmp "hover.bmp" textpos center no3d
セレクターの配置でrepeatの繰り返し数に「toSubbar」を使ったのでIDがわかりません。そこでIDの値に「next」を
使っています。今回もサブバーのボタンは規則正しく配置するのでrepeatを使っています。
ただ注意してほしいのは繰り返し数です。今回は1000という大きな繰り返し数にしています。
このスキンではサブバーの中身も4つまでしか表示できないようになっているので1000も配置することはありません。
だったら4でいいんじゃないの？と思う人もいるかもしれませんがそれは間違いです。
なぜなら4つにしてしまうと表示されないサブバーのアイテムが出てくる可能性があるからです。
実はこの繰り返し数には全てのサブバーの総アイテム数を最低でも指定しなければなりません。
見えないアイテムの分も繰り返し数に入れておかなければならないのです。
今回の場合一つ目のサブバーには3つ、二つ目のサブバーには2つのアイテムが入っているので
最低でも5回の繰り返し数を指定しなければなりません。
しかしいちいちそんなこと考えるの面倒なので十分な繰り返し数、つまり1000回を指定しているのです（別に100回でもいいんですが）。あとは前までと同じです。位置は土台画像のセパレータの横あたりに来るように調整しています。 以上をまとめるとスキンファイルは次のような感じになります。
*skin
*bar shape "mainbar.bmp"
*button id 0 left 7 top 3 width 150 height 19 hoverbmp "combohover.bmp" pressbmp "combohover.bmp" -
textpos center no3d
*button id 1 repeat "toSubbar 4 2 0" left 160 top 2 width 50 height 22 hoverbmp "hover.bmp" -
pressbmp "hover.bmp" textpos center no3d
*button id next repeat "1000 4 2 0" left 380 top 2 width 50 height 22 hoverbmp "hover.bmp" -
pressbmp "hover.bmp" textpos center no3d
あとは細かいことなのですが「Command Lists」タブ-＞「Setup」-＞「All Bars」-＞「Show *Bar selectSubbar as pressed」
をチェックしておくと選択されているサブバーのセレクターが押されている状態になりわかりやすくなります。
さて実際にちょっとしたスキンを作ったわけですがおそらく多くの人は「このスキンは自分には使えない」 と思ったのではないでしょうか（このスキンの構造が悪すぎるのもありますが）。 事実私もこのようなバーの使い方はしていないのでこのスキンは使ってません。 やはりバーの使い方は人それぞれ異なりそれに合うスキンを自分で作らなくてはならないのです。 前へ（その他の基本事項） トップに戻る |