2020年8月のブログ収益が過去最高(6桁)を記録しました。ありがとうございます。

【コピペOK】CSSで簡単にキーボード風カスタマイズする方法【1分で終わります】

【コピペOK】CSSで簡単にキーボード風カスタマイズする方法

質問してる人

アラサー男子さん、ブログの記事でキーボード風のデザインをしたいんですけど…
キーボード風デザイン?

キーボード

こういうやつですか?

アラサー男子 in L.A.

質問してる人

おっ!?

まさにそれです!!

それでしたらめちゃくちゃカンタンです。

CSSのコードを紹介するので、まるっとコピペしてカスタマイズしちゃってくださいませ。

アラサー男子 in L.A.

 

本記事ではCSSを使って、文字をキーボード風にカスタマイズする方法を解説します。

コピペOK。作業は1分で終わります。

 

カスタマイズするキーボード風デザイン

カスタマイズなしで入力:command + C

CSSカスタマイズで入力:command + C

 

上記のカスタマイズが可能になります。

キーボードコマンドを紹介したい時などに見た目がかなりきれいになるので、この機会にどうぞ。

本記事で紹介しているCSSのコードをまるっとコピペでOKです。

スポンサードサーチ

【コピペOK】CSSで簡単にキーボード風カスタマイズする方法

CSSで簡単にキーボード風カスタマイズする方法

カスタマイズは簡単なのでサクッといきます。

CSSに下記のコードをコピーして貼り付けてください。

 

CSSコピペでOK
/* keyboard風 */
.keyboard {
	height: 25px;
	min-width: 20px;
	padding: 0 10px;
	margin: 5px 10px;
	background: #EDEDED;
	border-radius: 5px;
	box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
	color: #808080;
	text-align: center;
	line-height: 25px;
	display: inline-block;	
}

 

キーボード風フレームの高さや文字の大きさ等は、ブログの文字サイズや行間設定に合わせて調整してください。

 

 

続いて、このカスタマイズを書き出すときのコードがこちらです。

 

HTMLで書く時
<span class="keyboard">ここに文字入力</span>

 

これで下記のように表示されるようになります。

ここに文字入力

 

プラグイン「AddQuicktag」を使ってあらかじめ登録しておくと便利です。

 

本記事は以上です。カスタマイズは1分でしたね。

おわり。