完全無料!授業料0円のプログラミング教室特集はこちら

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

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

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

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

 

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

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

キーボード

 

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

 

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

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

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

 

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

 

スポンサードサーチ

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

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;	
}

 

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

marginpaddingで上下の余白を調整できます。

 

HTMLでclassを指定し読み込む

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

 

HTMLの記載方法
<span class="keyboard">ここに文字入力</span>

 

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

ここに文字入力

 

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

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

AddQuicktag

 

おわりです。