【今なら1冊無料】 >>> 詳細はこちら

【便利】文字をキーボード風に装飾する機能の使い方|インラインスタイル|Cocoon

Cocoon_文字をキーボード風に装飾する機能の使い方WordPress

WordPressのCocoonで、文字をキーボード風に装飾する機能の使い方ご紹介します。

キーボード風の文字装飾というのは、例えばPCでのキーボード操作を説明する際の、

Shift + Ctrl + P

というショートカットキー操作の説明を、

 Shift  +  Ctrl  +  P 

のようにいかにもキーボードっぽい感じで解りやすく表現することができるので、読んでいる人にも伝わりやすくなるメリットがあります。

Cocoonはこのキーボード風にする装飾機能が標準で搭載されていますので使い方を解説します。

注意!WordPressの編集モードはクラシックエディタの場合で説明しますので、ブロックエディタを使用している場合はクラシックエディタ(旧エディタ)に切り替える必要があります。

 

Cocoon:文字をキーボード風にする機能を使う

キーボードキーのイメージ画像

 

(1)WordPressの文章入力で、キーボード風に装飾したいキーの文字をあらかじめ入力して下さい。ここでは例として「Ctrl」という文字で進めます。

Cocoon_CTRLの文字入力

 

(2)入力した文字をマウスのドラッグ操作で選択状態にして下さい。

Cocoon_文字を選択状態にする

 

(3)上部エディタメニューの一覧にある「スタイル」⇒「インライン」⇒「キーボードキー」をクリックして下さい。

Cocoon_スタイル_インライン_キーボードキーを選択

 

(4)指定した文字にキーボード風の装飾が実行されます。

Cocoon_キーボード風の文字装飾後

 

キーボードにこだわらず、他の文字よりも目立たせたいときなどにも有効です。

Cocoon_キーボード風の文字装飾の例

 

キーボード風にしたテキスト(文字)でも、通常のテキストと同じように編集することが出来ますので、スペルを間違えたり、やっぱり他のキーだったって時に変更したくなっても大丈夫です。

 

Cocoon:キーボード風にした文字を戻したい場合

消しゴム鉛筆のイメージ画像

★キーボード風にした文字を元の装飾していない状態に戻す場合は、装飾した時の手順と同じ操作を行います。

 

(1)装飾した文字の全体をマウスのドラッグ操作で選択状態にして下さい。

Cocoon_装飾した文字を選択状態にする

 

(2)上部エディタメニューの一覧にある「スタイル」⇒「インライン」⇒「キーボードキー」をクリックして下さい。
※装飾の効果が有効になっているコマンドは背景がピンクになっているので解りやすいです。

Cocoon_スタイルの解除_インライン_キーボードキーを選択

 

装飾を解除する場合の注意点としては、対象の文字列を全て選択状態にすることです。
選択から漏れた文字は、解除されず装飾が残ってしまいますので注意して下さい。

この他にもCocoonは標準機能で簡単に文字を装飾できる機能が多数ありますので、記事レイアウトのレベルアップに活用しましょう。

以上です、ありがとうございました。

コメント