りんごが好きなのでぃす

Macを中心に、たま〜にiPhoneやiPadなどの話題も届けていたら今年で26年目を迎えてました

commandキーなどのマークをブログなどに表示する方法

 

あまりオススメは出来ませんが使いたい場合もあるし……ネ

OS X のメニュー項目に表示されているキーボードショートカットに用いられている記号。例えば command キーは四葉みたいなデザインが使われていますね。

cap_20130512_114712.jpg

四葉みたいなのが command キー、上向きの矢印は shift キー
平仮名の "へ" みたいなのが control キー、エスカレーターみたいなのが option キー

これらの記号を画像ではなく "テキスト" としてウェブページ上に表示させたい場合は以下のように記述します。

  • command キーは『⌘』
  • shift キーは『⇧』
  • control キーは『⌃』
  • option キーは『⌥』
  • delete キーは『⌫』

※ 上のキーボードボタン風のデザインは coliss さんで紹介されていたエントリーを参考に装飾しています

実際の記入例としては以下のようになります。

(表示例)キーを押しながら Q を押すとアプリの終了
(記入例)⌘キーを押しながら Q を押すとアプリの終了

ただしこれらの記号は機種依存文字になるので、Mac OS X と iOS 以外の環境では基本的に表示されないと考えて下さい。Mac や iOS 以外の訪問者が多いならば記号による表示は避けましょう。

ちなみに上の表示例では厳密に書くと以下のように記述してあります。

<span title="command">&#x2318;</span>キーを押しながら……

こうしておくと仮に Windows 環境で command 記号が表示できていなくてもマウスオーバーする事でツールチップに "command" と表示されるので、そこに何があるのかを知ってもらえます。気休め程度ですし、見る人がマウスオーバーしてくれないと気づかれませんけど σ(^_^;)

繰り返しになりますが機種依存性が高いので使用はほどほどに。