ツールバーでできること

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とタブレットのみで改行しています。

これは段落ブロックです。
ここはスマホのみで改行しています。

CTAを設置しよう!

ここにリンクさせたい自分の商品やアフィリエイトリンクなどを表示させることが可能です。記事下のCTAは収益化においてかなり重要となるので効果的に使いたいところです。タグを追加してあげれば画像なども表示させることが可能!簡単にサイトの収益化の仕組みを導入することができます。

ABOUT US
OPENCAGEサブテキストがはいります!
ライターのプロフィールが入ります。このライター情報を入れたくない場合は管理画面の ユーザー > あなたのプロフィールの「プロフィール情報」を未入力にすれば表示されません。逆に「プロフィール情報」を入力することでライター情報を表示できます。