リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

「?」キー押下でキーボードショートカットのヘルプを表示、を簡単に実装できる「QuestionMark.js」


ご存知でしょうか。

実は、多くのモダンなWebサイトでは、サイト閲覧中に「?」キー(「Shift」+「/」)を押下するとキーボードショートカットのヘルプが表示されるようになっています。

例えば、TwitterGithubGmailGoogle+などで実装されています。

QuestionMark.jsで簡単に実装

このヘルプ表示機能を簡単に実装できるライブラリが「QuestionMark.js」です。

使い方もとても簡単。

QuestionMark.jsのサイトからファイル一式をダウンロードして、展開すると

  • css/
  • js/
  • index.html
  • question.mark.html

が入っています。

この状態で、index.htmlからjs/js/question.mark.jsおよびcss/question.mark.cssを読み込めば、index.html上で「?」によるヘルプ表示ができるようになります。

あとは、question.mark.htmlの内容を自分のWebサイトに合う内容に修正すればOKです。

デモページはこちら

余談

ちなみに、「/」押下で検索窓へフォーカスするというキーボードショートカットも割と一般的です。

Googleの検索画面で「/」と打つと検索窓に一発でフォーカスするので非常に便利ですよ。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック