ブロックエディタの独自機能についてご紹介します。
一般的なエディタの使い方については以下のマニュアルを参考にしてください。
目次[閉じる]
書式ツール
テキストサイズ
段落ブロックや見出しブロックなどで利用できる「書式ツール」にはテキストサイズを調整するアイコンがあります。
文章内で文字サイズを調整したい場合に利用ください。
マーカー
段落ブロックや見出しブロックなどに表示される「書式ツール」には「マーカー」があります。
こちらを利用することでテキストにマーカーのあしらいを付けることができます。
- マーカーの種類は4色
-
- きいろマーカー
- オレンジマーカー
- みずいろマーカー
- きみどりマーカー
アイコン
「アイコン」を選択すると挿入可能なアイコンリストが表示されるので選択してください。
また、SVGのコードをそのまま張り付けることも可能です。
アイコンの種類を追加しました：バージョン0.3.0
利用できるアイコンを100種類追加しました。
アイコンブロックやアイコンリスト、書式ツールでのアイコン挿入に対応しています。
文字色：バージョン0.2.0
よく利用するテキストカラーの設定を書式ツールにも追加しました。
カラーセットに設定した色を利用することも可能です。
上マージン：バージョン0.2.0
書式ツールに「上マージン」の設定を追加しました。
ブロック単位でマージンの設定が可能です。
SYNでは基本的にHTML要素は上マージンで余白の設定がされていますので、上マージンを利用して調整していただくと便利です。
デバイス表示切替：バージョン0.2.0
サイドパネルにあったデバイス表示の切り替えを書式ツールに移動しました。
また、今回の調整で新たに「非表示」を追加しています。
- すべて
- PCのみ
- スマホのみ
- 非表示
非表示はDOMから除外し概要や抜粋で利用されないようにしていますが、念のためカスタムディスクリプションを設定したり、まだ公開してはいけない大事な情報では注意してご利用ください。
インラインボタン：バージョン0.3.0
書式ツールにインラインボタンの追加しました。
テーブルの中に表示するボタンなどでインラインボタンが活躍します。
テキストをハイライトしてから、インラインボタンのアイコンをクリックしてデザインを選択します。
リンク先はリンクアイコンから設定してください。
インラインボタンのカラー設定はテーマ設定 > デザイン設定の「ボタンカラーセット」から設定可能です。
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.3.0
-
リンク先を別タブで開く機能を追加しました。
デフォルトでは同一タブで開きます。
デザインはスタイルから選択
目次ブロック：バージョン0.1.0
ショートコードで利用していた目次機能をブロック対応しました。
投稿画面ではプレビューされないため、記事ページでご確認ください。
下書き、非公開のページでもご確認いただけます。
基本的にはそのまま利用いただけますが、取得見出しの調整や深度は右パネルから設定可能です。
- 見出しの名称
-
表示する目次の名前を変更します
- 目次を表示する最小見出し数
-
対象の見出しの数がこの値未満なら目次を出さない
記事内の見出しの数が少ない場合に利用する項目です - 最大の深さ
-
1 なら最大の見出しのみ、 2 なら次の見出しまで。
0 は無制限で見出しを表示します（h2～h6まで全ての見出しを目次に含める） - 拾う最大の見出しサイズ
-
表示する見出し最大の見出しサイズを設定します、デフォルトは「2」です。
「3」にした場合、h3見出しから始まる目次を作る形になります。 - デフォルトの開閉を選択：バージョン0.3.0
-
目次の開閉を選択できるように機能追加しました。
ステップブロック：バージョン0.2.0
ステップのデザインは４パターン、カラーセットから色を選ぶことも可能です。
また、ステップの開始番号を選択する機能もあるため、ステップの途中で他のブロックを挿入し、次の番号から再開するような使い方も可能となっています。
デフォルト
- お問い合わせ
ステップの説明が入ります。ブロックを追加することも可能です。
- お見積り
ステップの説明が入ります。
- ヒアリング
- お見積りの作成
サイドラベル
- サイドラベルのデザイン
ステップブロックステップブロック
タイムライン
- タイムラインのデザイン
ステップブロックステップブロック
- タイムラインのデザイン
ステップブロックステップブロック
囲み
- 囲みのデザイン
ステップブロックステップブロック
QAブロック：バージョン0.2.0
よくある質問のブロックを追加しました。
４つのデザインから選択でき、アイコンの色や丸みの調整も可能です。
また、構造化データの出力にも対応しています。
デフォルト
- よくある質問
-
回答を入力します。
区切り線
ストライプ
囲み
- 構造化データ
-
構造化データを出力する場合にONにしてください
- アイコン
-
- アイコンを角丸にする：四角、角丸、丸
- Qアイコンの表示：塗りつぶし、白抜き
- Aアイコンの表示：塗りつぶし、白抜き
- アイコンの色
-
- Qアイコンの色
- Aアイコンの色
アコーディオンブロック：バージョン0.3.0
アコーディオンのデザインは４パターン、カラーセットから色を選ぶことも可能です。
開閉アイコンの選択や、アコーディオンを開けた状態に設定することもできます。
デフォルト
区切り線
囲み + ストライプ
囲み + シャドウ
便利な機能
リストブロック（アイコン付きリスト）：バージョン0.2.0
デフォルトのリストブロックに、アイコン付きリストを追加。
カラーセットから色を選択する機能も追加しました。
- ドットリスト
- ドットリスト
- ドットリスト
- 丸番号リスト
- 丸番号リスト
- 丸番号リスト
段落ブロックのデザイン
段落ブロックはテキスト用のブロックですが、背景色を設定したり、デザインを選ぶことも出来ます。
右パネルの「色」の「背景」を選択すると背景色を設定、余白も調整されます。
このブロックは段落ブロックに灰色の背景色を設定した状態です。
段落ブロックに三角のあしらいを付ける
段落ブロックのデザインを右パネルから選択可能です。
このブロックは段落ブロックで「スタイル」を「三角のあしらい」にし、カラーセットも設定した状態です。
デザインのカラー調整も右パネルから可能。
カラーセットの選択と、あしらいの色も設定できます。
段落ブロックのスタイルを追加しました：バージョン0.3.0
段落ブロックのデザイン追加：右パネルのスタイルから「大括弧」を選択します。
枠線のカラーや線の太さを調整いただけます。
段落ブロックのデザイン追加：右パネルのスタイルから「かぎ括弧」を選択します。
枠線のカラーや線の太さを調整いただけます。
段落ブロックのデザイン追加：右パネルのスタイルから「枠線」を選択します。
枠線のカラーや線の太さを調整いただけます。
枠線では、線の種類や線の表示位置を調整できますので、お好みの枠デザインが作成できます。
段落ブロックのデザイン追加：右パネルのスタイルから「枠線」を選択します。
枠線のカラーや線の太さを調整いただけます。
枠線では、線の種類や線の表示位置を調整できますので、お好みの枠デザインが作成できます。
テーブルブロック
WordPressデフォルトのテーブルブロックで、横スクロール表示の設定を追加しています。
横スクロール付きのテーブル
PC表示の際はコンテンツの横幅よりもサイズの広いテーブルが設定されている必要があります。
テーブルの最小幅も右パネルから設定することができます。
| テキスト（th） | ヘッダーラベル | ヘッダーラベル | ヘッダーラベル | ヘッダーラベル |
|---|---|---|---|---|
| テキスト（td） | テキスト | テキスト | テキスト | テキスト |
| テキスト | テキスト | テキスト | テキスト | テキスト |
| テキスト | テキスト | テキスト | テキスト | テキスト |
テーブルのカスタマイズ機能：バージョン0.3.0
テーブルの背景色の設定や「th」の設定、セルの結合などのカスタマイズ機能を追加しました。
テーブルカスタマイズの例
| ポイント | 例 | |
|---|---|---|
| 1 | 変化を伝える | 文章校正が超ラクになりました 30日後に差がつくライティング講座 お父さんのとびきりの笑顔を見られるギフト |
| 2 | 必要性を伝える | ・例文のテキストが入ります ・例文のテキストが入ります |
| 3 | 相手が求める「機能」を伝える | ・例文のテキストが入ります ・例文のテキストが入ります |
| 4 | 相手が求める「情動」を伝える | ・例文のテキストが入ります ・例文のテキストが入ります |
| 5 | 他の顧客の声を伝える | ・例文のテキストが入ります ・例文のテキストが入ります |