カスタマイザーで設定したメインカラーや角丸の有無が、エディタのデザインにも一部反映されます。
また、カラーセットを使用したデザインの場合、「テーマ設定」>「デザイン設定」で登録したカラーセットの色が適用されます。
SYNの基本スタイルガイド一覧
- スタイルガイドについて
-
SYN（シン）は、ブロックエディタおよびクラシックエディタ（ビジュアル・コード）に対応しています。
見出しやリストなど、各エディタ共通のスタイルを基本スタイルとし、このページでは各要素のデザインや装飾についてご紹介します。
ブロックエディタを主軸として、エディタの開発を進めております。
テキストエディタでは一部の機能をご利用いただけない場合がございますので、あらかじめご了承ください。
目次[閉じる]
目次はショートコードで設定します。
見出しタグ（h2）
見出しやボタンリンクなどの角丸デザインは、カスタマイザーの「テーマ設定」>「全体デザイン」で角丸を有効にすると反映されます。
本マニュアルでは角丸を「なし」に設定しています。
角丸デザインをご利用になる場合は、角丸設定から「小」または「大」をお選びください。
見出しタグ（h3）小さなテキストを追加
テキストは段落ブロックに入力します。
テキストは段落ブロックに入力します。テキストは段落ブロックに入力します。
太字にしたり、文字色を変更したり、各エディタでテキストにあしらいをつけることが可能です。
左寄せのテキスト
右寄せのテキスト
中央寄せテキスト
見出しタグ（h4）
フォントサイズは、文字（S）～文字（2XL）まで、選択可能。
見出しタグ（h5）
見出しタグ（h6）
リストタグ
- 箇条書きリスト
- 箇条書きリスト
- 箇条書きリスト
- 順序のあるリスト
- 順序のあるリスト
- 順序のあるリスト
テーブルタグ
| 見出し部分 | 見出し部分 | 見出し部分 |
|---|---|---|
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
通常のテーブル（表組）です。
| 見出し部分 | 見出し部分 | 見出し部分 | 見出し部分 | 見出し部分 | 見出し部分 |
|---|---|---|---|---|---|
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
スマホ表示時に横スクロールになるテーブルです。
引用タグ
引用タグ：引用元のテキストを入力します。
ふきだし機能
ショートコードで表示させます。
テキストは記事ごとに入力します。
ブログカード機能
SYN（シン）の基本スタイル一覧 カスタマイザーで設定したメインカラーや角丸の有無が、エディタのデザインにも一部反映されます。また、カラーセットを使用したデザインの場合、「テーマ設定」>「･･･ ブログカードの使い方 自サイトや外部サイトのURLを入力するだけで簡単にブログカードを設定できます。ブログカードの使い方「ブログカード」はショートコードを利用して出力します。ショート･･･
ブログカードはショートコードを利用して表示できます。
自サイトや外部サイトのURLを入力すると、カード型のリンクエリアを作成できます。
class設定によって、矢印付きデザインや、スマホ表示時に縦に並ぶレスポンシブ対応などを選択できます。
段落ブロックのあしらい
段落ブロックを選択時に、右パネルの「スタイル」からカラーを選択可能です。
デザイン設定で設定したカラーセットの色を選択
アイコンボックス
説明リスト（dl）
- dtタイトル
-
メインカラーの説明リスト（dl）のデザインです。
- dtタイトル
-
デザイン設定で設定したカラーセットの色を選択
説明リスト：囲みライン（dl）
- 囲みラインのあしらい
-
メインカラーが使用されます
- 囲みラインのあしらい
-
デザイン設定で設定したカラーセットの色を選択
カラム（3）
ブロックエディタでは、「カラムブロック」を選択肢、3カラムを利用します。
上記の例では、3カラムの中に画像ブロックを入れています。
カラム（2）
ブロックエディタでは、「カラムブロック」を選択肢、2カラムを利用します。
上記の例では、2カラムの中に画像ブロックを入れています。
