MENU
カテゴリー

SWELLで使えるテキスト装飾機能(書式)一覧

記事上のウィジェットエリア

この記事では、SWELLのエディターで使用できるテキスト装飾(書式)について解説していきます。

当ページで紹介する書式ボタンの位置は設定によって一部変更できるため、配置がお手元の画面とは異なる場合がございます。

また、アップデートにより、当ページで紹介している内容と最新版での実際の見た目とは異なる場合がございます。

キスト装飾機能を使う様子

目次
目次広告表示エリア

テキスト色の変更機能

WordPress5.4から、ブロックエディターの標準機能としてテキスト色変更機能が追加されました。
それにより、SWELLで独自実装していた類似機能は廃止しています。

下の画像のように、標準機能として使える「テキスト色」がありますので、そちらをお使いください!

コアの「テキスト色」ボタン

このボタンを押すと以下のようにカラーパレットが出現するので、好きな色を選択してください。

こんな感じで 好きな色に 変更できます

ちなみに、このパレットのうち、オレンジ枠で囲んだ部分の8色は好きな色にカスタマイズすることができます!

インライン背景色の変更機能

インラインの文字色変更ツールと同じ使用感で、「背景色」も好きな色に設定することができます!

こんな感じで 背景を 変更できます

ツールバーのペイントマークをクリックしてね

マーカー線

SWELLでは、簡単にマーカー線を引いたようなテキスト装飾を加えることができます。

  • オレンジのマーカーです
  • イエローのマーカーです
  • グリーンのマーカーです
  • ブルーのマーカーです

カラーは4色を自由に設定でき、デザインは4パターンの中から1つを選んでご利用いただけます。

これらのマーカー線についての設定はテーマカスタマイザーにて設定することが可能です。
具体的なカスタマイズ方法は以下の記事を参考にしてください。

「マーカー線」の使用方法

テキストを選択した状態で、ツールバーから各マーカー色に対応するアイコンをクリックするだけです!

マーカーアイコンを選択
※ アイコンはアップデートにより変更される場合があります。


クラシックエディターの場合

テキストを選択した状態で、スタイルセレクトから各マーカー色に対応する項目をクリックするだけです!

フォントサイズ

SWELLでは、WordPress標準の機能とは別に、レスポンシブに対応しているフォントサイズ変更機能を備えております。

フォントサイズ:極小
フォントサイズ:小
フォントサイズ:大
フォントサイズ:特大

「フォントサイズ」を変更する方法

テキストを選択した状態で、ツールバーのフォントサイズのアイコンをクリックすると選択できます!

フォントサイズを選択
※ アイコンはアップデートにより変更される場合があります。

クラシックエディターの場合

テキストを選択した状態で、スタイルセレクトから各フォントサイズに対応する項目をクリックするだけです!

フォントサイズを選択

その他のテキスト装飾機能

その他にも、SWELL独自のテキスト装飾機能があるのでまとめて紹介しておきます。

「インラインコード」デザイン

SWELLでは、codeタグを簡単に挿入できる機能を備えております。
エンジニアの技術ブログで役に立てばいいなと思い、実装いたしました。

ブロックエディターでは、標準機能としてインラインコードの装飾機能がありますが
SWELLはその他にFILEDIRのアイコン付きコードタグを2種類用意しています。

アイコン付きインラインコード

クラシックエディター

クラシックエディターでも、インラインコードを簡単に適用することが可能になっています。

クラシックエディター

「注釈」デザイン

「注釈」として使用できるようなテキスト装飾も可能です。

「注釈」を適用した様子

※ こんな感じで、薄く小さく表示されます。

使い方

インラインコードなどと同様、ツールバーの中に用意しています。

クラシックエディターでも、他のテキスト装飾と同様です。

クラシックエディター

ソースコードの「シンタックスハイライト」機能

ソースコードの「シンタックスハイライト」機能については、限定的な需要のため、プラグインとして開発いたしました。

プラグインの新規追加画面にて「Highlighting Code Block」と検索していただくか、以下の画像リンクからダウンロードしてご使用ください。

Highlighting Code Block
Highlighting Code Block

このプラグインを使うことで、各言語に合わせてシンタックスハイライトされるコードブロックを簡単に挿入できるようになります。

<h1>Hello, World!</h1>
console.log('Hello, World!');
echo 'Hello, World!';

このプラグインの詳細な使用方法は、こちらの専用ページでご確認ください。

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる