STORK19でできるブロックエディタ内のオリジナルのツールバー機能について紹介しているページです。
ブロックエディタにおけるツールバーは、入力しているテキストと最も近い場所にあるので、よく使うものだったり、文章を編集する上で便利なものが配置されている方がよいと考えます。
STORK19では、文章の編集やブロックの編集に便利に使える項目をいくつか配置していますのでこのページで紹介させていただきます。
もくじ
マーカー(アンダーライン)

マーカー(イエロー)をひくことができます
マーカー(ピンク)をひくことができます
マーカー(ブルー)をひくことができます
マーカー(グリーン)をひくことができます
上記のように文章の一部にマーカーをひくことができます。
ラベル

このようにラベル(サイトカラー)をつくれます
このようにラベル(イエロー)をつくれます
このようにラベル(ピンク)をつくれます
このようにラベル(レッド)をつくれます
このようにラベル(ブルー)をつくれます
このようにラベル(グリーン)をつくれます
このようにラベル(グレー)をつくれます
このようにラベル(ブラック)をつくれます
文字が少し小さく表示され、周りを色で囲まれたようなデザインとなります。
フォントサイズ(インライン)

インラインのテキストサイズの変更が可能。上の%表示のものは相対的にフォントサイズが変化し、下の固定フォントサイズは、ブロックのフォントサイズ指定に関わらずフォントサイズを変更できます。
フォントサイズ70%
フォントサイズ90%
フォントサイズ120%
フォントサイズ150%
フォントサイズ180%
固定フォントサイズ小
固定フォントサイズ大
その他

その他にも以下の変更が可能となっています。
BOLD(CSS)
strong
タグを使用しない装飾としての 太字(BOLD)を設定できます。
SEO的にstrong
タグを使いたくないけど、見た目的には太字にしたい場合などに便利です。
FontAwesome Icon
アイコンフォントのFontAwesomeを呼び出すことができます。
class名 | 表示例 |
---|---|
ノーマル:fas fa-file-alt | |
fa-lg 追加:fas fa-file-alt fa-lg | |
fa-2x 追加:fas fa-file-alt fa-2x |
アイコンフォントについては以下の記事でも詳しく掲載しています。
Googleフォントを適用
通常
Sample Text
Googleフォント
Sample Text
GoogleFontを適用することができます。
ふりがな(るび)
読みづらい漢字などにふりがなをふれます。
上下の余白

ブロックの上下の余白(マージン)をツールバーから設定できます。
画面サイズに応じて改行

ツールバーから改行を指定すると、[pcbr]
または[spbr]
のショートコードが挿入され、画面サイズに応じて改行(brタグ)が機能するようになります。
下記の表示サンプルをPCとスマホで確認すると、それぞれで改行結果が異なることが確認できるかと思います。
ブロックツールバーから、画面サイズに応じて改行を指定するショートコードを挿入でき、
ここはPCとタブレットのみで改行しています。
これは段落ブロックです。
ここはスマホのみで改行しています。