CSSでキーボード風カスタマイズする方法【1分で終わる】

CSSでキーボードっぽい見た目を作りたい。

ブログで映える良い感じのカスタマイズはないかな？

こんなお悩みに答えます。

本記事にあるCSSコードをコピペしてもらえれば、下記のようなキーボード風デザインが簡単に作れるので参考にどうぞ。

キーボード

コピペOKなので、所要時間は、1分ほどです。

CSSで作るキーボード風デザイン

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

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

こんな感じの見た目になるので、ショートカットキーなどを紹介する記事で、ちょっとだけ映えると思います。

スポンサードサーチ

本記事のもくじ

CSSでキーボード風カスタマイズする方法（コピペで1分）

コピーする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;	
}

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

margin、paddingで上下の余白を調整できます。

HTMLでclassを指定し読み込む

CSSカスタマイズを書き出すときのHTMLコードがこちらです。

HTMLの記載方法

<span class="keyboard">ここに文字入力</span>

これで下記のとおり、表示されます。

ここに文字入力

毎回HTMLコードを入力するのはめんどい…

キーボード風カスタマイズを挿入するときに、毎回HTMLコードを入力するのはめんどくさいので、WordPressの場合は「AddQuicktag」というプラグインを使って、HTMLコードを登録しておくと便利です。

AddQuicktag

おわりです。