アイアンマンになりたい

アイアンマンになりたい

35歳、2児の父。将来の夢「アイアンマン」

ショートカットの表記をそれっぽくする

f:id:ultimate-ez:20170507063933p:plain

ブログで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にするのがいいのかもしれないけれど…。