>ホーム [1] >技術紹介 [4] >らくなび [Shift-D] >サンプルコード サイト情報 資料請求・お問合せ
     ホーム [1]       新着情報 [2]       KeyNavi [3]       技術紹介 [4]       FAQ [5]       サイトマップ [6]     
   

らくなび:サンプルコード

− 具体的なコード例

  サンプルコード

らくなび:サンプルHTML
下記のようにHTMLにスクリプトの指定を追加して下さい。

【らくなび:サンプルコード】

<html>
<body>
<script language="javascript" src="keynavi_raku_ja.js"></script>
<script language="javascript" src="keynavi_ja.js"></script>
。。。。。
</body>
</html>

注意点として、keynavi_raku_ja.jsの指定は<body>タグの直後にします。 keynavi_ja.jsについては後ろの方でも構いません。

上記指定により 括弧キーによる拡大や自動ナビなどが使用可能になります。

メモ: 拡大操作をキー入力ではなくリンククリックなどマウス操作で行いたい場合は 関数「kl_zoom_set(倍率を実数指定)」を呼びます。

1.2倍に拡大 [Shift-J]1.0倍に戻す [Shift-K]

  フォーカス移動について

矢印キーでフォーカス移動を可能にするには
フォーカスを「矢印キー」で行えるようにするにはスクリプトで 「KL_MAP_FAC=1」とします。 これにより「矢印キー」入力がスクロールになるかフォーカスになるか 「CTRL」キーで切替えられます。

或いは「KL_MAP_DEFAULT="mapac_fci_fai_fca_fac";」とすると デフォルトでこのモードが有効になります。 上述の場合と異なりこの機能が不要な場合は 「Ctrl-/」で「設定画面」を表示させて無効に切替えられます。

フォーカス位置を分かりやすく
スタイルシートで「a:focus/active」の指定を追加します。

【フォーカス対象を赤色にするスタイルシート指定例】

a:active     { color:red !important; }
a:focus      { color:red !important; }
a:active *   { color:red !important; }
a:focus  *   { color:red !important; }
a:active * * { color:red !important; }
a:focus  * * { color:red !important; }

a:link    img { border:2px solid #0000FF !important; }
a:visited img { border:2px solid #A000F0 !important; }
a:active  img { border:2px solid red     !important; }
a:focus   img { border:2px solid red     !important; }

上記コードによりフォーカス対象のテキストや画像の枠が赤色になります。

メモ: HTMLを手入力するなど上記指定をHTML毎に書き足すのが面倒な場合は keynavi,rakunaviやスタイルシートの指定全てを 1つの外部JavaScriptファイルにまとめてしまいます。 すると各HTMLには一行追加するのみで済みます。

本技術に関するお問合せ・ご相談を承っております
  資料請求・お問合せ [Shift-L]
お問合せ・ご相談の連絡先を記載しております。
また技術的なご質問なども承っております。

 上位ページ[Shift-U] 先頭へ [W or O] 

アンケート結果 [Shift-E] | サンプルコード | その他の工夫 [Shift-G]

リッチクライアント [Shift-A] | コンテンツ記述言語ZML [Shift-B] | 文書ワークフロー [Shift-C]
らくなび [Shift-D] | eラーニング [Shift-H] | ユーザビリティ診断 [Shift-I]