[SE New Feature No.14]の変更点 - Powerful PictBear

「SE New Feature No.14」の編集履歴（バックアップ）一覧はこちら

「SE New Feature No.14」(2005/10/14 (金) 08:43:02) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

PictBearを自分流にカスタマイズする PART４ <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15"><img src= "http://limeworld.chu.jp/neo_newfeature/images_pbse/point01.png" width="15" height="15" align="left"></td> <td> アイコンのカスタマイズ</td> </tr> </table> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 1. カスタマイズダイアログの設定では今まで紹介した表面上の機能のほかに、もう一つカスタマイズ出来る機能が存在します。 それはアイコンのカスタマイズです。 ではアイコンのカスタマイズの方法を紹介しますので、確認して下さい。 まず、下図のようにカスタマイズダイアログを表示します。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1401.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 2. 上図のカスタマイズダイアログを出した状態で、ツールバー等のコマンド表示部で右クリックすると下図のようにメニューが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1402.png" alt="サンプルイメージ" border="1"> このメニューでアイコンのカスタマイズや表示の変更ができます。 ではさっそく動作を確認してみましょう。 ここでは例として、下図のようにスクロールアイコンを設定してみます。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 3. 右クリックして出てきたメニューの上3つ「リセット、ボタンイメージのコピー、削除」は後で説明しますので、まずは「ボタンのデザイン」を説明します。下図「ボタンのデザイン」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1403.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 4. すると下図のダイアログが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1404.png" alt="サンプルイメージ" border="0"> これがアイコンを設定するダイアログになります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 5. 左側の項目の「イメージのみ」を選択すると、アイコンだけでの表示になり、右側上にアイコンが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1405.png" alt="サンプルイメージ" border="1"> この状態だと、ツールバ－等に下図のようにアイコンだけでの表示になります。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1408.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 6. 次に「テキストのみ」を選択すると、テキストだけでの表示になり、右側上のアイコンが消えて、下の欄にテキストの表示がされます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1406.png" alt="サンプルイメージ" border="1"> この状態だと、ツールバ－等に下図のようにテキストだけでの表示になります。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1409.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td>7. またこのテキストは変更可能なので、右図のように書き換えると　　 下図のようにテキスト表示が変わります。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1411.png" alt="サンプルイメージ" border="1"></td> <td valign="top">　　<img src= "http://limeworld.chu.jp/neo_newfeature/images014/details1410.png" alt= "サンプルイメージ" border="1"></td> </tr> </table> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 8. 次に「イメージおよびテキスト」を選択すると、右側上のアイコンを表示して、下の欄にテキストも表示がされます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1407.png" alt="サンプルイメージ" border="1"> この状態だと、ツールバ－等に下図のようにアイコンとテキストの表示になります。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1412.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 9. では次にアイコン自体を変更する動作を確認してみましょう。 下図のように右側の項目で「ユーザーイメージを使用」を選択すると、下側にアイコンが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1413.png" alt="サンプルイメージ" border="0"> この状態で下に表示されているアイコンをクリックして指定すると、アイコンが変わります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 10. では下図のようにアイコンを選択して、「ボタンのデザイン」ダイアログを閉じます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1414.png" alt="サンプルイメージ" border="1"> すると下図のように指定したアイコンに替わっているのが確認できます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1415.png" alt="サンプルイメージ" border="1"> このように簡単にアイコンを変更する事が可能です。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 11. 次に一番右側にある「新規」ボタンをクリックしてみましょう。 これは、アイコンを自分で製作する時に使用する機能です。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1416.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 12. すると下図のように「ボタンイメージエディタ」ダイアログが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1417.png" alt="サンプルイメージ" border="0"> ここで最初から自分でアイコンを作ることができる画面です。 このエディタはPictBearに内蔵されているエディタですので、使用できる色やツールは簡易的なものだけが用意されています。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 13. このエディタで描画した物がどのように表示されるか確認してみましょう。 下図のように適当にアイコンを作ってみました。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1418.png" alt="サンプルイメージ" border="0"> 作ったアイコンは下のほうの「プレビュー」で確認できます。 完成したら、OKをクリックして閉じます。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 14. すると下図のようにアイコンが表示されている所に、今作成したアイコンが追加されていることが確認出来ると思われます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1419.png" alt="サンプルイメージ" border="1"> この作成したアイコンを指定してダイアログを閉じると下図のようにアイコンが替わっている事が確認できます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1420.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 15. 次に「編集」ボタンの動作を確認してみましょう。 下図のように編集したいアイコンを指定して「編集」ボタンをクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1421.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 16. すると下図のように指定したアイコンが表示された状態で、「ボタンイメージエディタ」が表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1422.png" alt="サンプルイメージ" border="0"> この状態で編集することが可能になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 17. 例として下図のように変更してみました。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1423.png" alt="サンプルイメージ" border="0"> 変更が完了したらOKボタンをクリックしてダイアログを閉じます。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 18. すると下図のように指定したアイコンが変更されていることが確認出来ると思われます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1424.png" alt="サンプルイメージ" border="1"> このアイコンを指定すればアイコンが変更されます。 ここで注意しなければいけない事は、一度書き換えて編集してしまうと、上書きされますので元のアイコンが無くなってしまいます。 では、元のアイコンを残したままそのアイコンを編集したい場合はどうすれば良いか次に説明します。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 19. では下図のように使用したいアイコンを指定して「編集」ボタンをクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1421.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 20. すると「ボタンイメージエディタ」が表示されますので、そのダイアログの下にあるツールで、「コピー」をクリックします。 「コピー」をクリックすると一時的にクリップボードにコピーできますので、これを使って複製した後、修正します。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1425.png" alt="サンプルイメージ" border="0"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 21. クリップボードにコピーできたら「キャンセル」をクリックしてダイアログを閉じます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1426.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 22. 元の「ボタンのデザイン」ダイアログが表示されたら、今度は「新規」ボタンをクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1427.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 23. 「ボタンイメージエディタ」が表示されたら、右下ツールの「貼り付け」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1428.png" alt="サンプルイメージ" border="0"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 24. すると先程コピーしたアイコンが貼り付けられ、編集できる状態になります。 ここで編集が完了しましたらOKをクリックしてダイアログを閉じます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1429.png" alt="サンプルイメージ" border="0"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 25. 「ボタンのデザイン」ダイアログが表示されたら、今編集したアイコンが新しく追加されていることが確認出来ると思われます。 このようにして元のアイコンを残したまま新たに同じようなアイコンを編集できますので便利です。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1430.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 26. 次に疑問に思うことは下図の下に表示されているアイコンにしか変更する事ができないのかなと思われますが、これはあくまでサンプルとしてのアイコンですので、自分でPictBear自体で作成した物や、フリーのアイコンデータを使用することが可能です。 どうしても付属されているエディタでは使い勝手が限定されるので、自分が普段使い慣れているPictBearや他のペイントアプリケーションで作ることによって、様々なアイコンを作成することが出来ます。 ではどのようにしてここのアイコン表示部に自分で作成したアイコンを表示させるかを次に説明します。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1432.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 27. まずは「ボタンのデザイン」ダイアログに表示されるアイコンがどこにあるかを確認します。 下図のようにエクスプローラーなどを開いて、PictBear SecondEdition がインストールされている場所を開きます。 その下のルートで「resources」フォルダを開きます。 するとその中に「UserImg.bmp」というビットマップ形式の画像ファイルが存在します。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1431.png" alt="サンプルイメージ" border="1"> このファイルが、「ボタンのデザイン」ダイアログに表示されるアイコン画像になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 28. ではこのファイルを開いてみましょう。 開くと下図の画像が表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1433.png" alt="サンプルイメージ" border="0"> 画像を見ると、「ボタンのデザイン」ダイアログに表示されるアイコン画像がつらなって描画されていることが確認できます。 このサンプルにしたがって自分でアイコンを用意するとオリジナルなアイコンを使用することが出来ます。 ではこのアイコンファイルを作成するにあたっての基本的な約束事を記述しておきますので、それにしたがって作成してください。 　　＜基本的な約束事＞ ・アイコンサイズは１６ × １６ドット画像にする事 ・アイコン画像は横一列につめて表示すること（縦１６ドット以降の画像領域は読み込みません） ・画像形式はBMP（ビットマップ画像）形式に限る（画素数には制限がありません。ただしBMP形式で取り扱える画素数に限る） ・ファイルネームを「UserImg.bmp」にする事（これ以外の名前では読み込みません） 以上の４点だけです。 この事を守れば、自由にアイコンを作って変更できます。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 29. では実際にどうなるか動作を確認してみましょう。 ここではサンプルとして下図のアイコン画像で動作を確認してみます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1434.png" alt="サンプルイメージ" border="0"> このアイコン画像をBMP形式で保存するのですが、最初に用意されているオリジナル・サンプル画像を消したくないので、そのファイルは名前を変えて保存しなおし､ここで表示した画像を「UserImg.bmp」として保存します。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1435.png" alt="サンプルイメージ" border="1"> 上図のような状態で「resources」フォルダに保存しました。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 30. ではどうなっているか確認してみましょう。 PictBearを起動して、カスタマイズダイアログを開き、ツールバー上の適当なアイコンの上で右クリックをして、「ボタンのデザイン」ダイアログを開き、「ユーザーイメージを使用」を選択すると、下側に表示されるアイコンが下図のように変わっていることが確認出来ると思われます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1436.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 31. では今表示したアイコンに変更した例を下図に表示します。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1437.png" alt="サンプルイメージ" border="1"> どうでしょう、このように自分だけのアイコン表示によるPictBearが作ることが事が可能です。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 32. また説明に戻ります。 最初の説明で飛ばした部分を説明します。 まず「リセット」動作ですが、アイコンを変更した後に最初の状態に戻したい時に使用します。 下図のように戻したいアイコンの上で右クリックして、「リセット」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1438.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 33. すると下図のように最初の状態に戻すことができます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1439.png" alt="サンプルイメージ" border="1"> これが「リセット」動作になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 34. 次に「ボタンイメージのコピー」の動作を見てみます。 この機能は指定したアイコンを一時的にクリップボードへ保管して、再利用できるようにした機能です。 例えば、デフォルトで用意されているアイコンを少しだけ替えて登録したい場合などに使用します。 では、下図のように「ボタンイメージのコピー」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1440.png" alt="サンプルイメージ" border="1"> 画面上では何も変化がありませんが、クリップボードに保存されています。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 35. クリップボードに保存されたデータを加工する場合は、保存した後に同じ右クリックメニューの「ボタンのデザイン」を開き、さらに「ユーザーイメージを使用」を選択して、「新規」ボタンをクリックします。 するとボタンイメージエディタが開かれるのますので、下図のように右下の「貼り付け」ボタンをクリックして保存してあるデータを反映させます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1441.png" alt="サンプルイメージ" border="0"> この状態で編集ができますので、デフォルトで用意されているアイコンも編集して変更させることが可能です。 また、データはクリップボードに保存されていますので、PictBear本体でも開く事が可能ですから、そこで編集した後再利用することもできます。 これが「ボタンイメージのコピー」の動作になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 36. 次に「削除」の動作を見てみます。 この機能は指定したアイコンを削除して消してしまう機能です。 では、下図のように「削除」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1442.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 37. すると指定したアイコンが消えたこと確認出来ると思われます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1443.png" alt="サンプルイメージ" border="1"> これが「削除」の動作になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 38. 次に「イメージのみ」の動作を見てみます。 この機能は指定したアイコンをアイコン表示だけにする設定です。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1444.png" alt="サンプルイメージ" border="1"> この機能は「ボタンのデザイン」ダイアログの左側にあった機能に同じです。（下図参照） <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1450.png" alt="サンプルイメージ" border="1"> では、上図のように「イメージのみ」をクリックします。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 39. すると指定したアイコン表示がアイコンだけでの表示になります。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1445.png" alt="サンプルイメージ" border="1"> これが「イメージのみ」の動作になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 40. 次に「テキストのみ」の動作を見てみます。 この機能は指定したアイコンをテキスト表示だけにする設定です。 この機能も「ボタンのデザイン」ダイアログの左側にあった機能に同じです。 では、下図のように「テキストのみ」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1446.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 41. すると指定したアイコン表示がテキストだけでの表示になります。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1447.png" alt="サンプルイメージ" border="1"> これが「テキストのみ」の動作になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 42. 次に「イメージおよびテキスト」の動作を見てみます。 この機能は指定したアイコンをアイコンとテキストの両方を表示する設定です。 この機能も「ボタンのデザイン」ダイアログの左側にあった機能に同じです。 では、下図のように「イメージおよびテキスト」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1448.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 43. すると指定したアイコンとテキストの両方を表示が表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1449.png" alt="サンプルイメージ" border="1"> これが「イメージおよびテキスト」の動作になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 44. 次に「グループの開始」の動作を見てみます。 この機能は指定したアイコンの前に区切り線を追加して、グループ分けする機能です。 ここではブラシアイコンの前に区切り線をつけてグループ分けする動作を確認してみましょう。 下図のようにブラシアイコンの上で右クリックして「グループの開始」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1451.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 45. すると下図のようにブラシアイコンの前に区切り線が追加された事が確認できます。 <img src="http://limeworld.chu.jp/neo_newfeature/images014/details1452.png" alt="サンプルイメージ" border="1"> これが「グループの開始」の動作になります。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 46. 以上でアイコンのカスタマイズの説明を終わりますが、今説明した動作はメニューバーのリストダウンメニューでも動作しますし、右クリックメニューでも有効ですので、活用してください。 ただし、メニューバーのリストダウンメニューや右クリックメニューではアイコンのみの表示指定は出来ませんので、覚えておきましょう。 カスタマイズについての基本的な説明は以上になりますので、各メニューなどのフルカスタマイズで自分だけのPictBearを作り上げて存分に楽しんでください。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png">

PictBearを自分流にカスタマイズする PART４ <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15"><img src= "http://picture.sub.jp/powerful/neo_newfeature/images_pbse/point01.png" width= "15" height="15" align="left"></td> <td> アイコンのカスタマイズ</td> </tr> </table> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 1. カスタマイズダイアログの設定では今まで紹介した表面上の機能のほかに、もう一つカスタマイズ出来る機能が存在します。 それはアイコンのカスタマイズです。 ではアイコンのカスタマイズの方法を紹介しますので、確認して下さい。 まず、下図のようにカスタマイズダイアログを表示します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1401.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 2. 上図のカスタマイズダイアログを出した状態で、ツールバー等のコマンド表示部で右クリックすると下図のようにメニューが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1402.png" alt= "サンプルイメージ" border="1"> このメニューでアイコンのカスタマイズや表示の変更ができます。 ではさっそく動作を確認してみましょう。 ここでは例として、下図のようにスクロールアイコンを設定してみます。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 3. 右クリックして出てきたメニューの上3つ「リセット、ボタンイメージのコピー、削除」は後で説明しますので、まずは「ボタンのデザイン」を説明します。下図「ボタンのデザイン」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1403.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 4. すると下図のダイアログが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1404.png" alt= "サンプルイメージ" border="0"> これがアイコンを設定するダイアログになります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 5. 左側の項目の「イメージのみ」を選択すると、アイコンだけでの表示になり、右側上にアイコンが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1405.png" alt= "サンプルイメージ" border="1"> この状態だと、ツールバ－等に下図のようにアイコンだけでの表示になります。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1408.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 6. 次に「テキストのみ」を選択すると、テキストだけでの表示になり、右側上のアイコンが消えて、下の欄にテキストの表示がされます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1406.png" alt= "サンプルイメージ" border="1"> この状態だと、ツールバ－等に下図のようにテキストだけでの表示になります。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1409.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td>7. またこのテキストは変更可能なので、右図のように書き換えると　　 下図のようにテキスト表示が変わります。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1411.png" alt= "サンプルイメージ" border="1"></td> <td valign="top">　　<img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1410.png" alt= "サンプルイメージ" border="1"></td> </tr> </table> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 8. 次に「イメージおよびテキスト」を選択すると、右側上のアイコンを表示して、下の欄にテキストも表示がされます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1407.png" alt= "サンプルイメージ" border="1"> この状態だと、ツールバ－等に下図のようにアイコンとテキストの表示になります。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1412.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 9. では次にアイコン自体を変更する動作を確認してみましょう。 下図のように右側の項目で「ユーザーイメージを使用」を選択すると、下側にアイコンが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1413.png" alt= "サンプルイメージ" border="0"> この状態で下に表示されているアイコンをクリックして指定すると、アイコンが変わります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 10. では下図のようにアイコンを選択して、「ボタンのデザイン」ダイアログを閉じます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1414.png" alt= "サンプルイメージ" border="1"> すると下図のように指定したアイコンに替わっているのが確認できます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1415.png" alt= "サンプルイメージ" border="1"> このように簡単にアイコンを変更する事が可能です。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 11. 次に一番右側にある「新規」ボタンをクリックしてみましょう。 これは、アイコンを自分で製作する時に使用する機能です。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1416.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 12. すると下図のように「ボタンイメージエディタ」ダイアログが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1417.png" alt= "サンプルイメージ" border="0"> ここで最初から自分でアイコンを作ることができる画面です。 このエディタはPictBearに内蔵されているエディタですので、使用できる色やツールは簡易的なものだけが用意されています。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 13. このエディタで描画した物がどのように表示されるか確認してみましょう。 下図のように適当にアイコンを作ってみました。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1418.png" alt= "サンプルイメージ" border="0"> 作ったアイコンは下のほうの「プレビュー」で確認できます。 完成したら、OKをクリックして閉じます。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 14. すると下図のようにアイコンが表示されている所に、今作成したアイコンが追加されていることが確認出来ると思われます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1419.png" alt= "サンプルイメージ" border="1"> この作成したアイコンを指定してダイアログを閉じると下図のようにアイコンが替わっている事が確認できます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1420.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 15. 次に「編集」ボタンの動作を確認してみましょう。 下図のように編集したいアイコンを指定して「編集」ボタンをクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1421.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 16. すると下図のように指定したアイコンが表示された状態で、「ボタンイメージエディタ」が表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1422.png" alt= "サンプルイメージ" border="0"> この状態で編集することが可能になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 17. 例として下図のように変更してみました。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1423.png" alt= "サンプルイメージ" border="0"> 変更が完了したらOKボタンをクリックしてダイアログを閉じます。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 18. すると下図のように指定したアイコンが変更されていることが確認出来ると思われます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1424.png" alt= "サンプルイメージ" border="1"> このアイコンを指定すればアイコンが変更されます。 ここで注意しなければいけない事は、一度書き換えて編集してしまうと、上書きされますので元のアイコンが無くなってしまいます。 では、元のアイコンを残したままそのアイコンを編集したい場合はどうすれば良いか次に説明します。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 19. では下図のように使用したいアイコンを指定して「編集」ボタンをクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1421.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 20. すると「ボタンイメージエディタ」が表示されますので、そのダイアログの下にあるツールで、「コピー」をクリックします。 「コピー」をクリックすると一時的にクリップボードにコピーできますので、これを使って複製した後、修正します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1425.png" alt= "サンプルイメージ" border="0"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 21. クリップボードにコピーできたら「キャンセル」をクリックしてダイアログを閉じます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1426.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 22. 元の「ボタンのデザイン」ダイアログが表示されたら、今度は「新規」ボタンをクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1427.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 23. 「ボタンイメージエディタ」が表示されたら、右下ツールの「貼り付け」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1428.png" alt= "サンプルイメージ" border="0"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 24. すると先程コピーしたアイコンが貼り付けられ、編集できる状態になります。 ここで編集が完了しましたらOKをクリックしてダイアログを閉じます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1429.png" alt= "サンプルイメージ" border="0"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 25. 「ボタンのデザイン」ダイアログが表示されたら、今編集したアイコンが新しく追加されていることが確認出来ると思われます。 このようにして元のアイコンを残したまま新たに同じようなアイコンを編集できますので便利です。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1430.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 26. 次に疑問に思うことは下図の下に表示されているアイコンにしか変更する事ができないのかなと思われますが、これはあくまでサンプルとしてのアイコンですので、自分でPictBear自体で作成した物や、フリーのアイコンデータを使用することが可能です。 どうしても付属されているエディタでは使い勝手が限定されるので、自分が普段使い慣れているPictBearや他のペイントアプリケーションで作ることによって、様々なアイコンを作成することが出来ます。 ではどのようにしてここのアイコン表示部に自分で作成したアイコンを表示させるかを次に説明します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1432.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 27. まずは「ボタンのデザイン」ダイアログに表示されるアイコンがどこにあるかを確認します。 下図のようにエクスプローラーなどを開いて、PictBear SecondEdition がインストールされている場所を開きます。 その下のルートで「resources」フォルダを開きます。 するとその中に「UserImg.bmp」というビットマップ形式の画像ファイルが存在します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1431.png" alt= "サンプルイメージ" border="1"> このファイルが、「ボタンのデザイン」ダイアログに表示されるアイコン画像になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 28. ではこのファイルを開いてみましょう。 開くと下図の画像が表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1433.png" alt= "サンプルイメージ" border="0"> 画像を見ると、「ボタンのデザイン」ダイアログに表示されるアイコン画像がつらなって描画されていることが確認できます。 このサンプルにしたがって自分でアイコンを用意するとオリジナルなアイコンを使用することが出来ます。 ではこのアイコンファイルを作成するにあたっての基本的な約束事を記述しておきますので、それにしたがって作成してください。 　　＜基本的な約束事＞ ・アイコンサイズは１６ × １６ドット画像にする事 ・アイコン画像は横一列につめて表示すること（縦１６ドット以降の画像領域は読み込みません） ・画像形式はBMP（ビットマップ画像）形式に限る（画素数には制限がありません。ただしBMP形式で取り扱える画素数に限る） ・ファイルネームを「UserImg.bmp」にする事（これ以外の名前では読み込みません） 以上の４点だけです。 この事を守れば、自由にアイコンを作って変更できます。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 29. では実際にどうなるか動作を確認してみましょう。 ここではサンプルとして下図のアイコン画像で動作を確認してみます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1434.png" alt= "サンプルイメージ" border="0"> このアイコン画像をBMP形式で保存するのですが、最初に用意されているオリジナル・サンプル画像を消したくないので、そのファイルは名前を変えて保存しなおし､ここで表示した画像を「UserImg.bmp」として保存します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1435.png" alt= "サンプルイメージ" border="1"> 上図のような状態で「resources」フォルダに保存しました。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 30. ではどうなっているか確認してみましょう。 PictBearを起動して、カスタマイズダイアログを開き、ツールバー上の適当なアイコンの上で右クリックをして、「ボタンのデザイン」ダイアログを開き、「ユーザーイメージを使用」を選択すると、下側に表示されるアイコンが下図のように変わっていることが確認出来ると思われます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1436.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 31. では今表示したアイコンに変更した例を下図に表示します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1437.png" alt= "サンプルイメージ" border="1"> どうでしょう、このように自分だけのアイコン表示によるPictBearが作ることが事が可能です。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 32. また説明に戻ります。 最初の説明で飛ばした部分を説明します。 まず「リセット」動作ですが、アイコンを変更した後に最初の状態に戻したい時に使用します。 下図のように戻したいアイコンの上で右クリックして、「リセット」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1438.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 33. すると下図のように最初の状態に戻すことができます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1439.png" alt= "サンプルイメージ" border="1"> これが「リセット」動作になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 34. 次に「ボタンイメージのコピー」の動作を見てみます。 この機能は指定したアイコンを一時的にクリップボードへ保管して、再利用できるようにした機能です。 例えば、デフォルトで用意されているアイコンを少しだけ替えて登録したい場合などに使用します。 では、下図のように「ボタンイメージのコピー」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1440.png" alt= "サンプルイメージ" border="1"> 画面上では何も変化がありませんが、クリップボードに保存されています。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 35. クリップボードに保存されたデータを加工する場合は、保存した後に同じ右クリックメニューの「ボタンのデザイン」を開き、さらに「ユーザーイメージを使用」を選択して、「新規」ボタンをクリックします。 するとボタンイメージエディタが開かれるのますので、下図のように右下の「貼り付け」ボタンをクリックして保存してあるデータを反映させます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1441.png" alt= "サンプルイメージ" border="0"> この状態で編集ができますので、デフォルトで用意されているアイコンも編集して変更させることが可能です。 また、データはクリップボードに保存されていますので、PictBear本体でも開く事が可能ですから、そこで編集した後再利用することもできます。 これが「ボタンイメージのコピー」の動作になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 36. 次に「削除」の動作を見てみます。 この機能は指定したアイコンを削除して消してしまう機能です。 では、下図のように「削除」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1442.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 37. すると指定したアイコンが消えたこと確認出来ると思われます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1443.png" alt= "サンプルイメージ" border="1"> これが「削除」の動作になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 38. 次に「イメージのみ」の動作を見てみます。 この機能は指定したアイコンをアイコン表示だけにする設定です。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1444.png" alt= "サンプルイメージ" border="1"> この機能は「ボタンのデザイン」ダイアログの左側にあった機能に同じです。（下図参照） <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1450.png" alt= "サンプルイメージ" border="1"> では、上図のように「イメージのみ」をクリックします。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 39. すると指定したアイコン表示がアイコンだけでの表示になります。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1445.png" alt= "サンプルイメージ" border="1"> これが「イメージのみ」の動作になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 40. 次に「テキストのみ」の動作を見てみます。 この機能は指定したアイコンをテキスト表示だけにする設定です。 この機能も「ボタンのデザイン」ダイアログの左側にあった機能に同じです。 では、下図のように「テキストのみ」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1446.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 41. すると指定したアイコン表示がテキストだけでの表示になります。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1447.png" alt= "サンプルイメージ" border="1"> これが「テキストのみ」の動作になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 42. 次に「イメージおよびテキスト」の動作を見てみます。 この機能は指定したアイコンをアイコンとテキストの両方を表示する設定です。 この機能も「ボタンのデザイン」ダイアログの左側にあった機能に同じです。 では、下図のように「イメージおよびテキスト」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1448.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 43. すると指定したアイコンとテキストの両方を表示が表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1449.png" alt= "サンプルイメージ" border="1"> これが「イメージおよびテキスト」の動作になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 44. 次に「グループの開始」の動作を見てみます。 この機能は指定したアイコンの前に区切り線を追加して、グループ分けする機能です。 ここではブラシアイコンの前に区切り線をつけてグループ分けする動作を確認してみましょう。 下図のようにブラシアイコンの上で右クリックして「グループの開始」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1451.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 45. すると下図のようにブラシアイコンの前に区切り線が追加された事が確認できます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images014/details1452.png" alt= "サンプルイメージ" border="1"> これが「グループの開始」の動作になります。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 46. 以上でアイコンのカスタマイズの説明を終わりますが、今説明した動作はメニューバーのリストダウンメニューでも動作しますし、右クリックメニューでも有効ですので、活用してください。 ただし、メニューバーのリストダウンメニューや右クリックメニューではアイコンのみの表示指定は出来ませんので、覚えておきましょう。 カスタマイズについての基本的な説明は以上になりますので、各メニューなどのフルカスタマイズで自分だけのPictBearを作り上げて存分に楽しんでください。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png">

表示オプション

横に並べて表示：

変化行の前後のみ表示：