[拡張]リッチテキスト対応ブロックの拡張機能

ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks Free」または「DigiPress Ex – Blocks」が必要です。

「段落」や「見出し」などの WordPress 標準ブロックでは、全体のテキスト装飾(太字、文字色、背景色などの指定)は可能ですが、選択範囲を指定したテキスト装飾が行えません。

「DigiPress Ex – Blocks」プラグインを利用することで、「段落」や「見出し」などのテキストを挿入するエリアを持つすべてのリッチテキスト対応ブロックでテキストの選択範囲のみに CSS による様々な装飾を施す機能が拡張されます。

装飾の方法は、テキストの範囲を選択した状態で、対応ブロックの「ツールバー」から目的のドロップダウンボタンを選びます。

プリセットスタイルの装飾

選択した文字列に、テーマおよびプラグインに予め組み込まれているプリセット CSS (class) を挿入するための機能。

特徴

プリセットの CSS のみを挿入するため、インラインの CSS (style属性値) を増殖しません。
予め用意されている装飾のみが対象であるため、文字色とサイズについては無制限ではありません。

インラインCSSの装飾

選択した文字列に、インラインの CSS (style) を挿入するための機能。

特徴

インラインの CSS を挿入するため、文字色は自由自在。
装飾する HTML タグごとに style 属性が挿入されるため、装飾し過ぎると HTML ソース全体として無駄が多くなります。

実際に拡張される機能とその操作方法については、まずは以下のムービーをご覧ください。

独自ツールバー(プリセットCSSの挿入)

リッチテキスト対応ブロックのツールバーには、以下の機能が追加されます。

上付き、下付きテキストの挿入ボタン

文章の一部の文字列を上付き、または下付きテキストで表現したい場合は、対象の文字列を選択してから、ツールバーの「よりリッチなテキスト制御」ドロップダウンから「上付きテキスト」または「下付きテキスト」を選ぶことで表示できます。

表示例

上付きテキスト : E=MC²
下付きテキスト : H₂O

リッチテキスト対応ブロック内で、文字列を選択状態にすると、標準のツールバーアイテムの右側に本プラグイン独自のツールバーがアクティブになります。

テキスト位置(左、中央、右)の指定

「テキスト位置」では、文章から選択された任意のテキストのみを前後のテキストから独立して、左側、中央、右側のいずれかの位置で表示させることができます。

表示例

同じ段落テキスト内で左寄せ、中央寄せ、右寄せを分離して表示できます。

テキストスタイル(太字など)の指定

「テキストスタイル」では、プリセットのCSSによる選択文字列の太字、イタリック体(斜体)、セリフ体、キーボードキー風装飾を施すことができます。

「太字」の表示例

ここは段落ブロックです。このテキストだけ太字にしています。

「イタリック体」の表示例

ここは段落ブロックです。このテキストだけイタリック体にしています。

セリフ体の表示例

ここは段落ブロックです。このテキストだけセリフ体にしています。

キーボードキーの表示例

Ctrl + C
Command + V

指定範囲のフォンカラーの指定

「文字色」では、選択範囲に対してテーマにプリセットのフォントカラーを反映させることができます。

表示例

ブルーテキスト(.blue)
ライトブルーテキスト(.light-blue)
グリーンテキスト(.green)
レッドテキスト(.red)
ピンクテキスト(.pink)
オレンジテキスト(.orange)
イエローテキスト(.yellow)
グレーテキスト(.gray)
ホワイトテキスト(.white ※視認性のため、背景は黒くしています)