特別なプラグインをインストールしなくても書式設定を簡単に保存できますか

SWELLのカスタム書式を使うことで２個までは書式設定を簡単に保存、呼び出しすることができます。

CSSの書き方がわかりません

サンプル用のCSSをコピペして使ってください。

SWELLでプラグインを使わずにキーボード風の文字を使う方法

2023年1月9日

こんな人にオススメの記事です

WordPressテーマ「SWELL」を使っている人
キーボード風の書式を簡単に使いたい人
プラグインを極力増やさずにカスタム書式を使いたい人

このサイトでも利用させていただいているWordPressテーマ「SWELL」のカスタム書式を使って、簡単にキーボード風の文字を使う方法を、サンプルCSS付きで詳しく解説していきます。

SWELLにはカスタム書式を２個まで設定できるため、このページではAddQuickTagsなどのプラグインは使わずに、SWELLの機能だけを使った設定方法をご紹介します。

SWELLでプラグインを使わずにキーボード風の文字を使う方法　最終ゴールのイメージ

ctrl + alt + DELETE　このようなキーボード風の文字を使うとサイトの見やすさがグンと上がると思いますので、「SWELL」を使っている人は是非ご覧ください。

SWELLのカスタム書式にキーボード風文字のCSSを追加する

まずはSWELLのカスタム書式にCSSを追加していきます。

STEP

ダッシュボードから[エディター設定]を開く

まずはWordPressのダッシュボードを開き、画面上部にある[SWELL設定]をクリックしてください。

[SWELL設定]をクリックすると下に向かってメニューが展開されます。

その中にある[エディター設定]をクリックしてください。

STEP

[カスタム書式]をクリック

[エディター設定]をクリックすると「エディター設定」と大きく書かれたページに移動します。

その中にある[カスタム書式]をクリックしてください。

STEP

カスタム書式の[表示名]を入力

[カスタム書式]をクリックすると「カスタム書式セット」と大きく書かれたページに移動します。

そのページを少し下にスクロールしていくと「カスタム書式」と書かれた段落があります。

「カスタム書式」の「カスタム書式 -1」または「カスタム書式 -2」の表示名にわかりやすい名前を入力してください。

STEP

カスタム書式用CSSを入力

表示名を入力したら、更に下にスクロールしてカスタム書式用CSSを入力してください。
このサイトと全く同じで良ければ以下のCSSをコピペしてください。

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

2行目の.swl-format-2はカスタム書式 - 2のクラス名です。
カスタム書式 - 1を使う場合は、CSSの2行目を.swl-format-1 {にしてください。