WordPressテーマSANGOのブロックエディターの使い方や機能まとめ
![WordPressテーマSANGOのブロックエディターの使い方や機能まとめ](https://webnote-plus.com/wp-content/uploads/2022/12/sango-block.png)
WordPressテーマ「SANGO」のブロックエディターの使い方や機能をまとめて紹介します。
SANGOのブロックエディターは、オリジナルブロックの数も多いですが、ユーザー自身でエディターをカスタマイズできる機能も用意されているので、知識がある方ほど拡張性、独自性のある活用ができそうな印象です。
この記事では、画像を多めに使いながら、SANGOのそれぞれのブロック機能を紹介していきます。
- WordPress
-
v6.1.1
- SANGO
-
v3.5.9
WordPressテーマSANGOのブロックエディター機能まとめ
WordPressテーマSANGOでは、ブロックエディターの機能に以下の独自機能が追加されています。
SANGOの独自機能を使いこなすためには、まずWordPress標準のブロックエディターの使い方を把握することも大切です。以下の記事にまとめているので参考にしてください。
![](https://webnote-plus.com/wp-content/uploads/2021/01/fcc46445049aba49d2226655e4d6bef4-300x169.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/fcc46445049aba49d2226655e4d6bef4-300x169.png)
それでは、SANGOのブロックエディターオリジナル機能を紹介していきます。
SANGO専用のオリジナルブロック
WordPressテーマSANGOで独自に用意されているオリジナルのブロックは以下です。
- ボックスブロック
- タイトル付きボックスブロック
- 見出しブロック
- 吹き出しブロック
- タイムラインブロック
- アコーディオンブロック
- メッセージブロック
- ボタンブロック
- ボタングループブロック
- 関連記事ブロック
- 参考リンクブロック
- レビューボックスブロック
- タブブロック
- 線ブロック
- リストブロック
- コードブロック
- FAQブロック
- 条件ブロック
- ボックスメニューブロック
- コンテンツブロック
- プロフィールブロック
- ABテストブロック
- 記事一覧ブロック
- スライダーブロック
- ヒーローブロック
- フルサイズ背景ブロック
- 通知バーブロック
- フッターブロック
- ヘッダーブロック
- 目次位置ブロック
- カスタムブロック
- カスタムグループブロック
それぞれ紹介していきます。
ボックスブロック
ボックスブロックは、囲み枠の中にテキストや画像を自由に配置できるブロックです。
SANGOのボックスブロックでできることは以下のとおりです。
- ボックスのスタイルを24種類から選択できる
- ボックスの中には、画像やリストなど段落ブロック以外も配置できる
ボックスのデザインはサイドバーから選択できます。
![SANGOのボックスブロック](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-1.jpg)
![SANGOのボックスブロック](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-1.jpg)
タイトル付きボックスブロック
タイトル付きボックスブロックは、タイトルと囲み枠がセットになっていて、テキストや画像を自由に配置できるブロックです。
SANGOのタイトル付きボックスブロックでできることは以下のとおりです。
- タイトルのスタイルを5種類から選択できる
- タイトル部にはアイコンも配置できる
- ボックスの中には、画像やリストなど段落ブロック以外も配置できる
タイトル部分のデザインは5種類あり、サイドバーから選択できます。
![SANGOのタイトル付きボックスブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-1.jpg)
![SANGOのタイトル付きボックスブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-1.jpg)
![SANGOのタイトル付きボックスブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-2.jpg)
![SANGOのタイトル付きボックスブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-2.jpg)
![SANGOのタイトル付きボックスブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-3.jpg)
![SANGOのタイトル付きボックスブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-3.jpg)
![SANGOのタイトル付きボックスブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-4.jpg)
![SANGOのタイトル付きボックスブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-4.jpg)
![SANGOのタイトル付きボックスブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-5.jpg)
![SANGOのタイトル付きボックスブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-5.jpg)
![SANGOのタイトル付きボックスブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-6.jpg)
![SANGOのタイトル付きボックスブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-6.jpg)
タイトル部にはアイコンも配置できます。
![SANGOのタイトル付きボックスブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-7.jpg)
![SANGOのタイトル付きボックスブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-7.jpg)
タイトル部、コンテンツ部分ともにカラーも自由に変更可能です。
![SANGOのタイトル付きボックスブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-8.jpg)
![SANGOのタイトル付きボックスブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-title-box-8.jpg)
見出しブロック
WordPress標準ブロックにも見出しブロックがありますが、SANGOでは独自の見出しブロックが用意されています。
SANGOの見出しブロックでできることは以下のとおりです。
- 見出しのプリセットが5種類用意されている
- 見出しのスタイルは30種類から選択できる
- アイコンの挿入もできる
プリセットとして5種類の見出しデザインが用意されています。
![SANGOの見出しブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-1.jpg)
![SANGOの見出しブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-1.jpg)
![SANGOの見出しブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-2.jpg)
![SANGOの見出しブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-2.jpg)
![SANGOの見出しブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-3.jpg)
![SANGOの見出しブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-3.jpg)
![SANGOの見出しブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-4.jpg)
![SANGOの見出しブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-4.jpg)
![SANGOの見出しブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-5.jpg)
![SANGOの見出しブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-5.jpg)
![SANGOの見出しブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-6.jpg)
![SANGOの見出しブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-6.jpg)
プリセットではなく自分で自由に見出しデザインを選びたい場合は、30種類のスタイルから選択が可能です。
![SANGOの見出しブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-7.jpg)
![SANGOの見出しブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-7.jpg)
![SANGOの見出しブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-8.jpg)
![SANGOの見出しブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-8.jpg)
見出しの先頭にアイコンも挿入できます。
![SANGOの見出しブロック-9](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-9.jpg)
![SANGOの見出しブロック-9](https://webnote-plus.com/wp-content/uploads/2022/12/sango-heading-9.jpg)
吹き出しブロック
吹き出しブロックでは、テキストを会話風の装飾で表現することができます。
SANGOの吹き出しブロックでできることは以下のとおりです。
- 吹き出しのタイプは2種類から選択できる
- 吹き出しの配置を設定できる
デフォルトの吹き出しアイコンはカスタマイザーから設定できます。
![SANGOの吹き出しブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-8.jpg)
![SANGOの吹き出しブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-8.jpg)
吹き出しのタイプを2種類から選択できます。
![SANGOの吹き出しブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-1.jpg)
![SANGOの吹き出しブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-1.jpg)
![SANGOの吹き出しブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-2.jpg)
![SANGOの吹き出しブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-2.jpg)
![SANGOの吹き出しブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-3.jpg)
![SANGOの吹き出しブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-3.jpg)
吹き出しアイコンを右配置にしたり、吹き出しを下に配置するなど、吹き出しのレイアウトを設定できます。
![SANGOの吹き出しブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-4.jpg)
![SANGOの吹き出しブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-4.jpg)
![SANGOの吹き出しブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-6.jpg)
![SANGOの吹き出しブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-6.jpg)
![SANGOの吹き出しブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-5.jpg)
![SANGOの吹き出しブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-5.jpg)
吹き出し、アイコン、文字などのカラーも設定できます。
![SANGOの吹き出しブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-7.jpg)
![SANGOの吹き出しブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-balloon-7.jpg)
タイムラインブロック
タイムラインブロックは、物事を時系列順や手順ごとに並べて紹介する時に便利なブロックです。
SANGOのタイムラインブロックでできることは以下のとおりです。
- STEPのテキストを個別に設定できる
非常にシンプルなブロックになっていて、デザイン等は1種類しかありません。
![SANGOのタイムラインブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-timeline-1.jpg)
![SANGOのタイムラインブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-timeline-1.jpg)
ステップ部のラベルは自由に変更が可能です。
![SANGOのタイムラインブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-timeline-2.jpg)
![SANGOのタイムラインブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-timeline-2.jpg)
アコーディオンブロック
アコーディオンブロックは、コンテンツを折り畳んで隠しておくことができるブロックです。うまく活用するとページをすっきりさせることができます。
SANGOのアコーディオンブロックでできることは以下のとおりです。
- アコーディオンを最初から開いておける
「あらかじめ開いておく」にチェックを入れると、初期状態で開いたアコーディオンを設置できます。
![SANGOのアコーディオンブロック-1](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-1.jpg)
![SANGOのアコーディオンブロック-1](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-1.jpg)
実際に閉じた状態と開いた状態のアコーディオンは以下のイメージです。
![SANGOのアコーディオンブロック-3](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-3.jpg)
![SANGOのアコーディオンブロック-3](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-3.jpg)
![SANGOのアコーディオンブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-2.jpg)
![SANGOのアコーディオンブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-2.jpg)
アコーディオンのスタイルとしては1種類しかありませんが、カラーを自由に設定できたり、影の有無やタイトル部分の角の丸みを設定できます。
![SANGOのアコーディオンブロック-4](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-4.jpg)
![SANGOのアコーディオンブロック-4](https://webnote-plus.com/wp-content/uploads/2022/11/sango-accordion-4.jpg)
メッセージブロック
メッセージブロックでは、アイコンとタイトル、テキストを組み合わせた装飾ができます。
SANGOのメッセージブロックでできることは以下のとおりです。
- プリセットが3種類用意されている
- アイコンを自由に変更できる
デザインのプリセットが3種類用意されています。
![SANGOのメッセージブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-1.jpg)
![SANGOのメッセージブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-1.jpg)
![SANGOのメッセージブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-4.jpg)
![SANGOのメッセージブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-4.jpg)
![SANGOのメッセージブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-6.jpg)
![SANGOのメッセージブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-6.jpg)
![SANGOのメッセージブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-7.jpg)
![SANGOのメッセージブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-7.jpg)
アイコンを変更することも可能です。
![SANGOのメッセージブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-2.jpg)
![SANGOのメッセージブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-2.jpg)
ボックスの角丸の大きさや影の濃淡を調整できます。
![SANGOのメッセージブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-3.jpg)
![SANGOのメッセージブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-message-3.jpg)
ボタンブロック/ボタングループブロック
WordPress標準ブロックにもボタンブロックがありますが、SANGOでは独自のボタンブロックが用意されています。
SANGOのボタンブロックでできることは以下のとおりです。
- ボタンのスタイルを18種類から選択できる
- ボタンにアイコンを挿入できる
- 広告タグも改変無しで入力できる
ボタンのデザインはサイドバーの「旧デザイン」タブから変更できます。
![SANGOのボタンブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-2.jpg)
![SANGOのボタンブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-2.jpg)
ボタン内のテキストの前後にそれぞれアイコンの挿入が可能です。
![SANGOのボタンブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-1.jpg)
![SANGOのボタンブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-1.jpg)
アフィリエイトリンクなど広告タグを改変することなく、入力できます。
![SANGOのボタンブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-3.jpg)
![SANGOのボタンブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-3.jpg)
また、ボタングループブロックを使うことで、ボタンを以下画像の様に横並びに配置することもできます。
![SANGOのボタンブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-4.jpg)
![SANGOのボタンブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-button-4.jpg)
関連記事ブロック
関連記事ブロックでは、内部リンクをブログカードの形式で表示することができます。
SANGOの関連記事ブロックできることは以下のとおりです。
- カードの種類を3種類から選択できる
- テキストリンク形式で表示することも可能
- 内部リンクのみ設定可能 ※外部リンクは参考リンクブロックを利用
カードの種類を3種類から選ぶことができます。
![SANGOの関連記事ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-1.jpg)
![SANGOの関連記事ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-1.jpg)
![SANGOの関連記事ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-4.jpg)
![SANGOの関連記事ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-4.jpg)
![SANGOの関連記事ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-3.jpg)
![SANGOの関連記事ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-3.jpg)
![SANGOの関連記事ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-2.jpg)
![SANGOの関連記事ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-2.jpg)
「テキストリンクとして表示」をONにすると、テキストリンク形式で表示も可能です。
![SANGOの関連記事ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-5.jpg)
![SANGOの関連記事ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-5.jpg)
「別名のタイトルを出力する」をONにすると、設定されている別名のタイトルが表示されます。
![SANGOの関連記事ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-6.jpg)
![SANGOの関連記事ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-6.jpg)
![SANGOの関連記事ブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-7.jpg)
![SANGOの関連記事ブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-related-7.jpg)
参考リンクブロック
参考リンクブロックでは、参考記事へのリンクをブログカード形式で表示することができます。
SANGOの参考リンクブロックでできることは以下のとおりです。
- スタイルを2種類から選択できる
- カード内の情報を手動で書き換え可能
- 外部リンクの設定が可能 ※一応内部リンクも設定できる
スタイルは2種類から選択できます。
![SANGOの参考リンクブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-1.jpg)
![SANGOの参考リンクブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-1.jpg)
![SANGOの参考リンクブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-3.jpg)
![SANGOの参考リンクブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-3.jpg)
![SANGOの参考リンクブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-2.jpg)
![SANGOの参考リンクブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-2.jpg)
また、「旧デザインを適用する」をONにすると、SANGOサイトでよく見かけるお馴染みのデザインに変更できます。
![SANGOの参考リンクブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-4.jpg)
![SANGOの参考リンクブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-4.jpg)
参考リンク内のテキスト情報は手動で書き換えることができます。
![SANGOの参考リンクブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-5.jpg)
![SANGOの参考リンクブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-reference-5.jpg)
レビューボックスブロック
レビューボックスブロックでは、商品やサービスの評価を星で表現することができます。
SANGOのレビューボックスブロックでできることは以下のとおりです。
- 対象への評価を5段階で設定できる
- レビュー構造化データの出力ができる
レビューを星評価で5段階で表現することができます。
![SANGOのレビューボックスブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-review-box-1.jpg)
![SANGOのレビューボックスブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-review-box-1.jpg)
「構造化データを利用する」をONにすることで、商品レビュー用の構造化データを出力することもできます。
![SANGOのレビューボックスブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-review-box-2.jpg)
![SANGOのレビューボックスブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-review-box-2.jpg)
構造化データを出力すると、検索結果上で以下のようなリッチリザルトが表示される可能性があります。
![SWELLの商品レビューブロック](https://webnote-plus.com/wp-content/uploads/2022/08/swell-review-block-1.jpg)
![SWELLの商品レビューブロック](https://webnote-plus.com/wp-content/uploads/2022/08/swell-review-block-1.jpg)
タブブロック
タブブロックでは、複数のコンテンツを並列に配置し切り替えながら表示することができます。
SANGOのタブブロックでできることは以下のとおりです。
- タブのタイトルにアイコンか画像を挿入できる
- タブタイトルの列数を設定できる
SANGOのタブブロックでは、設定できるスタイルは1種類のみです。
![SANGOのタブブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-tab-6.jpg)
![SANGOのタブブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-tab-6.jpg)
タブのタイトルにアイコンか画像を挿入することが可能です。
![SANGOのタブブロック-3](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-3.jpg)
![SANGOのタブブロック-3](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-3.jpg)
![SANGOのタブブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-1.jpg)
![SANGOのタブブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-1.jpg)
タブの数に応じて、タイトル部分の表示を何列にするか設定ができるようになっています。
![SANGOのタブブロック-3](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-4.jpg)
![SANGOのタブブロック-3](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-4.jpg)
![SANGOのタブブロック-4](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-5.jpg)
![SANGOのタブブロック-4](https://webnote-plus.com/wp-content/uploads/2022/11/sango-tab-5.jpg)
リストブロック
WordPress標準ブロックにもリストブロックがありますが、SANGOでは独自のリストブロックが用意されています。
SANGOのリストブロックでできることは以下のとおりです。
- リストのスタイルを13種類から選択できる
リストのスタイルが13種類用意されていて、ボーダーやアイコンの形状など変更できます。
![SANGOのリストブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-list-1.jpg)
![SANGOのリストブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-list-1.jpg)
枠線やアイコン、テキストのカラーを設定することもできます。
![SANGOのリストブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-list-2.jpg)
![SANGOのリストブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-list-2.jpg)
枠線と影の有無なども変更可能です。
![SANGOのリストブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-list-3.jpg)
![SANGOのリストブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-list-3.jpg)
FAQブロック
FAQブロックでは、「良くある質問」のような質問と回答がセットになったコンテンツを配置できます。
SANGOのFAQブロックでできることは以下のとおりです。
- 構造化データ出力ができる
- アコーディオン形式で表示できる
SANGOのFAQブロックでは、スタイルが1種類しか用意されていません。
サイドバー内の「構造化データ利用する」をオンにすることで、構造化データ出力機能が利用できます。また、その下の「アコーディオン形式で表示する」をオンにすると、開閉可能なQ&Aにできます。
![SANGOのFAQブロック-1](https://webnote-plus.com/wp-content/uploads/2022/11/sango-faq-1.jpg)
![SANGOのFAQブロック-1](https://webnote-plus.com/wp-content/uploads/2022/11/sango-faq-1.jpg)
それから大きな注意点として、以下赤枠の回答部分には自由にブロックを配置できず、テキストしか入力できない点があります。
![SANGOのFAQブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-faq-2.jpg)
![SANGOのFAQブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-faq-2.jpg)
条件ブロック
条件ブロックでは、特定の条件下でのみブロック内のコンテンツを表示することができます。
SANGOの条件ブロックでできることは以下のとおりです。
- デバイスによって表示状態を切り替えられる
- 特定のページでのみ表示できる
- ログイン状態で表示状態を切り替えられる
モバイル、PCなどデバイスによってブロックの表示、非表示を切り替えることができます。
![SANGOの条件ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-1.jpg)
![SANGOの条件ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-1.jpg)
投稿ページや固定ページなど、ページの種別によってブロックの表示、非表示を切り替えることも可能です。
![SANGOの条件ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-2.jpg)
![SANGOの条件ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-2.jpg)
特定のカテゴリーやタグを指定することもできます。
![SANGOの条件ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-3.jpg)
![SANGOの条件ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-3.jpg)
WordPressにログインしているかどうかでブロックの表示、非表示を指定することも可能です。
![SANGOの条件ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-4.jpg)
![SANGOの条件ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-conditions-4.jpg)
ボックスメニューブロック
ボックスメニューブロックでは、アイコンや画像とテキストがセットになったナビゲーション用のボックスリンクが作れます。
SANGOのボックスメニューブロックできることは以下のとおりです。
- アイコンか画像を設定できる
- カラム数を指定できる
タイトルの表示可否、表示位置、外枠の有無、アイコンを設定できます。
![SANGOのボックスメニューブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-menu-1.jpg)
![SANGOのボックスメニューブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-menu-1.jpg)
ボックス部分に対してアイコンか画像のどちらを設定するか選択できます。
![SANGOのボックスメニューブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-menu-2.jpg)
![SANGOのボックスメニューブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-menu-2.jpg)
ボックスのカラム数を設定できます。
![SANGOのボックスメニューブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-menu-3.jpg)
![SANGOのボックスメニューブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-box-menu-3.jpg)
プロフィールブロック
プロフィールブロックでは、サイト運営者や著者のプロフィールを表示することができます。
SANGOのプロフィールブロックでできることは以下のとおりです。
- 事前に設定したプロフィールを使用できる
- 手動でプロフィールを入力することもできる
プロフィールブロックは、サイドバーなどに表示すると良さそうなコンテンツです。
![SANGOのプロフィールブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-profile-1.jpg)
![SANGOのプロフィールブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-profile-1.jpg)
プロフィールはWordPress管理画面で事前に設定できます。
![SANGOのボックスメニューブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-profile-2.jpg)
![SANGOのボックスメニューブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-profile-2.jpg)
ブロックサイドバーの「プロフィール設定を反映する」をオフにすることで、手動でプロフィールを入力することもできます。
![SANGOのボックスメニューブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-profile-3.jpg)
![SANGOのボックスメニューブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-profile-3.jpg)
記事一覧ブロック
記事一覧ブロックは、条件に合わせた記事の一覧を表示することができます。
SANGOの記事一覧ブロックでできることは以下のとおりです。
- 表示スタイルは6種類から選択できる
- 表示する内容も複数設定できる
- 表示する記事を柔軟に設定できる
スタイルは6種類から選択できます。
![SANGOの記事一覧ブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-7.jpg)
![SANGOの記事一覧ブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-7.jpg)
![SANGOの記事一覧ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-1.jpg)
![SANGOの記事一覧ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-1.jpg)
![SANGOの記事一覧ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-2.jpg)
![SANGOの記事一覧ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-2.jpg)
![SANGOの記事一覧ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-3.jpg)
![SANGOの記事一覧ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-3.jpg)
![SANGOの記事一覧ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-4.jpg)
![SANGOの記事一覧ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-4.jpg)
![SANGOの記事一覧ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-5.jpg)
![SANGOの記事一覧ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-5.jpg)
![SANGOの記事一覧ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-6.jpg)
![SANGOの記事一覧ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-6.jpg)
記事一覧を何列で表示させるか、PCとモバイルサイズでそれぞれ設定できます。
![SANGOの記事一覧ブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-8.jpg)
![SANGOの記事一覧ブロック-8](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-8.jpg)
各記事の欄に表示させる情報を3種類選択できます。
![SANGOの記事一覧ブロック-9](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-9.jpg)
![SANGOの記事一覧ブロック-9](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-9.jpg)
表示する記事やカテゴリーなどを指定できたり、表示方法を細かく設定することができます。
![SANGOの記事一覧ブロック-10](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-10.jpg)
![SANGOの記事一覧ブロック-10](https://webnote-plus.com/wp-content/uploads/2022/12/sango-post-list-10.jpg)
スライダーブロック
スライダーブロックでは、画像をスライドショー形式で表示することができます。
SANGOのスライダーブロックでできることは以下のとおりです。
- スライドごとにリンクを設定できる
- スライドの仕様を柔軟に設定できる
スライドごとにリンクを設定できます。
![SANGOのスライダーブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-slider-1.jpg)
![SANGOのスライダーブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-slider-1.jpg)
スライドの高さ、同時に表示するスライド数、同時にスクロールする枚数などそれぞれ設定できます。
![SANGOのスライダーブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-slider-2.jpg)
![SANGOのスライダーブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-slider-2.jpg)
ヒーローブロック
ヒーローブロックは、背景に画像や動画を設定してその上にテキストやボタンなどを配置できるブロックです。ページのメインビジュアルなどに使うと便利です。
SANGOのヒーローブロックでできることは以下のとおりです。
- 背景には画像か動画を設定できる
- スタイルは3種類から設定できる
ヒーローのスタイルは3種類から選択できます。
![SANGOのヒーローブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-4.jpg)
![SANGOのヒーローブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-4.jpg)
![SANGOのヒーローブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-1.jpg)
![SANGOのヒーローブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-1.jpg)
![SANGOのヒーローブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-2.jpg)
![SANGOのヒーローブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-2.jpg)
![SANGOのヒーローブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-3.jpg)
![SANGOのヒーローブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-3.jpg)
ヒーローブロック内にボタンを表示したい場合は「ボタンエリアを表示」をONにすると設定が可能です。
![SANGOのヒーローブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-5.jpg)
![SANGOのヒーローブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-5.jpg)
背景の暗さも調整できるので、テキストが見やすくなるように設定が可能です。
![SANGOのヒーローブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-6.jpg)
![SANGOのヒーローブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-hero-6.jpg)
フルサイズ背景ブロック
フルサイズ背景ブロックでは、画面の横幅一杯に広がる背景の上に自由にブロックを配置できます。
SANGOのフルサイズ背景ブロックでできることは以下のとおりです。
- 背景には背景色か画像を設定できる
- ブロック上下の境界線の形状を6種類から設定できる
- ブロック内の余白を細かく設定できる
背景は、単純な背景色か画像を設定できます。
![SANGOのフルサイズ背景ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-1.jpg)
![SANGOのフルサイズ背景ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-1.jpg)
![SANGOのフルサイズ背景ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-2.jpg)
![SANGOのフルサイズ背景ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-2.jpg)
![SANGOのフルサイズ背景ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-3.jpg)
![SANGOのフルサイズ背景ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-3.jpg)
ブロックの上下の境界線形状を6種類から選択できます。
![SANGOのフルサイズ背景ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-6.jpg)
![SANGOのフルサイズ背景ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-6.jpg)
![SANGOのフルサイズ背景ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-4.jpg)
![SANGOのフルサイズ背景ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-4.jpg)
![SANGOのフルサイズ背景ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-5.jpg)
![SANGOのフルサイズ背景ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-5.jpg)
余白などの設定もできるようになっています。
![SANGOのフルサイズ背景ブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-7.jpg)
![SANGOのフルサイズ背景ブロック-7](https://webnote-plus.com/wp-content/uploads/2022/12/sango-fullsize-7.jpg)
WordPress標準ブロックの機能拡張
WordPressテーマSANGOでは、以下のWordPress標準ブロック(コアブロック)に対して独自の拡張機能が追加されています。
- 段落ブロック
- グループブロック
- テーブルブロック
- 画像ブロック
それぞれ紹介していきます。
段落ブロック
WordPress標準ブロックの段落ブロックに機能が追加されています。
SANGOの段落ブロックでできることは以下のとおりです。
- スタイルを12種類から選択できる
背景色とアイコンを組み合わせたスタイルが12種類から選択できます。
![SANGOの段落ブロック](https://webnote-plus.com/wp-content/uploads/2023/07/sango-paragraph-1.jpg)
![SANGOの段落ブロック](https://webnote-plus.com/wp-content/uploads/2023/07/sango-paragraph-1.jpg)
グループブロック
WordPress標準ブロックのグループブロックに機能が追加されています。
SANGOのグループブロックでできることは以下のとおりです。
- スタイルを24種類から選択できる
グループブロック全体を囲うスタイルを24種類から選択できます。
![SANGOのグループブロック](https://webnote-plus.com/wp-content/uploads/2022/12/sango-group.jpg)
![SANGOのグループブロック](https://webnote-plus.com/wp-content/uploads/2022/12/sango-group.jpg)
テーブルブロック
WordPress標準ブロックのテーブルブロックに機能が追加されています。
SANGOのテーブルブロックでできることは以下のとおりです。
- 表の横スクロールができる
- セルの背景に記号アイコンを挿入できる
- セルにボタンリンクを設置できる
SANGOのテーブルは、ブロックスタイルに横スクロールできる表が用意されています。
![SANGOのテーブルブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-table-2.jpg)
![SANGOのテーブルブロック-2](https://webnote-plus.com/wp-content/uploads/2022/11/sango-table-2.jpg)
ブロックツールバーに、セルの背景に記号を配置できる機能や、ボタンリンクを設置できる機能があります。
![SANGOのテーブルブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-table-3.jpg)
![SANGOのテーブルブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-table-3.jpg)
![SANGOのテーブルブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-table-1.jpg)
![SANGOのテーブルブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-table-1.jpg)
画像ブロック
WordPress標準ブロックの画像ブロックにデザイン面で機能が追加されています。
SANGOの画像ブロックでできることは以下のとおりです。
- スタイルを5種類から選択できる
画像のスタイルを5種類から選択できます。
![SANGOの画像ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-1.jpg)
![SANGOの画像ブロック-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-1.jpg)
![SANGOの画像ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-2.jpg)
![SANGOの画像ブロック-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-2.jpg)
![SANGOの画像ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-3.jpg)
![SANGOの画像ブロック-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-3.jpg)
![SANGOの画像ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-4.jpg)
![SANGOの画像ブロック-4](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-4.jpg)
![SANGOの画像ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-5.jpg)
![SANGOの画像ブロック-5](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-5.jpg)
![SANGOの画像ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-6.jpg)
![SANGOの画像ブロック-6](https://webnote-plus.com/wp-content/uploads/2022/12/sango-image-6.jpg)
エディター全体の機能拡張
WordPressテーマSANGOでは、WordPress標準のブロックエディター機能に対して以下の独自拡張機能が追加されています。
- 文字装飾
- カスタム書式
- カスタムプリセット
- ブロック下の余白
- カスタムCSS
- カスタムJS
- カスタムコントロール
- カスタムバリエーション
それぞれ紹介していきます。
文字装飾
SANGOでは、以下のような文字装飾が可能です。
- ハイライト(マーカー)
- フォントサイズ
- インラインボタン
- 評価スター
![SANGOの文字装飾-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-inline-text-3.jpg)
![SANGOの文字装飾-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-inline-text-3.jpg)
![SANGOの文字装飾-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-inline-text-2.jpg)
![SANGOの文字装飾-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-inline-text-2.jpg)
![SANGOの文字装飾-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-inline-text-1.jpg)
![SANGOの文字装飾-3](https://webnote-plus.com/wp-content/uploads/2022/12/sango-inline-text-1.jpg)
カスタム書式
カスタム書式は、自分でCSSを記述することでオリジナルの文字装飾を設定することができる機能です。
エディター画面右上の「SANGO Settings」から「カスタム書式」タブを開くとオリジナルの書式を登録できます。
![SANGOのカスタム書式-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-format-1.jpg)
![SANGOのカスタム書式-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-format-1.jpg)
登録した書式は、ブロックツールバーの「SANGOカスタム書式」から使うことができます。
![SANGOのカスタム書式-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-format-2.jpg)
![SANGOのカスタム書式-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-format-2.jpg)
カスタム書式機能は、WordPressテーマSWELLに最初に実装された機能ですが、SANGOも後を追うようにこの機能を実装しています。
カスタムプリセット
カスタムプリセット機能は、ブロックの設定やスタイルをお好みの状態で登録しておくことができる機能です。
良く使うブロックがある場合は、設定をカスタムプリセットで保存しておくことで、コンテンツ制作の時短に繋がるかなと思います。
カスタムプリセットは、各ブロックを選択した状態でサイドバーの「カスタムプリセットを開く」ボタンをクリックすることで登録、呼び出しができます。
![SANGOのカスタムプリセット機能](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-preset.jpg)
![SANGOのカスタムプリセット機能](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-preset.jpg)
ブロック下の余白設定
PCとスマホサイズそれぞれで、ブロックの下側の余白量を調整できます。
ブロックツールバーかサイドバーの「ブロック下の余白」から設定が可能です。
![SANGOのブロック下の余白設定](https://webnote-plus.com/wp-content/uploads/2022/12/sango-space.jpg)
![SANGOのブロック下の余白設定](https://webnote-plus.com/wp-content/uploads/2022/12/sango-space.jpg)
カスタムCSS/カスタムJS
特定のブロックにのみCSSやJavascriptを適用させることができます。
ブロックを選択した状態で、サイドバーの「カスタムCSS」、「カスタムJS」からそれぞれ設定が可能です。
![SANGOのカスタムCSS](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-css-js-1.jpg)
![SANGOのカスタムCSS](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-css-js-1.jpg)
![SANGOのカスタムJS](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-css-js-2.jpg)
![SANGOのカスタムJS](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-css-js-2.jpg)
カスタムCSSでは、CSSの適用範囲を以下から選択できます。
- エディター側、フロント側の両方に適用
- エディター側にのみ適用
カスタムJSは、フロント側(表示側)にのみ適用されます。
カスタムコントロール
カスタムコントロール機能はやや難しい機能ですが、ブロックにオリジナルの設定項目を追加することができます。
ブロックを選択した状態で、サイドバーの「カスタムコントロール」から設定が可能です。
![SANGOのカスタムコントロール機能-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-control-1.jpg)
![SANGOのカスタムコントロール機能-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-control-1.jpg)
「カスタムコントロールを追加」ボタンをクリックすると、以下のような入力欄が表示されるので、それぞれ入力して独自の設定項目を作成していきます。
![SANGOのカスタムコントロール機能-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-control-2.jpg)
![SANGOのカスタムコントロール機能-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-control-2.jpg)
カスタムバリエーション
カスタムバリエーション機能は、良く使うブロックのスタイルや設定を保持した状態で、新しい独自のブロックとして登録しておくことができる機能です。
別のブロックとして登録しておけるので「/」を使ったブロックの呼び出しや、ブロックインサーターからブロックを呼び出せるようになる点が便利です。
カスタムバリエーションは、ブロックを選択した状態でサイドバーの「カスタムバリエーション」から設定できます。
![SANGOのカスタムバリエーション機能-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-variation-1.jpg)
![SANGOのカスタムバリエーション機能-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-variation-1.jpg)
「カスタムバリエーションを追加」ボタンをクリックすると、以下のような入力欄が表示されるので、それぞれ入力するだけでOKです。
![SANGOのカスタムバリエーション機能-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-variation-2.jpg)
![SANGOのカスタムバリエーション機能-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-custom-variation-2.jpg)
SANGO Landについて
SANGOには、SANGO Landというブロックパターンの配信サイトがあります。
![SANGO Land-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-land-1.jpg)
![SANGO Land-1](https://webnote-plus.com/wp-content/uploads/2022/12/sango-land-1.jpg)
SANGO Landに登録されている、あらかじめデザインされたブロックをコピペで自分のサイト内に挿入することができます。
SANGO Land内でお気に入りに登録したブロックは、API連携をすることでエディターのトップツールバーにある「SANGO Land(デザインライブラリ)」のボタンリンクから利用可能になります。
![SANGO Land-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-land-2.jpg)
![SANGO Land-2](https://webnote-plus.com/wp-content/uploads/2022/12/sango-land-2.jpg)
ブロックパターンのライブラリを用意しているWordPressテーマはSANGO以外にもありますが、SANGO Landがユニークなのは、開発者さんだけでなくユーザーさんもSANGO Landにブロックを登録できる点です。
その分、SANGO Landへの投稿者さん次第で微妙にブロックのデザインや雰囲気が異なることもあるので、自分の記事内で統一感を出したい場合には少し注意が必要かなと思います。
SANGOのブロックエディター機能と使い方まとめ
WordPressテーマSANGOのブロックエディターについて紹介しました。
SANGOのブロックエディターでできることは以下です。
この他にSANGO Landというデザインされたブロックをコピペで利用できる仕組みもあります。
少々扱いが難しいですが、カスタム系の機能を使うことでブロックエディターを独自に拡張することもできます。
SANGOのブロックエディター開発はかなり力を入れているように感じますので、今後どのように発展していくか気になります。
最後まで読んでいただきありがとうございました。
![](https://webnote-plus.com/wp-content/uploads/2021/01/wordpress-theme-1.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/wordpress-theme-1.png)
WordPressテーマのブロックエディター機能一覧