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
サイト内検索
全記事表示リンク

PAGE TOP