ブロックエディタの独自機能についてご紹介します。
一般的なエディタの使い方については以下のマニュアルを参考にしてください。
目次[閉じる]
書式ツール
テキストサイズ
段落ブロックや見出しブロックなどで利用できる「書式ツール」にはテキストサイズを調整するアイコンがあります。
文章内で文字サイズを調整したい場合に利用ください。
マーカー
段落ブロックや見出しブロックなどに表示される「書式ツール」には「マーカー」があります。
こちらを利用することでテキストにマーカーのあしらいを付けることができます。
- マーカーの種類は4色
-
- きいろマーカー
- オレンジマーカー
- みずいろマーカー
- きみどりマーカー
アイコン
「アイコン」を選択すると挿入可能なアイコンリストが表示されるので選択してください。
また、SVGのコードをそのまま張り付けることも可能です。
文字色：バージョン0.2.0
よく利用するテキストカラーの設定を書式ツールにも追加しました。
カラーセットに設定した色を利用することも可能です。
上マージン：バージョン0.2.0
書式ツールに「上マージン」の設定を追加しました。
ブロック単位でマージンの設定が可能です。
SYNでは基本的にHTML要素は上マージンで余白の設定がされていますので、上マージンを利用して調整していただくと便利です。
デバイス表示切替：バージョン0.2.0
サイドパネルにあったデバイス表示の切り替えを書式ツールに移動しました。
また、今回の調整で新たに「非表示」を追加しています。
- すべて
- PCのみ
- スマホのみ
- 非表示
非表示はDOMから除外し概要や抜粋で利用されないようにしていますが、念のためカスタムディスクリプションを設定したり、まだ公開してはいけない大事な情報では注意してご利用ください。
SYN Block
説明リスト（dl）
- 説明リスト（dl）
-
用語、説明文の構成のDLブロックを挿入します。
右パネルの「スタイル」から、説明リストのカラーやデザインを選択できます。
- カラーセットで色を調整
-
マニュアルサイトで設定しているカラーセット03が反映されている状態。
囲みラインのデザイン
- 説明リストは囲みラインのあしらいも
-
右パネルの「スタイル」から「囲みライン」を選択するとこのデザインになります。
こちらも dl でマークアップされたエリアです。
dt dd を追加
説明リストはdlタグでマークアップされており、続けて dt dd を追加することもできます。
- 説明リスト（dl）
-
dd：テキスト
- 追加の dt
-
dd：テキスト
囲みラインのあしらいで連続して dt がある場合の例です。
アイコンボックス
アイコンボックス選択時、「書式ツール」のアイコンボタンからアイコンを選択します。
また、右パネルから「カラーセット」「アイコン色」で色の調整が可能です。
ふきだしブロック：バージョン0.1.0
ショートコードで利用していたふきだしをブロック対応しました。
ふきだし管理の設定をプリセットから呼び出したり、そのままふきだしを作成します。
ブログカードブロック：バージョン0.1.0
ショートコードで利用していたブログカードをブロック対応しました。
基本的にはブログカードブロックを挿入して、URLを入力するだけです。
ブログカードにオプションを追加
- URL
-
参照元のURLを入力します
- タイトル（任意）
-
ブログカードに表示するタイトルを変更します
- ディスクリプション（任意）
-
ブログカードに表示するディスクリプションを変更します
- スマホ時のレイアウト
-
スマホ表示の際に、画像を縦積みにしたい場合に選択してください
- 画像の選択
-
ブログカードに表示する画像を変更します
デザインはスタイルから選択
目次ブロック：バージョン0.1.0
ショートコードで利用していた目次機能をブロック対応しました。
投稿画面ではプレビューされないため、記事ページでご確認ください。
下書き、非公開のページでもご確認いただけます。
基本的にはそのまま利用いただけますが、取得見出しの調整や深度は右パネルから設定可能です。
- 見出しの名称
-
表示する目次の名前を変更します
- 目次を表示する最小見出し数
-
対象の見出しの数がこの値未満なら目次を出さない
記事内の見出しの数が少ない場合に利用する項目です - 最大の深さ
-
1 なら最大の見出しのみ、 2 なら次の見出しまで。
0 は無制限で見出しを表示します（h2～h6まで全ての見出しを目次に含める） - 拾う最大の見出しサイズ
-
表示する見出し最大の見出しサイズを設定します、デフォルトは「2」です。
「3」にした場合、h3見出しから始まる目次を作る形になります。
ステップブロック：バージョン0.2.0
ステップのデザインは４パターン、カラーセットから色を選ぶことも可能です。
また、ステップの開始番号を選択する機能もあるため、ステップの途中で他のブロックを挿入し、次の番号から再開するような使い方も可能となっています。
デフォルト
- お問い合わせ
ステップの説明が入ります。ブロックを追加することも可能です。
- お見積り
ステップの説明が入ります。
- ヒアリング
- お見積りの作成
サイドラベル
- サイドラベルのデザイン
ステップブロックステップブロック
タイムライン
- タイムラインのデザイン
ステップブロックステップブロック
- タイムラインのデザイン
ステップブロックステップブロック
囲み
- 囲みのデザイン
ステップブロックステップブロック
QAブロック：バージョン0.2.0
よくある質問のブロックを追加しました。
４つのデザインから選択でき、アイコンの色や丸みの調整も可能です。
また、構造化データの出力にも対応しています。
デフォルト
- よくある質問
-
回答を入力します。
区切り線
ストライプ
囲み
- 構造化データ
-
構造化データを出力する場合にONにしてください
- アイコン
-
- アイコンを角丸にする：四角、角丸、丸
- Qアイコンの表示：塗りつぶし、白抜き
- Aアイコンの表示：塗りつぶし、白抜き
- アイコンの色
-
- Qアイコンの色
- Aアイコンの色
便利な機能
リストブロック（アイコン付きリスト）：バージョン0.2.0
デフォルトのリストブロックに、アイコン付きリストを追加。
カラーセットから色を選択する機能も追加しました。
- ドットリスト
- ドットリスト
- ドットリスト
- 丸番号リスト
- 丸番号リスト
- 丸番号リスト
段落ブロックのデザイン
段落ブロックはテキスト用のブロックですが、背景色を設定したり、デザインを選ぶことも出来ます。
右パネルの「色」の「背景」を選択すると背景色を設定、余白も調整されます。
このブロックは段落ブロックに灰色の背景色を設定した状態です。
段落ブロックに三角のあしらいを付ける
段落ブロックのデザインを右パネルから選択可能です。
このブロックは段落ブロックで「スタイル」を「三角のあしらい」にし、カラーセットも設定した状態です。
デザインのカラー調整も右パネルから可能。
カラーセットの選択と、あしらいの色も設定できます。
デバイス表示機能 ※書式ツールに移動
各ブロックの右パネルにある「デバイス表示」では、そのブロックの表示対象を選択できます。
- すべて
- PCのみ
- スマホのみ
デバイスを分けて表示させたい場合などに利用ください。
デバイス表示の切り替えは、バージョン0.2.0で書式ツールに移動しました。
テーブルブロック
WordPressデフォルトのテーブルブロックで、横スクロール表示の設定を追加しています。
横スクロール付きのテーブル
PC表示の際はコンテンツの横幅よりもサイズの広いテーブルが設定されている必要があります。
テーブルの最小幅も右パネルから設定することができます。
| テキスト（th） | ヘッダーラベル | ヘッダーラベル | ヘッダーラベル | ヘッダーラベル |
|---|---|---|---|---|
| テキスト（td） | テキスト | テキスト | テキスト | テキスト |
| テキスト | テキスト | テキスト | テキスト | テキスト |
| テキスト | テキスト | テキスト | テキスト | テキスト |
