フレキシブルテキストでは、FTスキーマ内の要素をカスタマイズすることで、独自の書式を設定することができます。

ここでは、各種要素の性質や設定方法について説明します。

用語

• FTスキーマ
• FTエディター

要素の種類

ツールバー・ブロックメニュー

要素はコンテンツ編集画面のFTエディターで、ツールバーまたはブロックメニューから利用できます。

要素カテゴリー

要素には性質ごとに大きく分けて以下4種類があります。

• ブロック
  • 段落自体の書式を設定
  • ブロックメニューから利用
• インライン文字
  • 入力したテキストに対して書式設定
  • ツールバーから利用
• インライン画像
  • 画像を段落内の任意の箇所に挿入
  • ブロックメニューから利用
• 埋め込み
  • 段落要素として挿入
  • コンテンツ参照やHTMLコード埋め込みなどの要素で、内部にテキストの入力はできない
  • ブロックメニューから利用
• 特殊
  • ネスト要素などの特殊な要素（現在はネスト要素のみ）
  • ブロックメニューから利用

ビルトイン要素・アドオン要素

要素には、FTスキーマに初期設定されているビルトイン要素と、ユーザーが独自で追加するアドオン要素の2種類があります。

ビルトイン要素

• FTスキーマに初期設定されている
• FTエディターでのショートカットキー操作と紐づいている
• コピー&ペーストによりFTエディターにテキストを挿入した際、書式が対応するビルトイン要素が適用される

アドオン要素

• ユーザーが独自で追加する
• FTエディターでのショートカットキー操作とは紐づかない
• コピー&ペーストによりFTエディターにテキストを挿入した際、アドオン要素は適用されない
  • 同一FTスキーマを利用しているFTエディターからのコピー&ペーストをした際は、アドオン要素も適用されます

ビルトイン要素

ビルトインの各種要素について、それぞれの性質や設定内容を説明します。

ビルトイン要素には以下種類の要素が存在します。

• ブロック
  • ブロック（段落）用の要素
  • 見出し要素、引用要素 など
• インライン文字
  • テキストに対して付与する要素
  • 強調要素、URLリンク要素 など
• インライン画像
  • 画像を挿入するための要素
  • ブロック内にインライン要素として挿入できる
  • 内部画像要素、外部画像要素

ブロック

標準

DeveloperAPI出力例（初期設定）

<p>標準要素の利用例です</p>

ショートカットキー

• Ctrl/Cmd + Alt + 0

注意事項・補足

• 標準要素は非表示化することができません

見出し1〜6

DeveloperAPI出力例（初期設定）

<h1>見出し要素の利用例です</h1>

ショートカットキー

• Ctrl/Cmd + Alt + 1 ⇒ 見出し1
• Ctrl/Cmd + Alt + 2 ⇒ 見出し2
• Ctrl/Cmd + Alt + 3 ⇒ 見出し3
• Ctrl/Cmd + Alt + 4 ⇒ 見出し4
• Ctrl/Cmd + Alt + 5 ⇒ 見出し5
• Ctrl/Cmd + Alt + 6 ⇒ 見出し6

引用

DeveloperAPI出力例（初期設定）

<blockquote>
  <p>引用要素の利用例1</p>
  <p>引用要素の利用例2</p>
</blockquote>

ショートカットキー

• なし

コードブロック

DeveloperAPI出力例（初期設定）

<pre><code>aaaaaaaabbbbbbbbbcccccccccc</code></pre>

ショートカットキー

• なし

順序なしリスト

DeveloperAPI出力例（初期設定）

<ul>
  <li>おはよう</li>
  <li>こんにちは</li>
  <li>こんばんは</li>
</ul>

ショートカットキー

• Ctrl/Cmd + Shift + 8

順序付きリスト

DeveloperAPI出力例（初期設定）

<ol>
  <li>おはよう</li>
  <li>こんにちは</li>
  <li>こんばんは</li>
</ol>

ショートカットキー

• Ctrl/Cmd + Shift + 7

インライン文字

強調

DeveloperAPI出力例（初期設定）

これは<strong>強調要素</strong>の例です

ショートカットキー

• Ctrl/Cmd + B

斜体

DeveloperAPI出力例（初期設定）

これは<em>斜体要素</em>の例です

ショートカットキー

• Ctrl/Cmd + I

打ち消し

DeveloperAPI出力例（初期設定）

これは<del>打ち消し要素</del>の例です

ショートカットキー

• Ctrl/Cmd + Shift + X

下線

DeveloperAPI出力例（初期設定）

これは<u>下線要素</u>の例です

ショートカットキー

• Ctrl/Cmd + U

ハイライト

DeveloperAPI出力例（初期設定）

これは<mark>ハイライト要素</mark>の例です

ショートカットキー

• なし

下付き文字

DeveloperAPI出力例（初期設定）

H<sub>2</sub>O

ショートカットキー

• なし

上付き文字

DeveloperAPI出力例（初期設定）

E=mc<sup>2</sup>

ショートカットキー

• なし

インラインコード

DeveloperAPI出力例（初期設定）

これは<code>インラインコード要素</code>の例です

ショートカットキー

• なし

URLリンク

DeveloperAPI出力例（初期設定）

これは<a href='https://nilto.com'>URLリンク要素</a>の例です

ショートカットキー

• Ctrl/Cmd + K

