HOME   »   ブログ運営  »  ブログでキーボードコマンドを見やすくするためのCSS設定方法
RSSフィード
ブログでキーボードショートカットを紹介する事があります。

最近では、Mac・WindowsのPowerPointでよく使用するキーボードショートカット一覧ですね。この記事でキーボードショートカットを紹介する時に、キーボード表示っぽくなるようなCSSを適用しました。

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ブログキーボードショートカット用CSS
▲具体的には、FC2管理画面の設定→テンプレートの設定から

fc2ブログキーボードショートカット用CSS
▲使用しているスタイルシートにコードをコピペして付け足します。付け足したら更新して完了です。

fc2ブログキーボードショートカット用CSS
▲スマートフォン版のスタイルシートにも同じく貼付けて更新します。

これで完了しました。

使用例

使用の仕方です。

表示したいキーボードを、
<span class="key"></span>
で囲みます。

例えば、
<span class="key">command</span>
と入力すると、
command
のように表示されます。

単に、
command
と入力するよりも圧倒的にわかりやすいです。

TextExpanderで登録

キーボードを表示する時の
<span class="key"></span>
を入力しやすいようにしました。具体的には、MacアプリのTextExpanderで「kkey」を入力したら
<span class="key"></span>
を入力できるようにしてみました。

ブログキーボードcss

これでブログでキーボードコマンドを紹介したい時でも簡単に見やすい内容を書くことが出来るようになりました。自分で書いた記事を自分でも結構見るので、見やすくなった事に大変満足しています。

参考:CSSで簡単にキーボードショートカットの表記を見やすくする方法 | iwb.jp

TextExpander for Mac App
カテゴリ:仕事効率化
価格:¥3,500(記事掲載時点)
バージョン: 3.4.2
リリース日:2011/02/01
AppStoreで詳細をみる

関連記事

FC2ブログでコードを行番号つきで表示する方法

TextExpanderの予約語%clipboardを利用し、リンクタグを簡単に作成する方法

iPhoneで閲覧しているページのCSSのURLを確認する方法

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
ブログ   css  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP