こんにちは けいこぶ です。
ブログでパソコンの操作を紹介しているときに、ふとキーボード風の文字にしたいときはないですか？例えば…
Shift+Ctrlを押してください
だとちょっと物足りないですよね。これをキーボード風にすると…
Shift+Ctrlを押してください
になります。あるいはタイトル画像にあるようなグレーのキーボードボタン風の見た目にすることもできます。
そんなちょっと文字をキーボード風に文字を変える方法、それを記事に簡単に埋め込む方法をご紹介します。
■目次■
前提となるプラグイン「AddQuicktag」
文字の装飾はCSSを使って変えていきます。
ですが、文字を変えるたびにCSSを入力していくのはとても面倒です。ワードプレスのプラグインを入れて作業を楽にしましょう。
導入するプラグインは「AddQuicktag」を使います。AddQuicktagに関しては他のブログでもたびたび紹介されていますのでプラグイン導入の説明は省略します。
AddQuicktagでのHTMLタグの登録
AddQuicktagを導入しましたら、まずは「設定」⇒「AddQuicktag」と進み設定画面に移動しましょう。
設定画面を下に送っていきますと「ボタン名*」と表示された画面が出てきます。ここにキーボード風の文字に装飾するHTMLタグを登録します。
ここでは入力は次のように入力してください。
入力が完了しましたら「変更を保存」を押して登録を完了します。
キーボード風の文字のCSSを登録
次にキーボード風の文字に装飾するCSSを追記します。
追記するCSSを2つご紹介しますので、どちらか好きな方を追記してください。
/* キーボードボタン */
.keyboard {
height: 30px;
min-width: 20px;
padding: 0 10px;
margin: 5px 10px;
background: #EDEDED;
border-radius: 5px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
color: #808080;
font: bold 18px arial;
text-align: center;
line-height: 30px;
display: inline-block;
}
/* キーボードボタン */
.keyboard {
height: 30px;
min-width: 20px;
padding: 0 10px;
margin: 5px 10px;
background: #fff;
border-radius: 5px;
border: 2px solid #000;
color: #000;
font: bold 18px arial;
text-align: center;
line-height: 30px;
display: inline-block;
}私は悩んだ末にモノクロの方にしました。なんだかんだでシンプルが一番ですしね。
これで文字をキーボード風にする準備は完了です。
実際に使ってみましょう
記事の投稿画面のショートコード部分に先ほど登録した「keyboard」タグがあると思います。
キーボード風にしたい文字をドラッグして「Keyboard」タグを埋め込んでみましょう。
Shift+Ctrlを押してみましょう。
タグを埋め込んだ文字がキーボード風になっていると思います。
ShiftとCtrlを別々にボタンにしたい場合は各々にタグを埋め込みましょう。両方ともドラッグしてしまいますと…
Shift+Ctrlを押してみましょう。
両方を囲うボタンとなってしまいます。
わざわざボタンをスクリーンショットしていた過去の私
AddQuicktagを利用したタグの埋め込み、いかがでしょうか。うまくいきましたか？
これって便利ですよね。過去の私にも教えてあげたいです。過去の私は…
キーボードの画像からボタンをくりぬいて貼りつけていました(´・ω・｀)
うん、今思うとなんとまあ無駄な作業をやっていたのだろうと思い知らされます。
他のソフトではCSSを使っていろいろとやっているのに、ワードプレスとなると不慣れゆえに脳死していたようです。
ワードプレスってホント便利ですよね。バンバンとタグを登録して楽をしたいと思います。
開始タグ*
終了タグ*