キー操作の内容はこれ!【キーボードスタイル】を利用して可視化

Webツール・Webサービス・ソフトウェア等、
手順を紹介する場合にキー操作(○キー押す or ○キー押しながら○キー押す)も紹介する事ありますね。
良くある例では【○キー】といった「隅付き括弧」(墨付き括弧・隅付きパーレンとも呼ばれる)で、
キーボードスタイルを表現していますが、質素な感じで何か物足りない感じがするユーザーには、
CSSでキーボードスタイルにしてリアルに見えるように目立たせるようにしましょう！

これがキーボードスタイルのCSSコード

下記のCSSコードをコピーしてCSSファイルに貼り付ける。
後は、キーボードスタイル化にしたい文字をマークアップする。

key-bod {
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

WPでは「ショートコード」を利用する方法もある

WPでは「ショートコード」と呼ばれるタグを利用する事ができ、
キーボードスタイルを利用する上で、ショートコードと一緒に利用したい場合は下記のコードをコピーして、
functions.php に貼り付けますが、イジリー岡田(がちょぴん語でイジる)するのが怖い方はCSSコードのみをお勧めします。

function awts_keystyle($atts, $content = null) {
extract(shortcode_atts(array(
'link' => '#'
), $atts));
return '<key-bod>'.$content.'</key-bod>';
}
add_shortcode('keybt', 'awts_keystyle');

サンプルルン滞在記

タグの記述方法・サンプルルン滞在記(がちょぴん語で、サンプル)はこちらになります。

[keybt]【ここに文字列を記述】[/keybt]

がちょぴんコメント

( ･ω･o)o＜[ﾊﾟﾝｯ!] 記事終わり

記事の更新履歴