SWELLで使える「テキスト装飾」機能

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

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

SWELL 2.0.5アップデートにより、WordPress5.4の進化に合わせてSWELLのテキスト装飾機能もリニューアルしました。

現在の最新版と、この記事の内容の見た目が異なっておりますのでご注意ください…!
(記事書き直します!)

新しいテキスト装飾機能を使う様子

目次
目次前広告表示エリア

インライン文字色の変更機能

ver. 1.2.5より追加された機能で、インラインで文字色を変更することができます。

文字色変更機能
文字色変更機能

SWELL 2.0.5にて上記の機能は廃止しました!

WordPress5.4から、ブロックエディターの標準機能としてもっと使いやすいインライン文字色変更機能が追加されました。

それにより、SWELLで実装していた機能は廃止しています。

下の画像のように、
リンクボタンの右側にあるボタンの中に標準機能として使える「文字色」がありますので、そちらをお使いください!

新しいインライン文字色変更機能

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

カラーパレットが出現

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

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

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

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

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

SWELLマークの中にあります

マーカー線

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!';

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

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

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

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