ピクチャを表示したボタンは、テキスト ラベルがあるものもないものも、Web ページでよく使用され、特定のシナリオではたいへん便利です。一般に、ピクチャ ボタンは、テキスト ボタンよりも小さいスペースで多くの情報をユーザーに伝えることができます。しかし、InfoPath にはこのタイプのボタンを作成する機能がありません。実は本当の意味でのピクチャ ボタンでは、button 要素の使用が求められますが、この要素は InfoPath ではサポートされていません。このため、ビューに表示されても機能しません。InfoPath では、ボタンの作成に type="button" 属性を指定した input 要素が使用されます。このタイプのボタンは、テキスト ラベルだけをサポートします。

とはいえ、InfoPath でも、背景ピクチャを使用してピクチャ ボタンを作成することはできます。ただし、ボタンをクリックしても、罫線およびテキスト ラベルと一緒にピクチャが押されたような表示になることはありません。このため、ボタンの罫線を削除し、テキスト ラベルも設定していない場合は、ユーザーが実際にピクチャ ボタンをクリックしても視覚的なフィードバックが得られないので、特にもどかしいかもしれません。

このタスクでは、2 つのピクチャ ボタンを作成します。1 つはピクチャだけのボタン、もう 1 つはピクチャとテキスト ラベルが表示されるボタンです。手順としては、ピクチャをリソース ファイルとして追加し、そのビューの .xsl ファイルを手動で変更して、ボタンにピクチャを表示させます。まず、新しい空白のフォームを作成しておきます。

ボタンのピクチャをリソース ファイルとして追加する

1. [Tools] メニューの [Resource Files] をクリックし、[Add] をクリックします。
2. 1 つ目のピクチャを検索して選択し、[OK] をクリックします。
3. 2 つ目のピクチャを検索して選択し、[OK] を 2 回クリックして、[Resource Files] ダイアログ ボックスを閉じます。

1 つ目のボタンを挿入して設定する

1.  [Controls] 作業ウィンドウを開きます。
2. ビューにボタンを挿入します。
3. ボタンをダブルクリックします。
4. [Button Properties] ダイアログ ボックスの [General] タブの [Label] ボックスで、Space キーを押して、表示されている内容をクリアします。
   InfoPath ではボタンにラベルを付けることが要求されるので、ラベルを実質的に削除するためにテキストとして空白文字を使用します。単にラベルを削除しようとすると、警告ダイアログ ボックスが表示されます。
5. [Size] タブにピクチャの高さと幅 (この場合はそれぞれ「126px」および「101px」) を入力し、[OK] をクリックします。
6. ボタンを右クリックし、[Borders And Shading] をクリックします。
7. [Borders And Shading] ダイアログ ボックスの [Borders] タブで、[None] をクリックして既存の罫線を削除し、[OK] をクリックします。

InfoPath で Windows XP スタイルのボタンにピクチャを表示するには、罫線か背景色、またはその両方を削除する必要があります。

2 つ目のボタンを挿入して設定する

1. [Controls] 作業ウィンドウから 2 つ目のボタンをビューに挿入します。
2. ボタンをダブルクリックします。
3. [Button Properties] ダイアログ ボックスの [General] タブにある [Label] ボックスに「Publish」と入力し、[OK] をクリックします。
   InfoPath では、ボタンのテキスト ラベルは既定で中央に配置されますが、それを変更する方法は用意されていないので、ビューの .xsl ファイルを編集するときにテキスト ラベルを左寄せします。
4. ボタンを右クリックし、[Borders And Shading] をクリックします。
5. [Borders And Shading] ダイアログ ボックスの [Shading] タブをクリックし、[No Color] をクリックして、[OK] をクリックします。
   

ビューの .xsl ファイルを変更してボタンのピクチャを表示す

1. [File] メニューの [Extract Form Files] をクリックします。
2. 取り出したフォーム構成ファイルの保存先を選択し、[OK] をクリックします。
3. InfoPath を終了して、フォーム構成ファイルに対するロックを解除します。
4. テキスト エディタを使用して、ビューの .xsl ファイルを開きます。
5. 1 つ目の input 要素を探し、インライン スタイルの最後に、次のプロパティおよび値を追加します。ピクチャ名は適宜置き換えてください。
   

7. 2 つ目の input 要素を探し、インライン スタイルの最後に、次のプロパティおよび値を追加します。ピクチャ名は適宜置き換えてください。

7. ビューの .xsl ファイルを保存し、テキスト エディタを閉じます。
8. manifest.xsf ファイルを右クリックし、[Design] をクリックして、フォーム テンプレートを再度開きます。

図 1 背景ピクチャを表示するように変更されたボタン

確認