キー操作(kbd Tag)を美しくカスタマイズ

※Wordpressからはてなブログに乗り換えました。過去記事をそのまま移管しています。

Wordpress でキー操作(Ctrl + Cとか)を記述する機会が多くなりそうなので、もっと美しく表示させるCSSのカスタマイズ方法をメモ書きしておきます。

はじめに

Wordpress を本格的は何に使い始めてまだ半月ほどですが、色々気になるところが出てきています。少しずつカスタマイズしていきたいところです。自分自身への備忘も兼ねてカスタマイズ内容は、適時記載しておこうと思います。テーマが違ったりしてそのまま使えないかもしれませんが、参考になる部分があれば幸いです。ちなみに、最近、テーマをバズ部が提供する"Xeory Base"に変えました。しばらくはこのテーマを使っていこうと思っています。

xeory.jp

今回のCSSのカスタマイズはすでに様々な方がチャレンジしているので、ほぼ情報を集めて転記しただけです。

どのようになるのか

目指す形は、このような感じです。

例) コピーコマンド : Ctrl + c

Markdown 記述でみると<kbd>Ctrl+c</kbd>となります。

CSSの設定を記載する

Style.css を直接触ってもよいのですが、追加CSSが設定できると思いますので、下記のCSSコードを設定すればOKです。

kbd {
    padding:0.1em 0.6em;
    border:1px solid #ccc;
    font-size:0.75em;
    font-family:Arial,Helvetica,sans-serif;
    background-color:#f7f7f7;
    color:#333;
    -moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    display:inline-block;
    margin:0 0.1em;
    text-shadow:0 1px 0 #fff;
    line-height:1.4;
    white-space:nowrap;
    overflow-x: visible;
}

中身の説明は省略しますが、kbdタグの中身を追加CSSで上書きしています。設定するテーマによっては、若干うまく表示されないかもしれません。各自で調整してみてください。

書いていて次に気になったのは、codeタグの中身の見え方が美しくない・・・近いうちにカスタマイズして美しいコードが出るようにしたいと思います。