2014.06.24
ブログでキーボードショートカットを紹介する事があります。
最近では、Mac・WindowsのPowerPointでよく使用するキーボードショートカット一覧ですね。この記事でキーボードショートカットを紹介する時に、キーボード表示っぽくなるようなCSSを適用しました。
CSSを適用する事で、記事が見やすくなると思います。今回は、適用したCSSを紹介します。

参考:CSSで簡単にキーボードショートカットの表記を見やすくする方法 | iwb.jp
参考というか、同じです。
FC2ブログで適用するための手順を紹介しておきます。
以下のコードをCSSに貼付けます。

▲具体的には、FC2管理画面の設定→テンプレートの設定から

▲使用しているスタイルシートにコードをコピペして付け足します。付け足したら更新して完了です。

▲スマートフォン版のスタイルシートにも同じく貼付けて更新します。
これで完了しました。
表示したいキーボードを、
例えば、
command
のように表示されます。
単に、
command
と入力するよりも圧倒的にわかりやすいです。

これでブログでキーボードコマンドを紹介したい時でも簡単に見やすい内容を書くことが出来るようになりました。自分で書いた記事を自分でも結構見るので、見やすくなった事に大変満足しています。
参考:CSSで簡単にキーボードショートカットの表記を見やすくする方法 | iwb.jp
FC2ブログでコードを行番号つきで表示する方法
TextExpanderの予約語%clipboardを利用し、リンクタグを簡単に作成する方法
iPhoneで閲覧しているページのCSSのURLを確認する方法
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました
▼このカテゴリの最新記事
最近では、Mac・WindowsのPowerPointでよく使用するキーボードショートカット一覧ですね。この記事でキーボードショートカットを紹介する時に、キーボード表示っぽくなるようなCSSを適用しました。
CSSを適用する事で、記事が見やすくなると思います。今回は、適用したCSSを紹介します。

スポンサーリンク
CSSで見た目をキーボードのようにする
参考にさせていただいたページは以下になります。参考:CSSで簡単にキーボードショートカットの表記を見やすくする方法 | iwb.jp
参考というか、同じです。
FC2ブログで適用するための手順を紹介しておきます。
以下のコードをCSSに貼付けます。
.key { margin: 0 3px; padding: 1px 6px; border-radius: 3px; border: 1px solid #E0E0E0; border-bottom-width: 2px; background: #F0F0F0; background: -ms-linear-gradient(top, #F0F0F0, #FCFCFC); background: -moz-linear-gradient(top, #F0F0F0, #FCFCFC); background: -webkit-gradient(linear, center top, center bottom, from(#F0F0F0), to(#FCFCFC)); background: linear-gradient(top, #F0F0F0, #FCFCFC); font-family: Arial}

▲具体的には、FC2管理画面の設定→テンプレートの設定から

▲使用しているスタイルシートにコードをコピペして付け足します。付け足したら更新して完了です。

▲スマートフォン版のスタイルシートにも同じく貼付けて更新します。
これで完了しました。
使用例
使用の仕方です。表示したいキーボードを、
<span class="key"></span>で囲みます。
例えば、
<span class="key">command</span>と入力すると、
command
のように表示されます。
単に、
command
と入力するよりも圧倒的にわかりやすいです。
TextExpanderで登録
キーボードを表示する時の<span class="key"></span>を入力しやすいようにしました。具体的には、MacアプリのTextExpanderで「kkey」を入力したら
<span class="key"></span>を入力できるようにしてみました。

これでブログでキーボードコマンドを紹介したい時でも簡単に見やすい内容を書くことが出来るようになりました。自分で書いた記事を自分でも結構見るので、見やすくなった事に大変満足しています。
参考:CSSで簡単にキーボードショートカットの表記を見やすくする方法 | iwb.jp
![]() | TextExpander for Mac ![]() | |
カテゴリ: | 仕事効率化 | |
価格: | ¥3,500(記事掲載時点) | |
バージョン: | 3.4.2 | |
リリース日: | 2011/02/01 | |
AppStoreで詳細をみる |
関連記事



スポンサーリンク
過去記事セレクション
当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
▼このカテゴリの最新記事
- MacのMarsEdit・テキストエディットで特定のHTMLタグを削除する方法
- FC2ブログのPC・スマホテンプレートの見出しタグが統一されてなかった話
- ブログデザインの微調整は、Google Chromeの「要素の検証」で行っている
- ブログのスマートフォンページに「LINEで送る」自作ボタンを設置
- 「公式Twitterアプリでこの記事をつぶやく」ソーシャルボタンの作成&設置方法
- ブログの見出しテンプレート(ページ内リンクジャンプ有り)を作成した
- ブログでキーボードコマンドを見やすくするためのCSS設定方法
- iPhoneの文字入力で呼び出せるようにしておくと便利な記号たち
- Facebookへのブログ更新通知を手動&サムネイル付きで行うためのブックマークレットを導入
- Facebookのソーシャルプラグイン(Like Box)をFC2ブログのサイドバーに設置する方法
- ブログ用に、実名非表示のFacebookページを作成した
- FC2ブログではパスワードをかけて記事を限定公開することが出来る
- FC2ブログでコードを行番号つきで表示する方法
- リンク紹介する時にツイート数も一緒に表示する方法
- Livedoor Readerの購読者数を確認する方法
Relate Entry
Entry TAG