ショートカットの表記をそれっぽくする
ブログでAppleWatchのアプリ開発の記事を書いていくなかで、Xcodeのショートカットキーをいい感じに見せたくて少しだけカスタマイズしてみた。
参考サイト: coliss.com
というわけで、さっそくどういう見た目になるかと言うと…
New Tab ⌘ + t
New Window ⌘ + n
New Incognito Window ⇧ + ⌘ + n
Reopen Closed Tab ⇧ + ⌘ + t
記述するCSSは以下。 はてなブログのダッシュボードから、「デザイン設定」>「カスタマイズ」と選択し、デザインCSSに追記する。
.mac-key { /*Box Properties*/ display:inline-block; width:48px; height:48px; margin: 0px 4px; background: #fff; border-radius: 4px; box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5); /*Text Properties*/ font: 18px/48px Helvetica, serif ; text-transform: uppercase; text-align: center; color: #666; }
問題はスマホの表示。
スマホのCSSをカスタマイズするには、はてなブログproの契約が必要っぽい。
記事本文中にスタイルを記述してみようとも思ったけど、それはそれでめんどくさいしな…。
スマホ版についてはもう少し検討。
手っ取り早くProにするのがいいのかもしれないけれど…。