InfoPath のデザインモードでは、ハイパーリンクの色の変更だけが許可されています。文字飾りの下線を削除したり、ハイパーリンク上にマウスポインタを移動したときやタブ移動したときに表示する個別の色を設定したりすることはできません。これらのデザイン モードの制限には、ビューの view .xsl ファイルを手動で変更することで対処できます。
このタスクでは、カスタムの内部スタイルシートをビューの .xsl ファイルに追加する方法で、対話式ハイパーリンクを作成します。まず、新しい空白のフォームを作成しておきます。
ビューにハイパーリンク コントロールを追加する
- [Controls] 作業ウィンドウを開きます。
- ビューにハイパーリンクを挿入します。
- [Insert Hyperlink] ダイアログ ボックスの [Link To Address] ボックスに、「http://jp.infopathdev.com」と入力し、[OK] をクリックします。
確認
- フォームをプレビューします。
- ハイパーリンク上にマウス ポインタを移動したり、タブ移動したり、ハイパーリンクをクリックしたりして、リンクの変化を確認します。
- プレビューを閉じます。
確認したように、InfoPath では、どのようなマウス操作およびキーボード操作に対してもハイパーリンクの表示に違いはありません。この動作を拡張します。
ビューにカスタムの内部スタイルシートを手動で追加する
- [File] メニューの [Extract Form Files] をクリックします。
- 取り出したフォーム構成ファイルの保存先を選択し、[OK] をクリックします。
- InfoPath を終了して、フォーム構成ファイルに対するロックを解除します。
- テキスト エディタを使用して、ビューの .xsl ファイルを開きます。
- 最後の style 要素のすぐ下に次のコードを追加します。
<style title="myCustomHyperlinks" type="text/css">
A { COLOR: orange; TEXT-DECORATION: none }
A:visited { COLOR: red; } <!-- This pseudo class has no effect in the editor -->
A:active { COLOR: blue; TEXT-DECORATION: underline }
A:hover { COLOR: green; TEXT-DECORATION: underline }
</style> |
既にデザイン モードでハイパーリンクの色を変更している場合は、ハイパーリンク テキストのすぐ近くにあるフォント要素を手動で削除して、新しいスタイルを有効にする必要があります。
- ビューの .xsl ファイルを保存し、テキスト エディタを閉じます。
確認
- manifest.xsf ファイルを右クリックし、[Design] をクリックして、フォーム テンプレートを再度開きます。
- フォームをプレビューします。
- ハイパーリンク上にマウス ポインタを移動したり、タブ移動したり、ハイパーリンクをクリックしたりして、変化を確認します。
active 擬似クラスで指定されたスタイルは、ユーザーがハイパーリンクにタブ移動したときに表示されます。一方、hover 擬似クラスで指定されたスタイルは、ユーザーがマウスポインタをハイパーリンク上に移動したときに表示されます。擬似クラスの順序は重要です。リスト内で active を hover の後にすると、ユーザーがアクティブなハイパーリンク上にマウスを移動しても反応しません。ただし、このような動作を望んでいる場合は、順序を適切に変更します。
visited 擬似クラスは、デザイン モード上では機能するように見えますが、InfoPath エディタでは訪問したリンクが記録されないので、このスタイルが適用された動作をユーザーが確認することはできません。
カスタム スタイルシートの詳細については、「Add a Custom Style Sheet to a View.(カスタム スタイルシートをビューに追加する)」を参照してください。
©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.