とっても簡単に適用出来るシンプル且つCoolなkbd要素用CSS-KEYS.css - 適宜覚書-Fragments

とっても簡単に適用出来るシンプル且つCoolなkbd要素用CSS-KEYS.css

      2017/03/03

KEYS.cssロゴ
KEYS.cssロゴ

KEYS.cssロゴ

先だって、ショートカットキーを説明する際便利な図を作成してくれるサービス-adam’scrap.com | 適宜覚書-Fragmentsという記事で、キートップのように見える図を作る方法を紹介しました。

題名通りとっても簡単に作成出来るのですが、所感に示したようにWordpressで記事に直接Link要素を書くと無効化されてしまうので上手く使えないというオチがつきましたorz。検証しながら書くという記事作成の手順を取っていたので、紹介はすれども自分で使えないとは情けありません。自業自得とはいえ、屈辱的であったので蛇のようにしつこく対応について考えておりました。

で、今回は、いっそのことHeaderに手を付けて対応してしまうことにしました。合わせてkbd要素用の外部CSSを組み込むことにしたので、その手順を紹介します。

keys.cssの適用

  1. KEYS.cssをWebブラウザで開きます。今回適用するKBD要素用のCSSファイルの配布元です。
  2. 画面最下部にあるDownloadの項目にあるようにDownloadリンクをクリックするかAlt+Dのショートカットを使うと、Zip形式で関連ファイルをダウンロード出来ます。
  3. Zipファイルを解凍すると3ファイル出来ます。keys.css(本体)、LICENSE.txt(使用ライセンス)、readme.md(説明ファイル)です。
  4. 直接mdファイルを読めるのであれば良いですが、そうでないなら同じものが読みやすく整形されてmichaelhue's keyscss at master - GitHubにあるのでそちらを読みましょう。
  5. keys.cssを自分のWebサイト内の任意の場所にアップロードします。
  6. Head要素内にCSSの指定を以下のように追加します。
  7. 筆者の場合、Wordpressで使用しているheader.phpの中にある既存のCSSの下あたりに記述しました。実際には、先にkeys.cssを置いたパスを指定しています。

    Head内にCSSの指定を追記

    Head内にCSSの指定を追記

  8. これで導入は終わりです(^^。

使ってみる

では、実際に使ってみます。色は黒と白の2つから選択出来ます。何も指定しない場合は既定で黒いキートップが使われます。実際に下記してみましょう。

これは全てctrl + Alt + Deleteのように黒になりますし、ctrl + Alt + Deleteのように白にしたい場合は下記のように記述します。

Compatible with all modern browsers, degrades gracefully in older onesとありますように最近のWebブラウザなら意図したようなキートップ状のスタイルとなりますし、非対応のものでもそれなりに見られるものにしてくれるようです。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Tips, Webブラウザ, WordPress, 覚書 ,