SWELLでキーボード風文字装飾をする簡単な方法を２つ紹介

2023年4月29日

wordpressのテーマをcocoonからSWELL移行しました。

ただいま記事のリライト（修正）に奮闘中ですけど。

ところで、SWELLで記事を書いていて気づいたことが結構あります。

けーさん

気づいた事というか、cocoonでできたことがSWELLでできなくなった（やり方が変わった）事なんですが。

今回はその中の一つ、キーボード風文字装飾の記述方法について説明します。

キーボード風文字装飾とは

正式には何て言うのか知りませんが、キーボード風文字装飾はパソコンのキーボードキーをブログ記事で書く時、ほかの文字と区別してわかりやすくする表示方法です。

例えばキーボードキーの「Ctrl」をCtrlのように表示します。

キーボードキーに限らず、設定画面やプロパティウィンドウに出てくる「OK」ボタンや「次へ」ボタンを説明する時にも、OKや次へのように使っています。

この文字装飾は、以前使っていたcocoonではブロックエディタのツールバーから簡単に呼び出せました。

上図のように、装飾したい文字を選択し、ツールバーのA（文字装飾ボタン）をクリック、プルダウンメニューから「キーボードキー」を選ぶだけです。

でもSWELLはデフォルトではこの機能を使えません。

なので少しカスタマイズしてやります。

カスタマイズ方法は2つありますので、それぞれ説明します。

【キーボード風文字装飾方法】

ツールバーのキーボード入力を使う方法
SWELのカスタム書式を使う方法

ツールバーの「キーボード入力」を使う

SWELLのブロックエディタのツールバーにある「」（下向きというのか？）をクリックすると、プルダウンメニューの中に、「キーボード入力」というのがあります。

はるこ

これで一見できそうだけど、そのままじゃ使えないのよねぇ。

これをそのまま使っても何も変化しません。でも「htmlとして編集」に変えてみると、

<p>これを<kdb>そのまま</kdb>つかっても</p>

このように表示されています。

つまり指定した範囲は<kdb>というタグで囲まれているんです。

キーボード入力のcssカスタマイズ

デフォルトではこの<kdb>タグに何も指定されていませんので、キーボード風文字装飾になるようにcssで指定してやります。

wordpressのダッシュボード⇒外観⇒カスタマイズ⇒追加cssを開きます。

追加cssを開いたら、以下のcssをコピペしてください。

/***キーボード風文字装飾***/
kbd {
  padding: 1px 3px;
  background-color: #f9f9f9;
  background-image: -moz-linear-gradient(center top , #eee, #f9f9f9, #eee);
  border: 1px solid #aaa;
  border-radius: 2px;
  box-shadow: 1px 2px 2px #ddd;
  font-family: inherit;
  font-size: 0.85em;
}

cssに詳しい方は構文を独自にカスタマイズしてくださいね。

コピペしたら、必ず上部の公開ボタンを押して変更を保存してください。

これでツールバーのキーボード入力で装飾ができるようになります。

デフォルト

css追加後

公開ボタン

公開ボタン

SWELLのカスタム書式を使う

もう一つは、SWELL設定のエディター設定から行う方法です。

wordpressのダッシュボード⇒SWELL設定⇒エディター設定⇒カスタム書式を開きます。

「カスタム書式」タブを開いたら、

①カスタム書式の部分のカスタム書式ー1にある表示名のボックスに、自分で覚えやすい名前（ここではキーボードキーとしています）を入力し、

②カスタム書式用cssの空欄に次のcssをコピペします。

/* keyboard */
.swl-format-1 {
	height: 25px;
	min-width: 20px;
	padding: 0 10px;
	margin: 5px 10px;
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
	color: #333333;
	text-align: center;
	line-height: 25px;
	display: inline-block;	
}

最後に変更を保存ボタンを押して完了です。

設定が完了すると、ブロックエディタのツールバーのSWELLボタンのプルダウンメニューに先ほど記入した表示名（ここでは「キーボードキー」）が表示されています。