【kbdタグ】プラグイン無しで文字をキーボード入力風に装飾する方法

記事を読んでいると、たまに文字がキーボードの入力キーみたいに装飾してあるのを見かける。あれを自分も使ってみたいのだけど、どうやればいいの?

 

あなたが求めているものは、これですね?↓

 

Ctrl + Shift + S

 

上記のように、文字をキーボード入力風に装飾することで、どのキーを押したら良いか説明する時において視覚的に分かりやすくなるので便利です。おまけにオシャレですよね。

 

WordPressプラグインで実装するやり方もありますが、プラグインを一切使わずとも実装できます。

 

それでは、始めていきましょう(・∀・)!

 

 

プラグイン無しで文字をキーボード入力風に装飾する方法

 

先ほどの

 

Ctrl + Shift + S

 

のHTMLがどうなっているのかを見てみると…↓

 

<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></p>

 

見て分かる通り、kbdというHTMLタグを使っています。kdbとはkeyboardの略ですね。

 

いつのHTMLバージョンから勧告(仕様が標準化されること)されたのかは知りませんが、キーボード入力風にしたい文字を「<kbd></kbd>」で囲うだけで実装できるようになっています。

 

このkdbタグにCSSを加えることで、上記のような仕上がりになってくれます。

 

ここで1つ注意なのが、HTMLタグにおけるCSSはテーマの「style.css」に記述するのではなく、WordPressメニューの「外観」→「カスタマイズ」→「追加CSS」に記述するという点です。僕はここで躓きました…。

 

ここの理解がちょっとややこしいのですが、僕の解釈では、「kbdはHTMLタグだからテーマは関係ない」というものです。たぶん大体合っている…と思う。

 

それで、追加CSSに記述するコードは以下のとおり。

 


kbd {
background-color: #eee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
color: #333;
display: inline-block;
font-size: .85em;
font-weight: 700;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
}

 

参考元①:キーボード入力要素-HTML:ハイパーテキストマークアップ言語| MDN

参考元②:kbdタグ:キーボードなどの入力を表す | HTMLリファレンス

 

こちらで紹介しているのは参考元①のサイトで書かれているコードですが、①も②も記述の順番が違うだけで仕上がりは同じです。

 

どちらのサイトもおそらく当たり前すぎて書いていないのだろうと思われますが、CSSは「外観」→「カスタマイズ」→「追加CSS」に記述するという点が最も重要な部分です(大事だから2回言う)。

 

CSSを入れたら、後はキーボード入力風にしたい文字を「<kbd>○○</kbd>」で囲うだけです。

 

訳さえ分かれば、非常に簡単ですね。

 

参考元の記事も合わせて読むと、より理解が深まるかと思います。

 

お役に立てれば幸いです。

 

それでは。
チャオ(・∀・)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です