<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/09/key-command-generator.jpg" alt="ショートカットキーを図解" title="key-command-generator" width="514" height="204" class="aligncenter size-full wp-image-16083" /></p>
<p>ブログやサイトでショートカットキーを紹介するときに、テキストで書くのも良いけれど、一番わかりやすいのはキーボードの図解を入れることですよね。</p>
<p>とはいえ、その都度図解するのはなかなか手間がかかるものです。</p>
<p>今回は、そんなショートカットキーの図解をカンタンに生成してくれるサービスをご紹介します。</p><!--more-->
<h3 class='header-label'>ショートカットキーのコマンド図解作成ツール</h3>
<p>「key command generator」は、<strong>ショートカットキーのコマンドの図解を、CSSとHTMLタグで生成する</strong>サービス。</p>
<p>たとえば "Ctrl + Shift + a" を紹介したい時には、”Ctrl”と”Shift”にチェックを入れ、数字とアルファベットを入力する欄に ”a” と入力すれば、図解用のタグが発行されるようになっています。</p>
<h4 class='tips'>コマンド図解のサンプル</h4>
<div id="keyboard_shortcut"><div id="modifier">ctrl</div><div id="plus">&#43;</div><div id="modifier">&#8679; shift</div><div id="plus">&#43;</div><div id="alphanumeric">a</div></div>
<p class="clear">↑このようなコマンドの図解をカンタンに生成することができます。（Macの⌘ Command にも対応）</p>
<h4 class='tips'>今回生成されたコード</h4>
<textarea name="code" class="xhtml" id="code">
<link href="http://adamscrap.com/css/key.css" rel="stylesheet" category="text/css" />
<div id="keyboard_shortcut">
<div id="modifier">ctrl</div>
<div id="plus">&#43;</div>
<div id="modifier">&#8679; shift</div>
<div id="plus">&#43;</div>
<div id="alphanumeric">a</div>
</div>
</textarea>
<p>↑生成されるコードもなかなか美しいもの。こういったものがサクっと作れてしまうのはとても便利ですね。</p>
<h4 class='tips'>ツールの使い方</h4>
<p><img src="http://web-marketing.zako.org/images/2010/09/key-command-generator1.png" alt="コマンドの設定" title="key-command-generator1" width="400" height="197" class="aligncenter size-full wp-image-16091" /><br />↑まずkey command generatorのページで、コマンドを設定します。</p>
<p><img src="http://web-marketing.zako.org/images/2010/09/key-command-generator2.png" alt="コマンドのタグ" title="key-command-generator2" width="400" height="255" class="aligncenter size-full wp-image-16090" /><br />↑そして「Generate」ボタンを押すと、<b>図解のプレビュー</b>と<b>図解を表示させるタグ</b>が生成されるので、表示させたい場所へ貼り付ければOKです。</p><p>（CSSを読み込む&lt;link で始まる部分は、可能であれば&lt;head&gt;の中に貼り付けると良いかも。）</p>
<p>興味のある方はkey command generatorへどうぞ。</p>
<p>こういったものを定期的に使うのであれば、本当は自分で作るべきなんでしょうけれど、今回のようなツールでサクッとできてしまうと非常に嬉しいものです。</p>
<p>Via:<a class='web-site-link' href="http://www.delicious.com/url/858f4bfd70ad1c1700c99637c01a770c" target="_blank">delicious</a></p>