NILTO

ドキュメント

  • TOP
  • ドキュメント
  • 要素の種類

要素の種類

フレキシブルテキストでは、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のように設定変更することも可能です

アドレス入力フォームの先頭に # を入力すると、フレキシブルテキストフィールド内のブロックに登録したIDが一覧表示され、選択することができます。

インライン画像

内部画像

DeveloperAPI出力例（初期設定）

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

ショートカットキー

  • なし

独自設定項目

  • 出力するHTML
    • 出力するhtmlを編集することができます。メディア情報の置換処理はプレースホルダー記法を参照してください。
外部画像

DeveloperAPI出力例（初期設定）

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

ショートカットキー

  • なし

独自設定項目

  • 出力するHTML
    • 出力するhtmlを編集することができます。メディア情報の置換処理はプレースホルダー記法を参照してください。

特殊

テーブル

DeveloperAPI出力例（初期設定）

<table>
  <tbody>
    <tr>
      <th><p>見出し1</p></th>
      <th><p>見出し2</p></th>
      <th><p>見出し3</p></th>
    </tr>
    <tr>
      <td><p>行1-1</p></td>
      <td><p>行1-2</p></td>
      <td><p>行1-3</p></td>
    </tr>
    <tr>
      <td><p>行2-1</p></td>
      <td><p>行2-2</p></td>
      <td><p>行2-3</p></td>
    </tr>
  </tbody>
</table>

ショートカットキー

  • なし

アドオン要素

段落（ブロック）

段落

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のように設定変更することも可能です

アドレス入力フォームの先頭に # を入力すると、フレキシブルテキストフィールド内のブロックに登録したIDが一覧表示され、選択することができます。

コンテンツリンク

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'
/>

独自設定項目

  • 出力するHTML
    • 出力するhtmlを編集することができます。メディア情報の置換処理はプレースホルダー記法を参照してください。
外部画像

DeveloperAPI出力例（初期設定）

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

独自設定項目

  • 出力するHTML
    • 出力するhtmlを編集することができます。メディア情報の置換処理はプレースホルダー記法を参照してください。

埋め込み

動画

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>

テーブル

DeveloperAPI出力例（初期設定）

<table>
  <tbody>
    <tr>
      <th><p>見出し1</p></th>
      <th><p>見出し2</p></th>
      <th><p>見出し3</p></th>
    </tr>
    <tr>
      <td><p>行1-1</p></td>
      <td><p>行1-2</p></td>
      <td><p>行1-3</p></td>
    </tr>
    <tr>
      <td><p>行2-1</p></td>
      <td><p>行2-2</p></td>
      <td><p>行2-3</p></td>
    </tr>
  </tbody>
</table>

問題は解決しましたか？

回答が見つからない場合は、お問合せのサポート窓口からお気軽にお問いあわせください。

お問い合わせ

目次