エディターで使える簡単デザイン! – テキスト装飾編

エディターで使える簡単デザイン! - テキスト装飾編
記事上のウィジェットエリア

この記事では、SWELLのエディターで使用できるデザイン実装機能について解説していきます。

今回は、デザイン実装機能の中でも「テキスト装飾」機能に焦点を当てて解説していきます。

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

マーカー線

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

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

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

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

あわせて読みたい
SWELLで使える「マーカー線」のカスタマイズ方法
SWELLで使える「マーカー線」のカスタマイズ方法この記事では、SWELLで使える「マーカー線」機能のカスタマイズ方法について解説していきます。【カスタマイザーの起動】マーカー線に関する設定はカスタマイザー内の「...

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

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

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

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


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

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

画像

フォントサイズ

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

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

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

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

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

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

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

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

フォントサイズを選択

文字色の変更機能

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

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

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

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

その他のテキスト装飾機能を紹介しておきます。

「注釈」デザイン

「注釈」として使用できるようにデザインされた、smallタグを挿入できる機能を備えております。

※ 注釈として表示したいテキスト

上記のように、フォントサイズを小さく、かつ色が薄くなるようなデザインとなっております。

使用方法

これまで紹介している「マーカー線」や「フォントサイズ」と同じようにして使用できます。

画像
ブロックエディター
画像
クラシックエディター

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

「インラインコード」として使用できるようにデザインされた、codeタグを挿入できる機能を備えております。
エンジニアの技術ブログで役に立てばいいなと思い、実装いたしました。

文章の中で function(){}など、コードを記述

使用方法

これまで紹介している「マーカー線」や「フォントサイズ」と同じようにして使用できます。

画像
ブロックエディター
画像
クラシックエディター

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

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

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

Highlighting Code Block
Highlighting Code Block

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

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

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

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

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

目次
目次