MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

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

2020 4/03
SWELLで使える「テキスト装飾」機能
記事上のウィジェットエリア

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

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

マーカー線

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

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

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

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

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

ブロックエディターの場合

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

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


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

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

フォントサイズ

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

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

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

ブロックエディターの場合

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

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

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

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

フォントサイズを選択

文字色の変更機能

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

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

」・「」・「」の色味はカスタマイザーで設定できます。

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

その他にも、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!';

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

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

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

目次
閉じる