DigiPress

Highly Flexible WordPress Theme

メニュー

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

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

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

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

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

装飾の方法は、テキストの範囲を選択した状態で、対応ブロックの「ツールバー」から選ぶ方法と、右側サイドバーの「選択範囲のスタイル」から選ぶ2種類があります。

リッチテキスト対応ブロック共通の拡張機能
ツールバーからの装飾

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

特徴
  • プリセットの CSS のみを挿入するため、インラインの CSS (style属性値) を増殖しません
  • 予め用意されている装飾のみが対象であるため、文字色とサイズについては無制限ではありません
サイドバー「選択範囲のスタイル」からの装飾

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

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

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

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

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

ツールバーから適用するスタイルは、インラインによるCSS(style属性)の追加ではなく、テーマにプリセットのCSS(セレクタ)の挿入による効率的な装飾を行います。

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

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

「よりリッチなテキスト制御」ドロップダウン
表示例

上付きテキスト : E=MC2
下付きテキスト : H2O

独自ツールバー

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

DigiPress Ex – Blocks による独自ツールバー
テキスト位置(左、中央、右)の指定

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

ツールバーから指定範囲の文字寄せ
表示例

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

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

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

ツールバーからプリセットのテキスト装飾
「太字」の表示例

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

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

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

セリフ体の表示例

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

キーボードキーの表示例

Ctrl + C
Command + V

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

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

ツールバーからプリセット文字色の指定
表示例

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

選択範囲のテキストに下線を表示

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

ツールバーからプリセット下線の指定
表示例(破線の場合)

ブラックの下線を表示します
グレーの下線を表示します
ブルーの下線を表示します
ライトブルーの下線を表示します
グリーンの下線を表示します
レッドの下線を表示します
ピンクの下線を表示します
イエローの下線を表示します
オレンジの下線を表示します

表示例(実線の場合)

ブラックの下線を表示します
グレーの下線を表示します
ブルーの下線を表示します
ライトブルーの下線を表示します
グリーンの下線を表示します
レッドの下線を表示します
ピンクの下線を表示します
イエローの下線を表示します
オレンジの下線を表示します

選択範囲のテキストにマーカーを表示

マーカー」では、選択範囲に対してテーマにプリセットのテキストマーカーを反映させることができます。

ツールバーからテキストマーカーの指定
表示例(ストライプ模様あり)

ブルーのマーカーを表示します

ライトブルーのマーカーを表示します

グリーンのマーカーを表示します

レッドのマーカーを表示します

ピンクのマーカーを表示します

イエローのマーカーを表示します

オレンジのマーカーを表示します

表示例(ストライプ模様なし)

ブルーのマーカーを表示します

ライトブルーのマーカーを表示します

グリーンのマーカーを表示します

レッドのマーカーを表示します

ピンクのマーカーを表示します

イエローのマーカーを表示します

オレンジのマーカーを表示します

選択範囲のフォントサイズを変更

文字サイズ」では、選択範囲に対してテーマにプリセットの範囲(10〜100ピクセル)でフォントサイズを反映させることができます。

ツールバーから文字サイズの指定
表示例

10ピクセル
11ピクセル
12ピクセル
13ピクセル
14ピクセル
15ピクセル

20ピクセル

30ピクセル

40ピクセル

50ピクセル

60ピクセル

70ピクセル

80ピクセル

90ピクセル

100ピクセル

サイドバー「選択範囲のスタイル」(インラインCSSの挿入)

リッチテキスト対応のブロックでは、さらに対象ブロック選択時のサイドバーに以下のオリジナルの設定項目が追加されます。

サイドバー「選択範囲のスタイル」

サイドバーから適用するスタイルは、インラインによるCSS(style属性)の追加を行います。

「選択範囲のスタイル」オプションによる配色カスタム

装飾をしたいブロック内の任意のテキストを選択状態にすると、サイドバーに「選択範囲のスタイル」オプションが表示されます。

以下のムービーを再生すると「選択範囲のスタイル」の説明箇所から開始します。

このオプションでは、選択範囲に対してインラインのCSS(style属性)を追加して 文字色背景色文字サイズを自由にカスタマイズすることができます。

表示例単色の文字色と背景色の指定

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。


表示例グラデーションの文字色と背景色の指定

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。


その他Tips

ブロックコンテンツを本文以外(ウィジェットエリア)で表示する方法

DigiPressのオリジナルブロックを含め、WordPressのブロックエディターによるコンテンツを記事本文以外のウィジェットエリアに表示するには、「DigiPress Ex – Blocks」プラグインの「再利用コンテンツ」機能を利用することで実現できます。

詳しくは以下をご覧ください。

仕様・注意事項

変換せずに必ず最新仕様にリカバリー(復元)

本プラグインのアップデート後、エディター上のブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合、旧バージョンから仕様が変更された可能性があります。

この場合は、HTML やクラシックブロックに変換せずに、必ず「ブロックのリカバリーを試行」を選択してアップデート後のバージョン仕様としてリカバリーしてください。

「ブロックのリカバリーを試行」を実行しない限り、既存のブロックは従来のバージョンの状態のままで表示されます。