独自設定項目

• URLリンク要素
  • 初期設定では 属性名: href、値: {{param}} が設定されています
  • 例えば属性名を data-api-url、値を{{param}}?page=1のように設定変更することも可能です

インライン画像

内部画像

DeveloperAPI出力例（初期設定）

<img
  alt='代替テキスト'
  src='https://cms-assets.nilto.com/spaces/123456789/media/123456789/_/img_headlesscms_MV.webp'
/>

ショートカットキー

• なし

外部画像

DeveloperAPI出力例（初期設定）

<img src='https://www.nilto.com/common/logo_nilto.svg'/>

ショートカットキー

• なし

アドオン要素

段落（ブロック）

段落

DeveloperAPI出力例（初期設定）

<div>段落要素の例です</div>

コードブロック

DeveloperAPI出力例（初期設定）

<pre><code>コードブロック要素の例1\nコードブロック要素の例2</code></pre>

順序なしリスト

DeveloperAPI出力例（初期設定）

<ul>
  <li>おはよう</li>
  <li>こんにちは</li>
  <li>こんばんは</li>
</ul>

順序付きリスト

DeveloperAPI出力例（初期設定）

<ol>
  <li>おはよう</li>
  <li>こんにちは</li>
  <li>こんばんは</li>
</ol>

インライン文字

文字

DeveloperAPI出力例（初期設定）

これは<span>文字要素</span>の例です

URLリンク

DeveloperAPI出力例（初期設定）

これは<a href='https://nilto.com'>URLリンク要素</a>の例です

独自設定項目

• URLリンク要素
  • 初期設定では 属性名: href、値: {{param}} が設定されています
  • 例えば属性名を data-api-url、値を{{param}}?page=1のように設定変更することも可能です

コンテンツリンク

NILTO内のコンテンツを指定することで、URLリンクを動的に生成する要素。
プレースホルダー記法を用いてコンテンツが管理するデータをURLリンクに利用することができます。

DeveloperAPI出力例（初期設定）

これは<a href='/article/123456789'>コンテンツリンク要素</a>の例です

独自設定項目

• URL指定属性
  • 初期設定では 属性名: href、値: /article/{{content._id}} が設定されています
  • 例えば値を/ja/nest/posts/{{content.slug_field}}のように設定変更することも可能です
• 対象モデル
  • 要素適用時にコンテンツ参照ダイアログが展開されますが、利用したいコンテンツのモデルを指定することができます

メディアリンク

NILTO内のメディアを指定することで、URLリンクを動的に生成する要素。

DeveloperAPI出力例（初期設定）

これは<a href='https://cms-assets.nilto.com/spaces/123456789/media/123456789/_/img_sample.webp'>メディアリンク要素</a>の例です

独自設定項目

• URL指定属性
  • 初期設定では 属性名: href、値: {{media.url}} が設定されています
  • 例えば値を{{media.url}}?size=100のように設定変更することも可能です

インラインコード

DeveloperAPI出力例（初期設定）

これは<code>インラインコード要素</code>の例です

インライン画像

内部画像

DeveloperAPI出力例（初期設定）

<img
  alt='代替テキスト'
  src='https://cms-assets.nilto.com/spaces/123456789/media/123456789/_/img_sample.webp'
/>

外部画像

DeveloperAPI出力例（初期設定）

<img src='https://www.nilto.com/common/logo_nilto.svg'/>

埋め込み

動画

DeveloperAPI出力例（初期設定）

<video
  alt=''
  poster='https://cms-assets.nilto.com/spaces/123456789/media/123456789/_poster/SLPUCkyfHY.jpeg'
  src='https://cms-assets.nilto.com/spaces/123456789/media/123456789/_/mov_sample.mov'>
</video>

コンテンツ参照

DeveloperAPI出力例（初期設定）

<div class='model_luid' id='123456789'>
  <p>コンテンツタイトル</p>
</div>

独自設定項目

• 対象モデル
  • 要素適用時にコンテンツ参照ダイアログが展開されますが、利用したいコンテンツのモデルを指定することができます
• 出力するHTML
  • プレースホルダー記法を用いて、コンテンツが管理するデータを動的に置換したhtmlを生成することができます。

HTMLコード

DeveloperAPI出力例（入力パラメータなし）

<hr/>

DeveloperAPI出力例（入力パラメータあり）

<div>入力パラメータ</div>

独自設定項目

• この要素を追加するとき、パラメータを入力する
  • 入力パラメータなしのときは、固定のhtmlが生成されます
  • 入力パラメータありのときは、要素利用時に展開されるフォームに入力したパラメータが埋め込まれたhtmlが生成されます
• HTMLコード説明
  • 入力パラメータありのときに展開されるフォームに、どんな値を入力してほしいかを補足説明として表示できます
• 出力するHTML
  • 入力パラメータなしのときの例: <hr/>
  • 入力パラメータありのときの例: <div>{{param}}</div>
    • {{param}}の箇所が、フォームに入力したパラメータに置換されます

特殊

ネスト

ネスト要素を利用することで、フレキシブルテキスト内に階層構造を作ることができます。
ネスト要素専用のツールバーを作成できるので、入れ子になったデザインに適しています。

DeveloperAPI出力例（初期設定）

<aside>
  <h4>TIPS</h4>
  <p>テキストテキストテキスト</p>
</aside>