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

この記事は約1分37秒で読めます

この記事は2017年3月31日に書かれたもので、内容が古い可能性がありますのでご注意ください。
(ソフトウェア・コードスニペット関連記事は、バージョンアップ等にもご注意ください。)

キー操作の内容はこれ!【キーボードスタイル】を利用して可視化
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');

サンプルルン滞在記

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

【ここに文字列を記述】

【Enter】エンターキーをパチン!って押した時の快感たまらないないナイチンゲール。

がちょぴんコメント

これは使える!


( ・ω・o)o<[パンッ!] 記事終わり

記事の更新履歴

記事を公開しました。
記事を再編集しました。

コメント

コメントをお待ちしております

コメント投稿前に「プライバシーポリシー」を確認してください

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

1人の購読者に加わりましょう

プロフィール



Amazon ほしい物リスト

ホトパン履いてハイカット履いてる
有村架純ちゃんが、可愛い過ぎて
鼻血止まらない!

WPカテゴリ記事一覧

  1. WPプロフが!勝手に連携された「Find me on」を解決する
%d人のブロガーが「いいね」をつけました。