OctpressでMacのキーボードの様な表示をさせるプラグインを作りました。
キーボード表示自体は簡単なCSSで実装して、
プラグインを使う事でCommand:⌘(⌘)等の記号を
キーコードを覚えずにLiquidタグで簡単に書ける様になります。
インストール
以下のレポジトリからファイルを取ってきてREADMEに従ってプラグインと scssファイルを導入して下さい
使い方
導入したらkeyとう言うLinquidタグが使える様になるので
好きなアルファベットなり単語をkeyの後に入れるだけです。
文字列をキーボード化
{% key a %}: a{% key A %}: A{% key Enter %}: Enter
記号
文字列だけだと直接html書いても余り変わらないわけですが、
プラグインでは以下の記号について、symbolという引数を与えた後に
適当なワードを与えると記号に変換します。
{% key symbol apple %}: {% key symbol cmd %}: ⌘- cmd等いくつかの記号については複数の1つの記号に対して複数のワードが用意されています
{% key symbol command %}: ⌘
- その他全てのワードについては
keyboardkey.rbの中身を見てみて下さい。
- cmd等いくつかの記号については複数の1つの記号に対して複数のワードが用意されています
{% key symbol opt %}: ⌥{% key symbol shift %}: ⇧{% key symbol ctr %}: ⌃{% key symbol tab %}: ⇥{% key symbol esc %}: ⎋{% key symbol bs %}: ⌫{% key symbol return %}: ⏎{% key symbol delete %}: ⌦{% key symbol clear %}: ⌧{% key symbol eject %}: ⏏{% key symbol capslock %}: ⇪{% key symbol pageup %}: ⇞{% key symbol pagedown %}: ⇟{% key symbol home %}: ↖{% key symbol end %}: ↘{% key symbol left %}: ⇠{% key symbol up %}: ⇡{% key symbol right %}: ⇢{% key symbol down %}: ⇣{% key symbol eacute %}: é{% key symbol clock %}: ⌚{% key symbol gear %}: ⚙{% key symbol space %}:{% key symbol asterisk %}: ∗{% key symbol not %}: ¬{% key symbol sup2 %}: ²{% key symbol sup3 %}: ³{% key symbol times %}: ×{% key symbol divide %}: ÷{% key symbol radic %}: √{% key symbol sdot %}: ⋅{% key symbol middot %}: ·{% key symbol 3dots %}: …{% key symbol check %}: ✓{% key symbol diamond %}: ◆{% key symbol diamond_white %}: ◇{% key symbol quote %}: "{% key symbol amp %}: &{% key symbol lt %}: <{% key symbol gt %}: >{% key symbol lsquare %}: [{% key symbol rsquare %}: ]{% key symbol lbrace %}: {{% key symbol rbrace %}: }{% key symbol lparensesis %}: ({% key symbol rparensesis %}: ){% key symbol copy %}: ©{% key symbol deg %}: °
サイズの変更
{% key a key_half %}: a{% key a key_small %}: a{% key a key_large %}: a{% key a key_2x %}: a{% key a key_3x %}: a{% key a key_4x %}: a{% key a key_5x %}: a
黒キーボード
{% key a key_black %}: a
文字列を強制的に全て大文字化
{% key a key_uppercase %}: a
複数の組み合わせ
{% key symbol cmd key_large key_black %}: ⌘
表示を変えたいとき
表示が気に喰わない場合はsass/custom/_keyboardkey.scssを調整して下さい。
Octopress以外で使う方法(plugin無しで使う方法)
上の方法ではOctopressプレグインを使ってLiquidタグで簡単に
書ける様にしましたが、
keyboardkeyレポジトリにある
keyboardkey.scssと言うscssファイルを導入すれば
Octopress関係なく簡単に記号を含めたキーを書ける様になります。
こんな感じでi要素を書くと上にあるのと同じようなキーを表示します。
<i class='key'>A</i>
<i class='key key_ctrl'></i>
key_largeやkey_black等はそのままクラス名なのでclassの所に加えて上げると
上と同じようになりますが、symbolに関してはLiquidで変換するための引数なので
記号変換したい場合は上の様にkey_+記号名の様なクラスが定義してあるので
それを加えて下さい。
どの記号が使えるかはこれもkeyboardkey.scssを参照、ということで。
Sponsored Links